[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation_docs":3,"-docs-more-comparisons":142,"-docs-more-comparisons-surround":462},[4,20,45,69,85,96,126],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":19},"Global","i-tabler-box","\u002Fdocs\u002Fglobal","docs\u002F1.global",[10,14],{"title":11,"path":12,"stem":13,"icon":6},"Overview","\u002Fdocs\u002Fglobal\u002Foverview","docs\u002F1.global\u002F1.overview",{"title":15,"path":16,"stem":17,"icon":18},"Styling","\u002Fdocs\u002Fglobal\u002Fstyling","docs\u002F1.global\u002F2.styling","i-tabler-palette",false,{"title":21,"icon":22,"path":23,"stem":24,"children":25,"page":19},"Vue","i-simple-icons-vuedotjs","\u002Fdocs\u002Fvue","docs\u002F2.vue",[26,30,35,40],{"title":27,"path":28,"stem":29,"icon":22},"Quick Start","\u002Fdocs\u002Fvue\u002Fquick-start","docs\u002F2.vue\u002F1.quick-start",{"title":31,"path":32,"stem":33,"icon":34},"Toasts","\u002Fdocs\u002Fvue\u002Ftoasts","docs\u002F2.vue\u002F2.toasts","i-tabler-bell",{"title":36,"path":37,"stem":38,"icon":39},"Timers & Progress","\u002Fdocs\u002Fvue\u002Ftimers-and-progress","docs\u002F2.vue\u002F3.timers-and-progress","i-tabler-stopwatch",{"title":41,"path":42,"stem":43,"icon":44},"Buttons & Actions","\u002Fdocs\u002Fvue\u002Fbuttons-and-actions","docs\u002F2.vue\u002F4.buttons-and-actions","i-tabler-hand-click",{"title":46,"icon":47,"path":48,"stem":49,"children":50,"page":19},"Nuxt","i-simple-icons-nuxtdotjs","\u002Fdocs\u002Fnuxt","docs\u002F3.nuxt",[51,54,59,64],{"title":27,"path":52,"stem":53,"icon":47},"\u002Fdocs\u002Fnuxt\u002Fquick-start","docs\u002F3.nuxt\u002F1.quick-start",{"title":55,"path":56,"stem":57,"icon":58},"toast vs useToast","\u002Fdocs\u002Fnuxt\u002Ftoast-and-use-toast","docs\u002F3.nuxt\u002F2.toast-and-use-toast","i-tabler-braces",{"title":60,"path":61,"stem":62,"icon":63},"Module Options","\u002Fdocs\u002Fnuxt\u002Fmodule-options","docs\u002F3.nuxt\u002F3.module-options","i-tabler-adjustments-horizontal",{"title":65,"path":66,"stem":67,"icon":68},"Nuxt Notes","\u002Fdocs\u002Fnuxt\u002Fnuxt-notes","docs\u002F3.nuxt\u002F5.nuxt-notes","i-tabler-note",{"title":70,"icon":71,"path":72,"stem":73,"children":74,"page":19},"Headless","i-tabler-layout-board-split","\u002Fdocs\u002Fheadless","docs\u002F4.headless",[75,80],{"title":76,"path":77,"stem":78,"icon":79},"Core Store","\u002Fdocs\u002Fheadless\u002Fcore-store","docs\u002F4.headless\u002F1.core-store","i-tabler-automation",{"title":81,"path":82,"stem":83,"icon":84},"Headless Slot","\u002Fdocs\u002Fheadless\u002Fheadless-slot","docs\u002F4.headless\u002F2.headless-slot","i-tabler-template",{"title":86,"icon":87,"path":88,"stem":89,"children":90,"page":19},"Examples","i-tabler-layout-cards","\u002Fdocs\u002Fexamples","docs\u002F5.examples",[91],{"title":92,"path":93,"stem":94,"icon":95},"Live Examples","\u002Fdocs\u002Fexamples\u002Flive-examples","docs\u002F5.examples\u002F1.live-examples","i-tabler-player-play",{"title":97,"icon":98,"path":99,"stem":100,"children":101,"page":19},"API","i-tabler-file-code-2","\u002Fdocs\u002Fapi","docs\u002F6.api",[102,106,111,116,121],{"title":103,"path":104,"stem":105,"icon":63},"Configuration","\u002Fdocs\u002Fapi\u002Fconfiguration","docs\u002F6.api\u002F1.configuration",{"title":107,"path":108,"stem":109,"icon":110},"Actions","\u002Fdocs\u002Fapi\u002Factions","docs\u002F6.api\u002F2.actions","i-tabler-terminal",{"title":112,"path":113,"stem":114,"icon":115},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F6.api\u002F3.events","i-tabler-radio",{"title":117,"path":118,"stem":119,"icon":120},"State","\u002Fdocs\u002Fapi\u002Fstate","docs\u002F6.api\u002F4.state","i-tabler-database",{"title":122,"path":123,"stem":124,"icon":125},"Runtime Exports","\u002Fdocs\u002Fapi\u002Fruntime-exports","docs\u002F6.api\u002F5.runtime-exports","i-tabler-package",{"title":127,"icon":128,"path":129,"stem":130,"children":131,"page":19},"More","i-lucide-ellipsis","\u002Fdocs\u002Fmore","docs\u002F7.more",[132,137],{"title":133,"path":134,"stem":135,"icon":136},"Troubleshooting","\u002Fdocs\u002Fmore\u002Ftroubleshooting","docs\u002F7.more\u002F1.troubleshooting","i-tabler-tool",{"title":138,"path":139,"stem":140,"icon":141},"Comparisons","\u002Fdocs\u002Fmore\u002Fcomparisons","docs\u002F7.more\u002F2.comparisons","i-tabler-scale",{"id":143,"title":138,"body":144,"description":455,"extension":456,"links":457,"meta":458,"navigation":459,"path":139,"seo":460,"stem":140,"__hash__":461},"docs\u002Fdocs\u002F7.more\u002F2.comparisons.md",{"type":145,"value":146,"toc":446},"minimark",[147,151,156,174,178,313,317,413,417,420,433,436,440],[148,149,150],"p",{},"Toastflow is built for teams that want toast notifications to behave like a small runtime, not just a visual helper.",[152,153,155],"h2",{"id":154},"decision-matrix","Decision Matrix",[157,158,159,164,169],"card-group",{},[160,161,163],"card",{"icon":79,"title":162},"Pick Toastflow","You need queue control, typed state, lifecycle events, CSS-first styling, Nuxt integration, and a truly headless core.",[160,165,168],{"icon":166,"title":167},"i-tabler-bolt","Pick an opinionated toaster","You want a narrow API, fixed visual direction, and very few configuration decisions.",[160,170,173],{"icon":171,"title":172},"i-tabler-plug","Pick a legacy plugin","You only need a quick notification layer and do not need runtime state, headless rendering, or detailed queue behavior.",[152,175,177],{"id":176},"feature-lens","Feature Lens",[179,180,181,197],"table",{},[182,183,184],"thead",{},[185,186,187,191,194],"tr",{},[188,189,190],"th",{},"Need",[188,192,193],{},"Toastflow answer",[188,195,196],{},"Why it matters",[198,199,200,228,242,256,270,285,299],"tbody",{},[185,201,202,206,225],{},[203,204,205],"td",{},"Runtime control",[203,207,208,212,213,212,216,212,219,212,222],{},[209,210,211],"code",{},"getState",", ",[209,214,215],{},"subscribe",[209,217,218],{},"subscribeEvents",[209,220,221],{},"pauseQueue",[209,223,224],{},"resumeQueue",[203,226,227],{},"Toasts can participate in workflow state, not only appear visually.",[185,229,230,233,239],{},[203,231,232],{},"Real headless mode",[203,234,235,238],{},[209,236,237],{},"toastflow-core"," exports the store, state, events, types, and helpers",[203,240,241],{},"You can build any renderer in Vue, Nuxt, or outside Vue entirely.",[185,243,244,247,253],{},[203,245,246],{},"Vue custom rendering",[203,248,249,252],{},[209,250,251],{},"\u003CToastContainer v-slot>"," exposes resolved UI props and helpers",[203,254,255],{},"You can replace the toast card while keeping accessibility wiring.",[185,257,258,261,267],{},[203,259,260],{},"Nuxt integration",[203,262,263,266],{},[209,264,265],{},"nuxt-toastflow"," module with auto-imports and runtime exports",[203,268,269],{},"Nuxt apps get setup, CSS injection, SSR-safe wiring, and components.",[185,271,272,275,282],{},[203,273,274],{},"Styling ownership",[203,276,277,278,281],{},"CSS variables, theme classes, inline ",[209,279,280],{},"css",", optional shipped CSS",[203,283,284],{},"Design systems can own the final look without wrapping every toast.",[185,286,287,290,296],{},[203,288,289],{},"Async workflows",[203,291,292,295],{},[209,293,294],{},"toast.loading(...)"," transitions one toast id through states",[203,297,298],{},"Loading, success, and error stay connected instead of spawning noise.",[185,300,301,304,310],{},[203,302,303],{},"TypeScript surface",[203,305,306,307,309],{},"Core types are exported through ",[209,308,237],{},", Vue, and Nuxt runtime",[203,311,312],{},"App code can type payloads, state, events, buttons, and callbacks.",[152,314,316],{"id":315},"library-fit","Library Fit",[179,318,319,332],{},[182,320,321],{},[185,322,323,326,329],{},[188,324,325],{},"Library",[188,327,328],{},"Best fit",[188,330,331],{},"Trade-off compared with Toastflow",[198,333,334,348,361,374,387,400],{},[185,335,336,342,345],{},[203,337,338],{},[339,340,341],"strong",{},"Toastflow",[203,343,344],{},"Runtime-driven Vue\u002FNuxt apps",[203,346,347],{},"More capability to learn because queue, state, styling, and headless are exposed.",[185,349,350,355,358],{},[203,351,352],{},[339,353,354],{},"vue-sonner",[203,356,357],{},"Sonner-style product UI",[203,359,360],{},"Great for a constrained visual model; less focused on standalone runtime ownership.",[185,362,363,368,371],{},[203,364,365],{},[339,366,367],{},"notivue",[203,369,370],{},"Composable-first notification workflows",[203,372,373],{},"Strong Vue ergonomics; Toastflow puts more emphasis on exported core state and headless rendering.",[185,375,376,381,384],{},[203,377,378],{},[339,379,380],{},"vue3-toastify",[203,382,383],{},"Toastify-style familiarity",[203,385,386],{},"Familiar API shape; Toastflow is stronger when you need queue\u002Fstate\u002Fheadless control.",[185,388,389,394,397],{},[203,390,391],{},[339,392,393],{},"vue-toast-notification",[203,395,396],{},"Fast plugin setup",[203,398,399],{},"Lightweight integration; fewer reasons to choose it when deep customization is required.",[185,401,402,407,410],{},[203,403,404],{},[339,405,406],{},"vue3-notification",[203,408,409],{},"Basic notification ergonomics",[203,411,412],{},"Useful for simple notifications; not aimed at full toast runtime ownership.",[152,414,416],{"id":415},"headless-difference","Headless Difference",[148,418,419],{},"Toastflow has two customization levels:",[157,421,422,426],{},[160,423,425],{"icon":84,"title":424,"to":82},"Headless slot","Stay in Vue\u002FNuxt, render your own markup, and keep Toastflow's resolved props, ARIA labels, buttons, icons, progress helpers, and dismiss wiring.",[160,427,429,430,432],{"icon":79,"title":428,"to":77},"Core store","Use ",[209,431,237],{}," directly. You own every pixel and Toastflow only provides state, queueing, timers, updates, events, and types.",[148,434,435],{},"That second option is the important distinction: the headless package is not just \"custom content\". It is the runtime without the renderer.",[152,437,439],{"id":438},"summary","Summary",[148,441,442,443,445],{},"Choose ",[339,444,341],{}," when notification behavior is part of your application architecture: queueing, async state, event subscriptions, TypeScript types, and renderer ownership matter. Choose a smaller opinionated toaster when your app only needs quick visual messages.",{"title":447,"searchDepth":448,"depth":448,"links":449},"",2,[450,451,452,453,454],{"id":154,"depth":448,"text":155},{"id":176,"depth":448,"text":177},{"id":315,"depth":448,"text":316},{"id":415,"depth":448,"text":416},{"id":438,"depth":448,"text":439},"How Toastflow compares to other Vue toast libraries.","md",null,{},{"icon":141},{"title":138,"description":455},"Kox0uhb80J_tTvPfSL7GxiEur3T1VphgGxgd6zf_YYY",[463,457],{"title":133,"path":134,"stem":135,"description":464,"icon":136,"children":-1},"Common issues and quick fixes when using Toastflow."]