Nuxt
Nuxt Notes
Practical Nuxt-specific rules for client-only usage and common toast flows.
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:
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.
Request Flow
const toastApi = useToast();
const request = toastApi.loading($fetch("/api/save", { method: "POST" }), {
loading: { title: "Saving" },
success: { title: "Saved" },
error: { title: "Failed" },
});
await request;
Update Later
const id = toast.show({
type: "loading",
title: "Uploading",
duration: 0,
});
toast.update(id, {
type: "success",
title: "Done",
duration: 3000,
});