[{"data":1,"prerenderedAt":257},["ShallowReactive",2],{"navigation_docs":3,"-components-plus-modal-page":89,"-components-plus-modal-page-surround":252},[4,27,41,63,77],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,14,18,22],{"title":11,"path":12,"stem":13},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction",{"title":15,"path":16,"stem":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":19,"path":20,"stem":21},"Configuration","\u002Fgetting-started\u002Fconfiguration","1.getting-started\u002F3.configuration",{"title":23,"path":24,"stem":25},"Directory Structure","\u002Fgetting-started\u002Fdirectory-structure","1.getting-started\u002F4.directory-structure",false,{"title":28,"icon":29,"path":30,"stem":31,"children":32,"page":26},"Routing","i-lucide-route","\u002Frouting","2.routing",[33,37],{"title":34,"path":35,"stem":36},"Parallel Routes","\u002Frouting\u002Fparallel-routes","2.routing\u002F1.parallel-routes",{"title":38,"path":39,"stem":40},"Modal Routes","\u002Frouting\u002Fmodal-routes","2.routing\u002F2.modal-routes",{"title":42,"icon":43,"path":44,"stem":45,"children":46,"page":26},"Components","i-lucide-blocks","\u002Fcomponents","3.components",[47,51,55,59],{"title":48,"path":49,"stem":50},"\u003CPlusParallelPage \u002F>","\u002Fcomponents\u002Fplus-parallel-page","3.components\u002F1.plus-parallel-page",{"title":52,"path":53,"stem":54},"\u003CPlusModalNuxtPage \u002F>","\u002Fcomponents\u002Fplus-modal-nuxt-page","3.components\u002F2.plus-modal-nuxt-page",{"title":56,"path":57,"stem":58},"\u003CPlusModalPage \u002F>","\u002Fcomponents\u002Fplus-modal-page","3.components\u002F3.plus-modal-page",{"title":60,"path":61,"stem":62},"\u003CPlusModalLink \u002F>","\u002Fcomponents\u002Fplus-modal-link","3.components\u002F4.plus-modal-link",{"title":64,"icon":65,"path":66,"stem":67,"children":68,"page":26},"API","i-lucide-braces","\u002Fapi","4.api",[69,73],{"title":70,"path":71,"stem":72},"Composables","\u002Fapi\u002Fcomposables","4.api\u002F2.composables",{"title":74,"path":75,"stem":76},"Interfaces","\u002Fapi\u002Finterfaces","4.api\u002F3.interfaces",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":26},"Examples","i-lucide-app-window","\u002Fexamples","5.examples",[83,86],{"title":34,"path":84,"stem":85},"\u002Fexamples\u002Fparallel-routes","5.examples\u002F1.parallel-routes",{"title":38,"path":87,"stem":88},"\u002Fexamples\u002Fmodal-routes","5.examples\u002F2.modal-routes",{"id":90,"title":56,"body":91,"description":245,"extension":246,"links":247,"meta":248,"navigation":249,"path":57,"seo":250,"stem":58,"__hash__":251},"docs\u002F3.components\u002F3.plus-modal-page.md",{"type":92,"value":93,"toc":242},"minimark",[94,109,141,146,153,238],[95,96,97,98,104,105,108],"p",{},"This component uses ",[99,100,101],"a",{"href":49},[102,103,48],"code",{}," at the underlying level for implementation but enables ",[102,106,107],{},"hide-fallback"," by default.",[95,110,111,112,118,119,124,125,131,132,135,136,140],{},"It also only renders while a modal route is open (see ",[99,113,115],{"href":114},"\u002Fapi\u002Finterfaces#modalrouter",[102,116,117],{},"ModalRouter.isOpen","), i.e. when the modal was opened through ",[99,120,121],{"href":61},[102,122,123],{},"\u003CPlusModalLink>"," or ",[99,126,128],{"href":127},"\u002Fapi\u002Fcomposables#usemodalrouter",[102,129,130],{},"$modalRouter",". A route reached by direct navigation (entering the URL, refreshing, or a plain ",[102,133,134],{},"NuxtLink",") renders as a plain full page and this outlet stays empty — even while a pending navigation still displays the previous page. If you need a parallel outlet that renders regardless of the modal state, use ",[99,137,138],{"href":49},[102,139,48],{}," directly.",[142,143,145],"h2",{"id":144},"usage","Usage",[147,148,149,150,152],"note",{},"Feel free to read ",[99,151,38],{"href":39}," first to know how to setup Modal Routes.",[154,155,161],"pre",{"className":156,"code":157,"filename":158,"language":159,"meta":160,"style":160},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CPlusModalPage name=\"foo\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Findex.vue","html","",[102,162,163,179,190,218,228],{"__ignoreMap":160},[164,165,168,172,176],"span",{"class":166,"line":167},"line",1,[164,169,171],{"class":170},"sMK4o","\u003C",[164,173,175],{"class":174},"swJcz","template",[164,177,178],{"class":170},">\n",[164,180,182,185,188],{"class":166,"line":181},2,[164,183,184],{"class":170},"  \u003C",[164,186,187],{"class":174},"div",[164,189,178],{"class":170},[164,191,193,196,199,203,206,209,213,215],{"class":166,"line":192},3,[164,194,195],{"class":170},"    \u003C",[164,197,198],{"class":174},"PlusModalPage",[164,200,202],{"class":201},"spNyl"," name",[164,204,205],{"class":170},"=",[164,207,208],{"class":170},"\"",[164,210,212],{"class":211},"sfazB","foo",[164,214,208],{"class":170},[164,216,217],{"class":170}," \u002F>\n",[164,219,221,224,226],{"class":166,"line":220},4,[164,222,223],{"class":170},"  \u003C\u002F",[164,225,187],{"class":174},[164,227,178],{"class":170},[164,229,231,234,236],{"class":166,"line":230},5,[164,232,233],{"class":170},"\u003C\u002F",[164,235,175],{"class":174},[164,237,178],{"class":170},[239,240,241],"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 .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);}",{"title":160,"searchDepth":181,"depth":181,"links":243},[244],{"id":144,"depth":181,"text":145},"Component to use for rendering a modal page.","md",null,{},true,{"title":56,"description":245},"J25y_wzvCeNGIqJynPpYkgBeklfCdNlOKipodfRoDkg",[253,255],{"title":52,"path":53,"stem":54,"description":254,"children":-1},"To enable Modal Routes in your Nuxt project, you need to use this component to replace or wrap \u003CNuxtPage \u002F>.",{"title":60,"path":61,"stem":62,"description":256,"children":-1},"Component to open a modal with a url or navigate inside modal view.",1786721251662]