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