Nuxt Module Options
nuxt-toastflow adds Nuxt-specific wiring around the shared Toastflow config.
{}.true."ToastContainer".Toast, icons, …). Default: true.Full Example
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
toastflow: {
css: true,
componentName: "ToastContainer",
config: {
position: "top-right",
alignment: "left",
duration: 5000,
maxVisible: 5,
queue: true,
pauseOnHover: true,
},
},
});
Option Details
Everything you would pass to createToastflow(...) in Vue goes under toastflow.config.
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
toastflow: {
config: {
position: "bottom-right",
duration: 4000,
maxVisible: 3,
queue: true,
},
},
});
Keep this JSON-serializable. Runtime callbacks belong on individual toast calls.
Leave css: true for the normal path. Set it to false when you want to own stylesheet loading.
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
css: ["~/assets/toastflow.css"],
toastflow: {
css: false,
},
});
Rename the auto-registered component:
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
toastflow: {
componentName: "AppToasts",
},
});
Or disable registration and import explicitly:
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
toastflow: {
componentName: false,
},
});
The registered component supports the same id prop as in Vue, so you can mount several containers and route toasts with containerId — see Multiple Containers.
By default the module also auto-registers Toast, ToastProgress, and the icon components (ArrowPath, Bell, CheckCircle, InfoCircle, QuestionMarkCircle, XCircle, XMark) under their export names — useful for headless slots and custom rendering.
The icon names are generic; if one collides with your own components or an icon library, turn the registration off and import what you need from nuxt-toastflow/runtime:
export default defineNuxtConfig({
modules: ["nuxt-toastflow"],
toastflow: {
components: false,
},
});
<script setup lang="ts">
import { CheckCircle } from "nuxt-toastflow/runtime";
</script>
JSON-Serializable Config
toastflow.config. Nuxt config is serialized. Use per-toast callbacks like onClose, onClick, or button onClick at runtime.toast.success({
title: "Saved",
onClose() {
console.log("toast closed");
},
});