More
Troubleshooting
Common issues and quick fixes when using Toastflow.
Quick solutions for the most common problems.
Check all three points first:
createToastflow(...)is called during app setup (Vue) ornuxt-toastflowis inmodules(Nuxt).<ToastContainer />is rendered in the active component tree.- You call
toast.*after the store is initialized.
[vue-toastflow] Toast store not initialized. Did you install the plugin?
The toast helper was called before the store was created. Make sure app.use(createToastflow(...)) runs early in your setup.
Possible reasons:
progressBarisfalsedurationisInfinityor0- A custom slot replaced the progress renderer
Check these options:
duration- is it shorter than expected?pauseOnHover- is it disabled?pauseStrategy-"reset"restarts the full duration on resumeupdate(...)calls reset the timer on visible toastspreventDuplicates: truemerges and restarts matching toasts
preventDuplicates compares only position, type, title, and description. If any of these differ, the toast is not treated as a duplicate.Likely causes:
- Queue is paused - call
toast.resumeQueue() - No capacity -
maxVisibleis still full - You are checking a different position stack
Inspect with toast.getState().
update(id, options) requires at least one non-empty text field (title or description).Set
supportHtml: true on the toast. HTML is rendered as-is unless you configure the sanitizer hook — use trusted content only.Nuxt generates the Toastflow types (auto-imported toast / useToast, $toast, the <ToastContainer> component including its slot props, and the toastflow key in nuxt.config) into .nuxt/ — they exist only after Nuxt has run at least once:
- Run
npx nuxi prepare(or just startnuxi devonce). - Make sure your
tsconfig.jsonextends./.nuxt/tsconfig.json(default in scaffolded projects). - Restart the editor's TS server if completions still don't show up.
The toastflow key in nuxt.config is fully typed — every ToastConfig option autocompletes. If it doesn't, check that nuxt-toastflow is installed as a dependency (not just referenced in modules) and re-run nuxi prepare.
Check:
- CSS class overrides in the
animationconfig - CSS variables
--tf-toast-animation-in-durationand--tf-toast-animation-out-duration - User preference for
prefers-reduced-motion
Diagnostic Tools
toast.getState();
toast.getConfig();
toast.subscribeEvents((event) => {
console.log(event.kind, event.id);
});