[{"data":1,"prerenderedAt":482},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-directory-structure":77,"-getting-started-directory-structure-surround":477},[4,27,41,63],{"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",{"id":78,"title":23,"body":79,"description":470,"extension":471,"links":472,"meta":473,"navigation":474,"path":24,"seo":475,"stem":25,"__hash__":476},"docs\u002F1.getting-started\u002F4.directory-structure.md",{"type":80,"value":81,"toc":463},"minimark",[82,87,96,127,246,251,254,344,352,358,363,376,459],[83,84,86],"h2",{"id":85},"named-parallel-routes","Named Parallel Routes",[88,89,90,91,95],"p",{},"You can place your parallel routes pages directory file with ",[92,93,94],"code",{},"{route}@{name}"," format.",[97,98,99,100,103,104,107,108,115,116,122,123,126],"warning",{},"Nuxt ",[92,101,102],{},">= 4.5"," parses ",[92,105,106],{},"{route}@{name}.vue"," files as ",[109,110,114],"a",{"href":111,"rel":112},"https:\u002F\u002Frouter.vuejs.org\u002Fguide\u002Fessentials\u002Fnamed-views.html",[113],"nofollow","vue-router named views",". To keep using them as parallel routes, enable the ",[109,117,119],{"href":118},"\u002Fgetting-started\u002Fconfiguration#namedviewsasparallelroutes",[92,120,121],{},"namedViewsAsParallelRoutes"," option in your config. Directory style routes like ",[92,124,125],{},"@foo\u002Findex.vue"," are not affected.",[128,129,130,149],"table",{},[131,132,133],"thead",{},[134,135,136,140,143,146],"tr",{},[137,138,139],"th",{},"File Path",[137,141,142],{},"Name",[137,144,145],{},"Generated route",[137,147,148],{},"Description",[150,151,152,173,190,208,227],"tbody",{},[134,153,154,160,165,170],{},[155,156,157],"td",{},[92,158,159],{},"index@foo.vue",[155,161,162],{},[92,163,164],{},"foo",[155,166,167],{},[92,168,169],{},"\u002F",[155,171,172],{},"name in index file",[134,174,175,179,183,187],{},[155,176,177],{},[92,178,125],{},[155,180,181],{},[92,182,164],{},[155,184,185],{},[92,186,169],{},[155,188,189],{},"name in root folder",[134,191,192,197,201,205],{},[155,193,194],{},[92,195,196],{},"@foo.vue",[155,198,199],{},[92,200,164],{},[155,202,203],{},[92,204,169],{},[155,206,207],{},"name in root folder without index",[134,209,210,215,219,224],{},[155,211,212],{},[92,213,214],{},"about\u002Fus@foo.vue",[155,216,217],{},[92,218,164],{},[155,220,221],{},[92,222,223],{},"\u002Fabout\u002Fus",[155,225,226],{},"name in file of folder",[134,228,229,234,238,243],{},[155,230,231],{},[92,232,233],{},"about\u002Fus@foo\u002Fcontact.vue",[155,235,236],{},[92,237,164],{},[155,239,240],{},[92,241,242],{},"\u002Fabout\u002Fus\u002Fcontact",[155,244,245],{},"name in sub folder",[247,248,250],"h3",{"id":249},"nested-named-parallel-routes","Nested Named Parallel Routes",[88,252,253],{},"Nuxt Pages Plus supports nested name file-based routing, which can be used in nested named parallel routes.",[128,255,256,268],{},[131,257,258],{},[134,259,260,262,264,266],{},[137,261,139],{},[137,263,142],{},[137,265,145],{},[137,267,148],{},[150,269,270,290,308,326],{},[134,271,272,277,282,287],{},[155,273,274],{},[92,275,276],{},"@foo\u002F@bar\u002Fabout.vue",[155,278,279],{},[92,280,281],{},"foo\u002Fbar",[155,283,284],{},[92,285,286],{},"\u002Fabout",[155,288,289],{},"nested name",[134,291,292,297,301,305],{},[155,293,294],{},[92,295,296],{},"about@foo\u002Fus@bar.vue",[155,298,299],{},[92,300,281],{},[155,302,303],{},[92,304,223],{},[155,306,307],{},"nested name in file and folder",[134,309,310,315,319,323],{},[155,311,312],{},[92,313,314],{},"@foo@bar\u002Fabout.vue",[155,316,317],{},[92,318,281],{},[155,320,321],{},[92,322,286],{},[155,324,325],{},"multiple nested name in folder",[134,327,328,333,337,341],{},[155,329,330],{},[92,331,332],{},"about\u002Fus@foo@bar.vue",[155,334,335],{},[92,336,281],{},[155,338,339],{},[92,340,223],{},[155,342,343],{},"multiple nested name in file",[247,345,347,348,351],{"id":346},"escape-separator","Escape ",[92,349,350],{},"@"," separator",[88,353,354,355,357],{},"Supporting named parallel views could lead to conflicts with certain routes, e.g. including the ",[92,356,350],{}," symbol in the route. Nuxt Pages Plus provided some options to address this problem.",[359,360,362],"h4",{"id":361},"customize-separator-symbol","Customize separator symbol",[88,364,365,366,369,370,375],{},"This allows you to use ",[92,367,368],{},"index+foo.vue"," as Parallel Routes. (",[109,371,374],{"href":372,"rel":373},"https:\u002F\u002Fgithub.com\u002Fserkodev\u002Fnuxt-pages-plus\u002Ftree\u002Fmain\u002Fexamples\u002Fparallel-separator\u002Fnuxt.config.ts",[113],"Example",")",[377,378,384],"pre",{"className":379,"code":380,"filename":381,"language":382,"meta":383,"style":383},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  pagesPlus: {\n    separator: '+',\n  },\n})\n","nuxt.config.ts","ts","",[92,385,386,410,423,444,450],{"__ignoreMap":383},[387,388,391,395,398,402,406],"span",{"class":389,"line":390},"line",1,[387,392,394],{"class":393},"s7zQu","export",[387,396,397],{"class":393}," default",[387,399,401],{"class":400},"s2Zo4"," defineNuxtConfig",[387,403,405],{"class":404},"sTEyZ","(",[387,407,409],{"class":408},"sMK4o","{\n",[387,411,413,417,420],{"class":389,"line":412},2,[387,414,416],{"class":415},"swJcz","  pagesPlus",[387,418,419],{"class":408},":",[387,421,422],{"class":408}," {\n",[387,424,426,429,431,434,438,441],{"class":389,"line":425},3,[387,427,428],{"class":415},"    separator",[387,430,419],{"class":408},[387,432,433],{"class":408}," '",[387,435,437],{"class":436},"sfazB","+",[387,439,440],{"class":408},"'",[387,442,443],{"class":408},",\n",[387,445,447],{"class":389,"line":446},4,[387,448,449],{"class":408},"  },\n",[387,451,453,456],{"class":389,"line":452},5,[387,454,455],{"class":408},"}",[387,457,458],{"class":404},")\n",[460,461,462],"style",{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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);}",{"title":383,"searchDepth":412,"depth":412,"links":464},[465],{"id":85,"depth":412,"text":86,"children":466},[467,468],{"id":249,"depth":425,"text":250},{"id":346,"depth":425,"text":469},"Escape @ separator","All named parallel routes page files should be placed in the ~\u002Fpages\u002F directory. Nuxt Pages Plus will process these files and generate parallel routes after Nuxt has generated the routes.","md",null,{},true,{"title":23,"description":470},"2Q2WjrB_XdiAdIdgT_NsuSRTWlel6sz3jwMRyiomYlw",[478,480],{"title":19,"path":20,"stem":21,"description":479,"children":-1},"Nuxt Pages Plus provides a bunch of options to configure your parallel routes as you like in nuxt.config.",{"title":34,"path":35,"stem":36,"description":481,"children":-1},"Parallel Routes allows you to render multiple Nuxt pages within a single route, either synchronously or manually.",1786798083464]