VueCraft NPM

Headless-режим ​

useToastState() — возвращает сырые реактивные данные очереди. Используйте для построения полностью кастомного UI уведомлений — <ToastContainer> не нужен.

ts
const { active, pending, count, has } = useToastState(context?: ToastContext)

Возвращаемое значение ​

active ​

ComputedRef<ToastItem[]>

Текущие видимые тосты (исключая скрытые сгруппированные).

pending ​

ComputedRef<ToastItem[]>

Тосты, ожидающие слота.

count ​

ComputedRef<number>

active.value.length.

has(id) ​

(id: string) => boolean

Проверить, активен ли тост.

Пример — полностью кастомный рендер ​

vue
<script setup lang="ts">
import { useToast, useToastState } from 'vue-toast-kit'

const toast = useToast()
const { active } = useToastState()
</script>

<template>
  <!-- Без <ToastContainer> — рендерим полностью с нуля -->
  <div class="my-notifications">
    <div
      v-for="t in active"
      :key="t.id"
      :class="`notification notification--${t.options.type}`"
      @mouseenter="t.pause()"
      @mouseleave="t.resume()"
    >
      <span>{{ t.message }}</span>
      <button @click="t.dismiss()">✕</button>
      <div class="progress" :style="{ width: `${t.remaining.value * 100}%` }" />
    </div>
  </div>
</template>

Каждый ToastItem в active полностью реактивен:

id ​

string

Уникальный id.

message ​

string | VNode

Содержимое тоста.

options ​

ToastOptions (обязательно)

Объединённые опции.

createdAt ​

number

Date.now() в момент создания.

remaining ​

Ref<number>

0–1, доля оставшегося времени таймера.

isPaused ​

Ref<boolean>

Таймер на паузе.

groupCount ​

Ref<number>

Обычно 1; >1, когда активна группировка.

pause() ​

() => void

Поставить таймер на паузу.

resume() ​

() => void

Возобновить таймер.

dismiss() ​

() => void

Закрыть тост.

update(opts) ​

(Partial<ToastOptions>) => void

Слить новые опции.