More
Troubleshooting
Fix common Toastflow problems like toasts not appearing, store init errors, missing progress bars, duplicates, and stuck queues.
Quick solutions for the most common problems.
Check all four 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. - If the toast sets a
containerId, a matching<ToastContainer id>must be mounted — a mismatch logs a one-shot[vue-toastflow]console warning (see Multiple Containers).
[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, containerId, 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
diagnostics.ts
toast.getState();
toast.getConfig();
toast.subscribeEvents((event) => {
console.log(event.kind, event.id);
});