Nuxt
Nuxt Notes
Practical Nuxt-specific rules for client-only toast rendering, SSR safety, and common notification flows with nuxt-toastflow.
Toastflow is UI feedback. In Nuxt, that means the trigger should happen where the browser can show it.
Safe Places To Call Toasts
Click handlers
Show feedback after a user action.
onMounted
Show a toast after client hydration if the page needs it.
Client composables
Wrap request flows and call
toast.loading(...) from client code.Avoid Server-Only Places
Do not trigger toasts from Nitro routes, server handlers, server-only plugins, or code that runs only during SSR. Return data/errors from the server, then show UI feedback on the client.
Functions Cannot Live In nuxt.config
The toastflow.config object in nuxt.config is JSON-serialized into the generated plugin. Functions (sanitizer, createdAtFormatter, onMount, onClose, button onClick, …), Date, and RegExp values do not survive that — the module warns with the exact config path and omits them.
Pass function options per toast instead; those run entirely at runtime and work as expected:
per-toast-functions.ts
toast.show({
type: "success",
title: "Saved",
showCreatedAt: true,
createdAtFormatter: (createdAt) => new Date(createdAt).toLocaleTimeString(),
onClose: () => console.log("closed"),
});
Global function defaults are currently not supported through the Nuxt module config.
Common Patterns
const toastApi = useToast();
const request = toastApi.loading($fetch("/api/save", { method: "POST" }), {
loading: { title: "Saving" },
success: { title: "Saved" },
error: { title: "Failed" },
});
await request;
const id = toast.show({
type: "loading",
title: "Uploading",
duration: 0,
});
toast.update(id, {
type: "success",
title: "Done",
duration: 3000,
});