[{"data":1,"prerenderedAt":503},["ShallowReactive",2],{"navigation_docs":3,"-components-plus-modal-app":81,"-components-plus-modal-app-surround":498},[4,27,41,67],{"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,63],{"title":48,"path":49,"stem":50},"\u003CPlusParallelPage \u002F>","\u002Fcomponents\u002Fplus-parallel-page","3.components\u002F1.plus-parallel-page",{"title":52,"path":53,"stem":54},"\u003CPlusModalApp \u002F>","\u002Fcomponents\u002Fplus-modal-app","3.components\u002F2.plus-modal-app",{"title":56,"path":57,"stem":58},"\u003CPlusModalNuxtPage \u002F>","\u002Fcomponents\u002Fplus-modal-nuxt-page","3.components\u002F3.plus-modal-nuxt-page",{"title":60,"path":61,"stem":62},"\u003CPlusModalPage \u002F>","\u002Fcomponents\u002Fplus-modal-page","3.components\u002F4.plus-modal-page",{"title":64,"path":65,"stem":66},"\u003CPlusModalLink \u002F>","\u002Fcomponents\u002Fplus-modal-link","3.components\u002F5.plus-modal-link",{"title":68,"icon":69,"path":70,"stem":71,"children":72,"page":26},"API","i-lucide-braces","\u002Fapi","4.api",[73,77],{"title":74,"path":75,"stem":76},"Composables","\u002Fapi\u002Fcomposables","4.api\u002F2.composables",{"title":78,"path":79,"stem":80},"Interfaces","\u002Fapi\u002Finterfaces","4.api\u002F3.interfaces",{"id":82,"title":52,"body":83,"description":491,"extension":492,"links":493,"meta":494,"navigation":495,"path":53,"seo":496,"stem":54,"__hash__":497},"docs\u002F3.components\u002F2.plus-modal-app.md",{"type":84,"value":85,"toc":484},"minimark",[86,98,103,118,179,182,247,252,260,359,363,372,376,468,480],[87,88,89,93,94,97],"p",{},[90,91,92],"code",{},"PlusModalApp"," is the recommended root component for applications using ",[95,96,38],"a",{"href":39},". When a modal is open, it keeps rendering the background route with that route's layout. Otherwise, it renders the current route and layout.",[99,100,102],"h2",{"id":101},"usage","Usage",[87,104,105,106,109,110,113,114,117],{},"Replace the usual ",[90,107,108],{},"\u003CNuxtLayout>"," and ",[90,111,112],{},"\u003CNuxtPage>"," tree in ",[90,115,116],{},"app.vue",":",[119,120,125],"pre",{"className":121,"code":122,"filename":116,"language":123,"meta":124,"style":124},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n-  \u003CNuxtLayout>\n-    \u003CNuxtPage \u002F>\n-  \u003C\u002FNuxtLayout>\n+  \u003CPlusModalApp \u002F>\n\u003C\u002Ftemplate>\n","diff","",[90,126,127,136,147,155,163,173],{"__ignoreMap":124},[128,129,132],"span",{"class":130,"line":131},"line",1,[128,133,135],{"class":134},"sTEyZ","\u003Ctemplate>\n",[128,137,139,143],{"class":130,"line":138},2,[128,140,142],{"class":141},"sMK4o","-",[128,144,146],{"class":145},"swJcz","  \u003CNuxtLayout>\n",[128,148,150,152],{"class":130,"line":149},3,[128,151,142],{"class":141},[128,153,154],{"class":145},"    \u003CNuxtPage \u002F>\n",[128,156,158,160],{"class":130,"line":157},4,[128,159,142],{"class":141},[128,161,162],{"class":145},"  \u003C\u002FNuxtLayout>\n",[128,164,166,169],{"class":130,"line":165},5,[128,167,168],{"class":141},"+",[128,170,172],{"class":171},"sfazB","  \u003CPlusModalApp \u002F>\n",[128,174,176],{"class":130,"line":175},6,[128,177,178],{"class":134},"\u003C\u002Ftemplate>\n",[87,180,181],{},"By default, the component renders this modal-aware tree:",[119,183,187],{"className":184,"code":185,"language":186,"meta":124,"style":124},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CNuxtLayout :name=\"layout\">\n  \u003CNuxtPage :route=\"route\" \u002F>\n\u003C\u002FNuxtLayout>\n","html",[90,188,189,215,238],{"__ignoreMap":124},[128,190,191,194,197,201,204,207,210,212],{"class":130,"line":131},[128,192,193],{"class":141},"\u003C",[128,195,196],{"class":145},"NuxtLayout",[128,198,200],{"class":199},"spNyl"," :name",[128,202,203],{"class":141},"=",[128,205,206],{"class":141},"\"",[128,208,209],{"class":171},"layout",[128,211,206],{"class":141},[128,213,214],{"class":141},">\n",[128,216,217,220,223,226,228,230,233,235],{"class":130,"line":138},[128,218,219],{"class":141},"  \u003C",[128,221,222],{"class":145},"NuxtPage",[128,224,225],{"class":199}," :route",[128,227,203],{"class":141},[128,229,206],{"class":141},[128,231,232],{"class":171},"route",[128,234,206],{"class":141},[128,236,237],{"class":141}," \u002F>\n",[128,239,240,243,245],{"class":130,"line":149},[128,241,242],{"class":141},"\u003C\u002F",[128,244,196],{"class":145},[128,246,214],{"class":141},[248,249,251],"h3",{"id":250},"custom-rendering","Custom rendering",[87,253,254,255,109,257,259],{},"The default scoped slot exposes the resolved ",[90,256,232],{},[90,258,209],{}," when you need to customize the app tree:",[119,261,263],{"className":184,"code":262,"filename":116,"language":186,"meta":124,"style":124},"\u003Ctemplate>\n  \u003CPlusModalApp v-slot=\"{ route, layout }\">\n    \u003CNuxtLayout :name=\"layout\">\n      \u003CNuxtPage :route=\"route\" \u002F>\n    \u003C\u002FNuxtLayout>\n  \u003C\u002FPlusModalApp>\n\u003C\u002Ftemplate>\n",[90,264,265,274,294,313,332,341,350],{"__ignoreMap":124},[128,266,267,269,272],{"class":130,"line":131},[128,268,193],{"class":141},[128,270,271],{"class":145},"template",[128,273,214],{"class":141},[128,275,276,278,280,283,285,287,290,292],{"class":130,"line":138},[128,277,219],{"class":141},[128,279,92],{"class":145},[128,281,282],{"class":199}," v-slot",[128,284,203],{"class":141},[128,286,206],{"class":141},[128,288,289],{"class":171},"{ route, layout }",[128,291,206],{"class":141},[128,293,214],{"class":141},[128,295,296,299,301,303,305,307,309,311],{"class":130,"line":149},[128,297,298],{"class":141},"    \u003C",[128,300,196],{"class":145},[128,302,200],{"class":199},[128,304,203],{"class":141},[128,306,206],{"class":141},[128,308,209],{"class":171},[128,310,206],{"class":141},[128,312,214],{"class":141},[128,314,315,318,320,322,324,326,328,330],{"class":130,"line":157},[128,316,317],{"class":141},"      \u003C",[128,319,222],{"class":145},[128,321,225],{"class":199},[128,323,203],{"class":141},[128,325,206],{"class":141},[128,327,232],{"class":171},[128,329,206],{"class":141},[128,331,237],{"class":141},[128,333,334,337,339],{"class":130,"line":165},[128,335,336],{"class":141},"    \u003C\u002F",[128,338,196],{"class":145},[128,340,214],{"class":141},[128,342,343,346,348],{"class":130,"line":175},[128,344,345],{"class":141},"  \u003C\u002F",[128,347,92],{"class":145},[128,349,214],{"class":141},[128,351,353,355,357],{"class":130,"line":352},7,[128,354,242],{"class":141},[128,356,271],{"class":145},[128,358,214],{"class":141},[99,360,362],{"id":361},"props","Props",[87,364,365,366,368,369,371],{},"The component accepts the same props as ",[90,367,112],{},". Props and attributes are forwarded to the fallback ",[90,370,112],{},".",[99,373,375],{"id":374},"slots","Slots",[119,377,381],{"className":378,"code":379,"language":380,"meta":124,"style":124},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  default?: (props: {\n    route: NuxtPageProps['route']\n    layout: PageMeta['layout']\n  }) => any\n}\n","ts",[90,382,383,388,408,432,452,463],{"__ignoreMap":124},[128,384,385],{"class":130,"line":131},[128,386,387],{"class":141},"{\n",[128,389,390,394,397,400,403,405],{"class":130,"line":138},[128,391,393],{"class":392},"s7zQu","  default",[128,395,396],{"class":141},"?:",[128,398,399],{"class":141}," (",[128,401,361],{"class":402},"sHdIc",[128,404,117],{"class":141},[128,406,407],{"class":141}," {\n",[128,409,410,413,415,419,422,425,427,429],{"class":130,"line":149},[128,411,412],{"class":145},"    route",[128,414,117],{"class":141},[128,416,418],{"class":417},"sBMFI"," NuxtPageProps",[128,420,421],{"class":145},"[",[128,423,424],{"class":141},"'",[128,426,232],{"class":171},[128,428,424],{"class":141},[128,430,431],{"class":145},"]\n",[128,433,434,437,439,442,444,446,448,450],{"class":130,"line":157},[128,435,436],{"class":145},"    layout",[128,438,117],{"class":141},[128,440,441],{"class":417}," PageMeta",[128,443,421],{"class":145},[128,445,424],{"class":141},[128,447,209],{"class":171},[128,449,424],{"class":141},[128,451,431],{"class":145},[128,453,454,457,460],{"class":130,"line":165},[128,455,456],{"class":141},"  })",[128,458,459],{"class":199}," =>",[128,461,462],{"class":134}," any\n",[128,464,465],{"class":130,"line":175},[128,466,467],{"class":141},"}\n",[469,470,471,473,474,476,477,479],"note",{},[90,472,56],{}," remains available for backward compatibility. Its fallback renders only ",[90,475,112],{}," without ",[90,478,108],{},"; use it when your app manages the layout separately.",[481,482,483],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":124,"searchDepth":138,"depth":138,"links":485},[486,489,490],{"id":101,"depth":138,"text":102,"children":487},[488],{"id":250,"depth":149,"text":251},{"id":361,"depth":138,"text":362},{"id":374,"depth":138,"text":375},"Render the modal-aware route together with its Nuxt layout and page.","md",null,{},true,{"title":52,"description":491},"889wCcbZYTCQF2gCsot73rkHH1SmL0HpOp3FvNBRNG0",[499,501],{"title":48,"path":49,"stem":50,"description":500,"children":-1},"Component to use for rendering a parallel page.",{"title":56,"path":57,"stem":58,"description":502,"children":-1},"A backward-compatible, page-only component for rendering the background route of a modal.",1786800921650]