[{"data":1,"prerenderedAt":599},["ShallowReactive",2],{"navigation_docs":3,"-docs-vue-multiple-containers":147,"-docs-vue-multiple-containers-surround":594},[4,20,50,74,90,101,131],{"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,45],{"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,"path":47,"stem":48,"icon":49},"Multiple Containers","\u002Fdocs\u002Fvue\u002Fmultiple-containers","docs\u002F2.vue\u002F5.multiple-containers","i-tabler-layout-grid",{"title":51,"icon":52,"path":53,"stem":54,"children":55,"page":19},"Nuxt","i-simple-icons-nuxtdotjs","\u002Fdocs\u002Fnuxt","docs\u002F3.nuxt",[56,59,64,69],{"title":27,"path":57,"stem":58,"icon":52},"\u002Fdocs\u002Fnuxt\u002Fquick-start","docs\u002F3.nuxt\u002F1.quick-start",{"title":60,"path":61,"stem":62,"icon":63},"toast vs useToast","\u002Fdocs\u002Fnuxt\u002Ftoast-and-use-toast","docs\u002F3.nuxt\u002F2.toast-and-use-toast","i-tabler-braces",{"title":65,"path":66,"stem":67,"icon":68},"Module Options","\u002Fdocs\u002Fnuxt\u002Fmodule-options","docs\u002F3.nuxt\u002F3.module-options","i-tabler-adjustments-horizontal",{"title":70,"path":71,"stem":72,"icon":73},"Nuxt Notes","\u002Fdocs\u002Fnuxt\u002Fnuxt-notes","docs\u002F3.nuxt\u002F4.nuxt-notes","i-tabler-note",{"title":75,"icon":76,"path":77,"stem":78,"children":79,"page":19},"Headless","i-tabler-layout-board-split","\u002Fdocs\u002Fheadless","docs\u002F4.headless",[80,85],{"title":81,"path":82,"stem":83,"icon":84},"Core Store","\u002Fdocs\u002Fheadless\u002Fcore-store","docs\u002F4.headless\u002F1.core-store","i-tabler-automation",{"title":86,"path":87,"stem":88,"icon":89},"Headless Slot","\u002Fdocs\u002Fheadless\u002Fheadless-slot","docs\u002F4.headless\u002F2.headless-slot","i-tabler-template",{"title":91,"icon":92,"path":93,"stem":94,"children":95,"page":19},"Examples","i-tabler-layout-cards","\u002Fdocs\u002Fexamples","docs\u002F5.examples",[96],{"title":97,"path":98,"stem":99,"icon":100},"Live Examples","\u002Fdocs\u002Fexamples\u002Flive-examples","docs\u002F5.examples\u002F1.live-examples","i-tabler-player-play",{"title":102,"icon":103,"path":104,"stem":105,"children":106,"page":19},"API","i-tabler-file-code-2","\u002Fdocs\u002Fapi","docs\u002F6.api",[107,111,116,121,126],{"title":108,"path":109,"stem":110,"icon":68},"Configuration","\u002Fdocs\u002Fapi\u002Fconfiguration","docs\u002F6.api\u002F1.configuration",{"title":112,"path":113,"stem":114,"icon":115},"Actions","\u002Fdocs\u002Fapi\u002Factions","docs\u002F6.api\u002F2.actions","i-tabler-terminal",{"title":117,"path":118,"stem":119,"icon":120},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F6.api\u002F3.events","i-tabler-radio",{"title":122,"path":123,"stem":124,"icon":125},"State","\u002Fdocs\u002Fapi\u002Fstate","docs\u002F6.api\u002F4.state","i-tabler-database",{"title":127,"path":128,"stem":129,"icon":130},"Runtime Exports","\u002Fdocs\u002Fapi\u002Fruntime-exports","docs\u002F6.api\u002F5.runtime-exports","i-tabler-package",{"title":132,"icon":133,"path":134,"stem":135,"children":136,"page":19},"More","i-tabler-dots","\u002Fdocs\u002Fmore","docs\u002F7.more",[137,142],{"title":138,"path":139,"stem":140,"icon":141},"Troubleshooting","\u002Fdocs\u002Fmore\u002Ftroubleshooting","docs\u002F7.more\u002F1.troubleshooting","i-tabler-tool",{"title":143,"path":144,"stem":145,"icon":146},"Comparisons","\u002Fdocs\u002Fmore\u002Fcomparisons","docs\u002F7.more\u002F2.comparisons","i-tabler-scale",{"id":148,"title":46,"body":149,"description":586,"extension":587,"links":588,"meta":589,"navigation":590,"path":47,"seo":591,"sitemap":592,"stem":48,"__hash__":593},"docs\u002Fdocs\u002F2.vue\u002F5.multiple-containers.md",{"type":150,"value":151,"toc":576},"minimark",[152,165,170,380,393,397,451,534,538,572],[153,154,155,156,160,161,164],"p",{},"By default you mount a single ",[157,158,159],"code",{},"\u003CToastContainer \u002F>"," and every toast renders in it. Optionally, you can mount several containers — each with its own ",[157,162,163],{},"id"," — and route individual toasts to them.",[166,167,169],"h2",{"id":168},"setup","Setup",[171,172,173,178,187,280,284,295],"steps",{},[174,175,177],"h3",{"id":176},"mount-the-containers","Mount the containers",[153,179,180,181,183,184,186],{},"Give each extra container an ",[157,182,163],{},"; the one without an ",[157,185,163],{}," stays the default:",[188,189,195],"pre",{"className":190,"code":191,"filename":192,"language":193,"meta":194,"style":194},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003C!-- default container: receives toasts without a containerId -->\n  \u003CToastContainer \u002F>\n\n  \u003C!-- named container -->\n  \u003CToastContainer id=\"panel\" \u002F>\n\u003C\u002Ftemplate>\n","App.vue","vue","",[157,196,197,213,220,232,239,245,270],{"__ignoreMap":194},[198,199,202,206,210],"span",{"class":200,"line":201},"line",1,[198,203,205],{"class":204},"sMK4o","\u003C",[198,207,209],{"class":208},"swJcz","template",[198,211,212],{"class":204},">\n",[198,214,216],{"class":200,"line":215},2,[198,217,219],{"class":218},"sHwdD","  \u003C!-- default container: receives toasts without a containerId -->\n",[198,221,223,226,229],{"class":200,"line":222},3,[198,224,225],{"class":204},"  \u003C",[198,227,228],{"class":208},"ToastContainer",[198,230,231],{"class":204}," \u002F>\n",[198,233,235],{"class":200,"line":234},4,[198,236,238],{"emptyLinePlaceholder":237},true,"\n",[198,240,242],{"class":200,"line":241},5,[198,243,244],{"class":218},"  \u003C!-- named container -->\n",[198,246,248,250,252,256,259,262,266,268],{"class":200,"line":247},6,[198,249,225],{"class":204},[198,251,228],{"class":208},[198,253,255],{"class":254},"spNyl"," id",[198,257,258],{"class":204},"=",[198,260,261],{"class":204},"\"",[198,263,265],{"class":264},"sfazB","panel",[198,267,261],{"class":204},[198,269,231],{"class":204},[198,271,273,276,278],{"class":200,"line":272},7,[198,274,275],{"class":204},"\u003C\u002F",[198,277,209],{"class":208},[198,279,212],{"class":204},[174,281,283],{"id":282},"route-toasts-to-a-container","Route toasts to a container",[153,285,286,287,290,291,294],{},"Target a container with the ",[157,288,289],{},"containerId"," option (any show helper, ",[157,292,293],{},"update",", and global config accept it):",[188,296,301],{"className":297,"code":298,"filename":299,"language":300,"meta":194,"style":194},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","toast.success(\"Saved\"); \u002F\u002F → default container\ntoast.success(\"Saved\", { containerId: \"panel\" }); \u002F\u002F → \u003CToastContainer id=\"panel\" \u002F>\n","routing.ts","ts",[157,302,303,335],{"__ignoreMap":194},[198,304,305,309,312,316,319,321,324,326,329,332],{"class":200,"line":201},[198,306,308],{"class":307},"sTEyZ","toast",[198,310,311],{"class":204},".",[198,313,315],{"class":314},"s2Zo4","success",[198,317,318],{"class":307},"(",[198,320,261],{"class":204},[198,322,323],{"class":264},"Saved",[198,325,261],{"class":204},[198,327,328],{"class":307},")",[198,330,331],{"class":204},";",[198,333,334],{"class":218}," \u002F\u002F → default container\n",[198,336,337,339,341,343,345,347,349,351,354,357,360,363,366,368,370,373,375,377],{"class":200,"line":215},[198,338,308],{"class":307},[198,340,311],{"class":204},[198,342,315],{"class":314},[198,344,318],{"class":307},[198,346,261],{"class":204},[198,348,323],{"class":264},[198,350,261],{"class":204},[198,352,353],{"class":204},",",[198,355,356],{"class":204}," {",[198,358,359],{"class":208}," containerId",[198,361,362],{"class":204},":",[198,364,365],{"class":204}," \"",[198,367,265],{"class":264},[198,369,261],{"class":204},[198,371,372],{"class":204}," }",[198,374,328],{"class":307},[198,376,331],{"class":204},[198,378,379],{"class":218}," \u002F\u002F → \u003CToastContainer id=\"panel\" \u002F>\n",[381,382,383,384,386,387,389,390,392],"note",{},"The component prop is ",[157,385,163],{},", the toast option is ",[157,388,289],{}," — the toast option can't be called ",[157,391,163],{}," because that's the toast's own identifier.",[166,394,396],{"id":395},"behavior","Behavior",[398,399,400,410,429,445],"ul",{},[401,402,403,404,406,407,409],"li",{},"Matching is strict: toasts without a ",[157,405,289],{}," render only in the container without an ",[157,408,163],{},", and vice versa.",[401,411,412,415,416,419,420,423,424,428],{},[157,413,414],{},"maxVisible",", ",[157,417,418],{},"queue",", ordering, and ",[157,421,422],{},"preventDuplicates"," are all scoped per ",[425,426,427],"strong",{},"container + position"," — a full stack in one container never evicts or queues toasts in another.",[401,430,431,415,434,415,437,440,441,444],{},[157,432,433],{},"dismiss(id)",[157,435,436],{},"update(id, ...)",[157,438,439],{},"pause(id)",", and ",[157,442,443],{},"resume(id)"," work by toast id regardless of container.",[401,446,447,450],{},[157,448,449],{},"dismissAll()"," clears everything; pass a filter to scope it:",[188,452,455],{"className":297,"code":453,"filename":454,"language":300,"meta":194,"style":194},"toast.dismissAll({ containerId: \"panel\" }); \u002F\u002F only container \"panel\"\ntoast.dismissAll({ containerId: undefined }); \u002F\u002F only the default container\ntoast.dismissAll(); \u002F\u002F everything\n","dismiss-scoped.ts",[157,456,457,490,518],{"__ignoreMap":194},[198,458,459,461,463,466,468,471,473,475,477,479,481,483,485,487],{"class":200,"line":201},[198,460,308],{"class":307},[198,462,311],{"class":204},[198,464,465],{"class":314},"dismissAll",[198,467,318],{"class":307},[198,469,470],{"class":204},"{",[198,472,359],{"class":208},[198,474,362],{"class":204},[198,476,365],{"class":204},[198,478,265],{"class":264},[198,480,261],{"class":204},[198,482,372],{"class":204},[198,484,328],{"class":307},[198,486,331],{"class":204},[198,488,489],{"class":218}," \u002F\u002F only container \"panel\"\n",[198,491,492,494,496,498,500,502,504,506,509,511,513,515],{"class":200,"line":215},[198,493,308],{"class":307},[198,495,311],{"class":204},[198,497,465],{"class":314},[198,499,318],{"class":307},[198,501,470],{"class":204},[198,503,359],{"class":208},[198,505,362],{"class":204},[198,507,508],{"class":204}," undefined",[198,510,372],{"class":204},[198,512,328],{"class":307},[198,514,331],{"class":204},[198,516,517],{"class":218}," \u002F\u002F only the default container\n",[198,519,520,522,524,526,529,531],{"class":200,"line":222},[198,521,308],{"class":307},[198,523,311],{"class":204},[198,525,465],{"class":314},[198,527,528],{"class":307},"()",[198,530,331],{"class":204},[198,532,533],{"class":218}," \u002F\u002F everything\n",[166,535,537],{"id":536},"live-example","Live Example",[539,540,541,545,559,562],"docs-multi-container-example",{},[166,542,544],{"id":543},"warnings","Warnings",[546,547,548,549,551,552,555,556,558],"warning",{},"In case of a misconfiguration, Toastflow logs a one-shot console warning when a toast targets a ",[157,550,289],{}," with no matching mounted ",[157,553,554],{},"\u003CToastContainer id>",", or when two containers are mounted with the same ",[157,557,163],{}," (each renders the same toasts twice).",[166,560,51],{"id":561},"nuxt",[153,563,564,565,568,569,571],{},"The auto-registered ",[157,566,567],{},"\u003CToastContainer>"," component supports the same ",[157,570,163],{}," prop — mount as many as you need, no extra module configuration required.",[573,574,575],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":194,"searchDepth":215,"depth":215,"links":577},[578,582,583,584,585],{"id":168,"depth":215,"text":169,"children":579},[580,581],{"id":176,"depth":222,"text":177},{"id":282,"depth":222,"text":283},{"id":395,"depth":215,"text":396},{"id":536,"depth":215,"text":537},{"id":543,"depth":215,"text":544},{"id":561,"depth":215,"text":51},"Mount several ToastContainer components in one Vue app and route toast notifications to a specific container with containerId.","md",null,{},{"icon":49},{"title":46,"description":586},{"loc":47},"j7cMTNSN_oBTO77FxeCBfJdbukwt-8vnQEHWf9ll-48",[595,597],{"title":41,"path":42,"stem":43,"description":596,"icon":44,"children":-1},"Add action buttons to Vue toast notifications, control close behavior, and display created-at timestamps with vue-toastflow.",{"title":27,"path":57,"stem":58,"description":598,"icon":52,"children":-1},"Install the nuxt-toastflow module, configure it in nuxt.config, and show your first toast notification in a Nuxt 3 or Nuxt 4 app.",1783872049844]