API
Runtime Exports
Shared Vue, Nuxt, and headless exports available from Toastflow packages.
Toastflow exposes the same runtime model through each package. Use the import path that matches your app, then keep the same API names across Vue, Nuxt, and headless usage.
Full TypeScript definitions:
packages/core/src/types.ts and packages/vue/src/index.ts.Import Paths
| App type | Import from | Use for |
|---|---|---|
| Vue app | vue-toastflow | Plugin, components, toast, types, helpers |
| Nuxt auto-imports | nuxt-toastflow module | toast, useToast(), <ToastContainer /> |
| Nuxt explicit path | nuxt-toastflow/runtime | Manual component/API imports |
| Headless runtime | toastflow-core | Store, state, events, types, and utilities |
Package Map
vue/runtime.ts
import {
createToastflow,
toast,
ToastContainer,
Toast,
ToastProgress,
type ToastConfig,
type ToastState,
} from "vue-toastflow";
Export Groups
Components
ToastContainer, Toast, ToastProgress, and the built-in icon components.Runtime API
toast, createToastflow, typed helpers, loading flow, update, dismiss, queue controls, state getters, and subscriptions.Types
ToastConfig, ToastInstance, ToastState, ToastContext, action button types, event types, and payload/update inputs.Headless Core
createToastStore, state subscriptions, event subscriptions, validators, UUID utility, and default formatter utilities.Icon Components
The built-in SVG icons are exported for custom renderers: CheckCircle (success), XCircle (error), InfoCircle (info), QuestionMarkCircle (warning), ArrowPath (loading), Bell (default), and XMark (close). Use them when building your own card with the headless slot:
<script setup lang="ts">
import { ToastContainer, CheckCircle } from "vue-toastflow";
</script>
<template>
<ToastContainer v-slot="{ toast }">
<div class="my-toast">
<CheckCircle v-if="toast.type === 'success'" class="my-icon" />
<p>{{ toast.title }}</p>
</div>
</ToastContainer>
</template>
Nuxt Runtime Path
Use nuxt-toastflow/runtime only when auto-imports are not enough:
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
toastflow: {
componentName: false,
},
});
<script setup lang="ts">
import { ToastContainer } from "nuxt-toastflow/runtime";
</script>
<template>
<ToastContainer />
<NuxtPage />
</template>
For normal Nuxt pages, prefer the module auto-imports documented in toast vs useToast.