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