[{"data":1,"prerenderedAt":1445},["ShallowReactive",2],{"navigation_docs":3,"-routing-parallel-routes":89,"-routing-parallel-routes-surround":1440},[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":34,"body":91,"description":1434,"extension":1435,"links":1436,"meta":1437,"navigation":686,"path":35,"seo":1438,"stem":36,"__hash__":1439},"docs\u002F2.routing\u002F1.parallel-routes.md",{"type":92,"value":93,"toc":1422},"minimark",[94,111,203,211,216,224,234,428,433,440,451,463,543,550,554,560,626,636,775,783,885,889,897,905,909,933,939,942,945,1050,1053,1059,1114,1119,1144,1147,1152,1155,1168,1263,1267,1270,1349,1398,1401,1418],[95,96,97,98,102,103,106,107,110],"p",{},"For example, within a single layout, in addition to the standard ",[99,100,101],"code",{},"\u003Cslot>"," that renders the content based on the global router, you can render two parallel routes named ",[99,104,105],{},"left"," and ",[99,108,109],{},"right"," synchronously.",[112,113,119],"pre",{"className":114,"code":115,"filename":116,"language":117,"meta":118,"style":118},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv>\n    \u003CPlusParallelPage name=\"left\" \u002F>\n    \u003Cslot \u002F>\n    \u003CPlusParallelPage name=\"right\" \u002F>\n\u003C\u002Fdiv>\n","layouts\u002Fdefault.vue","html","",[99,120,121,137,164,174,193],{"__ignoreMap":118},[122,123,126,130,134],"span",{"class":124,"line":125},"line",1,[122,127,129],{"class":128},"sMK4o","\u003C",[122,131,133],{"class":132},"swJcz","div",[122,135,136],{"class":128},">\n",[122,138,140,143,146,150,153,156,159,161],{"class":124,"line":139},2,[122,141,142],{"class":128},"    \u003C",[122,144,145],{"class":132},"PlusParallelPage",[122,147,149],{"class":148},"spNyl"," name",[122,151,152],{"class":128},"=",[122,154,155],{"class":128},"\"",[122,157,105],{"class":158},"sfazB",[122,160,155],{"class":128},[122,162,163],{"class":128}," \u002F>\n",[122,165,167,169,172],{"class":124,"line":166},3,[122,168,142],{"class":128},[122,170,171],{"class":132},"slot",[122,173,163],{"class":128},[122,175,177,179,181,183,185,187,189,191],{"class":124,"line":176},4,[122,178,142],{"class":128},[122,180,145],{"class":132},[122,182,149],{"class":148},[122,184,152],{"class":128},[122,186,155],{"class":128},[122,188,109],{"class":158},[122,190,155],{"class":128},[122,192,163],{"class":128},[122,194,196,199,201],{"class":124,"line":195},5,[122,197,198],{"class":128},"\u003C\u002F",[122,200,133],{"class":132},[122,202,136],{"class":128},[95,204,205],{},[206,207],"img",{"alt":34,"className":208,"src":210},[209],"prose-image","\u002Fimages\u002Fparallel-routes.png",[212,213,215],"h2",{"id":214},"usage","Usage",[217,218,219,220,223],"note",{},"Before we start, make sure you have installed ",[99,221,222],{},"nuxt-pages-plus"," module in your Nuxt project.",[95,225,226,227,106,230,233],{},"For instance, here's how your original Nuxt project setup with one route: ",[99,228,229],{},"\u002F",[99,231,232],{},"\u002Fabout"," and a default layout looks like:",[235,236,237,328,383],"code-group",{},[112,238,241],{"className":114,"code":239,"filename":240,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>Index\u003C\u002Fh1>\n    \u003CNuxtLink to=\"\u002Fabout\">Go About\u003C\u002FNuxtLink>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Findex.vue",[99,242,243,252,261,281,310,319],{"__ignoreMap":118},[122,244,245,247,250],{"class":124,"line":125},[122,246,129],{"class":128},[122,248,249],{"class":132},"template",[122,251,136],{"class":128},[122,253,254,257,259],{"class":124,"line":139},[122,255,256],{"class":128},"  \u003C",[122,258,133],{"class":132},[122,260,136],{"class":128},[122,262,263,265,268,271,275,277,279],{"class":124,"line":166},[122,264,142],{"class":128},[122,266,267],{"class":132},"h1",[122,269,270],{"class":128},">",[122,272,274],{"class":273},"sTEyZ","Index",[122,276,198],{"class":128},[122,278,267],{"class":132},[122,280,136],{"class":128},[122,282,283,285,288,291,293,295,297,299,301,304,306,308],{"class":124,"line":176},[122,284,142],{"class":128},[122,286,287],{"class":132},"NuxtLink",[122,289,290],{"class":148}," to",[122,292,152],{"class":128},[122,294,155],{"class":128},[122,296,232],{"class":158},[122,298,155],{"class":128},[122,300,270],{"class":128},[122,302,303],{"class":273},"Go About",[122,305,198],{"class":128},[122,307,287],{"class":132},[122,309,136],{"class":128},[122,311,312,315,317],{"class":124,"line":195},[122,313,314],{"class":128},"  \u003C\u002F",[122,316,133],{"class":132},[122,318,136],{"class":128},[122,320,322,324,326],{"class":124,"line":321},6,[122,323,198],{"class":128},[122,325,249],{"class":132},[122,327,136],{"class":128},[112,329,332],{"className":114,"code":330,"filename":331,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch1>About\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Fabout.vue",[99,333,334,342,350,367,375],{"__ignoreMap":118},[122,335,336,338,340],{"class":124,"line":125},[122,337,129],{"class":128},[122,339,249],{"class":132},[122,341,136],{"class":128},[122,343,344,346,348],{"class":124,"line":139},[122,345,256],{"class":128},[122,347,133],{"class":132},[122,349,136],{"class":128},[122,351,352,354,356,358,361,363,365],{"class":124,"line":166},[122,353,142],{"class":128},[122,355,267],{"class":132},[122,357,270],{"class":128},[122,359,360],{"class":273},"About",[122,362,198],{"class":128},[122,364,267],{"class":132},[122,366,136],{"class":128},[122,368,369,371,373],{"class":124,"line":176},[122,370,314],{"class":128},[122,372,133],{"class":132},[122,374,136],{"class":128},[122,376,377,379,381],{"class":124,"line":195},[122,378,198],{"class":128},[122,380,249],{"class":132},[122,382,136],{"class":128},[112,384,386],{"className":114,"code":385,"filename":116,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[99,387,388,396,404,412,420],{"__ignoreMap":118},[122,389,390,392,394],{"class":124,"line":125},[122,391,129],{"class":128},[122,393,249],{"class":132},[122,395,136],{"class":128},[122,397,398,400,402],{"class":124,"line":139},[122,399,256],{"class":128},[122,401,133],{"class":132},[122,403,136],{"class":128},[122,405,406,408,410],{"class":124,"line":166},[122,407,142],{"class":128},[122,409,171],{"class":132},[122,411,163],{"class":128},[122,413,414,416,418],{"class":124,"line":176},[122,415,314],{"class":128},[122,417,133],{"class":132},[122,419,136],{"class":128},[122,421,422,424,426],{"class":124,"line":195},[122,423,198],{"class":128},[122,425,249],{"class":132},[122,427,136],{"class":128},[429,430,432],"h3",{"id":431},"adding-parallel-routes","Adding Parallel Routes",[95,434,435,436,439],{},"In this tutorial, we will create a simple parallel route named ",[99,437,438],{},"my-parallel"," that displays a parallel route view on the layout.",[95,441,442,443,446,447,450],{},"First, create a new folder named ",[99,444,445],{},"@my-parallel"," in the ",[99,448,449],{},"~\u002Fpages"," directory.",[95,452,453,454,106,457,460,461,450],{},"Then, create two new files named ",[99,455,456],{},"index.vue",[99,458,459],{},"about.vue"," inside the ",[99,462,445],{},[235,464,465,504],{},[112,466,469],{"className":114,"code":467,"filename":468,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>Index @my-parallel\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002F@my-parallel\u002Findex.vue",[99,470,471,479,496],{"__ignoreMap":118},[122,472,473,475,477],{"class":124,"line":125},[122,474,129],{"class":128},[122,476,249],{"class":132},[122,478,136],{"class":128},[122,480,481,483,485,487,490,492,494],{"class":124,"line":139},[122,482,256],{"class":128},[122,484,133],{"class":132},[122,486,270],{"class":128},[122,488,489],{"class":273},"Index @my-parallel",[122,491,198],{"class":128},[122,493,133],{"class":132},[122,495,136],{"class":128},[122,497,498,500,502],{"class":124,"line":166},[122,499,198],{"class":128},[122,501,249],{"class":132},[122,503,136],{"class":128},[112,505,508],{"className":114,"code":506,"filename":507,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>About @my-parallel\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002F@my-parallel\u002Fabout.vue",[99,509,510,518,535],{"__ignoreMap":118},[122,511,512,514,516],{"class":124,"line":125},[122,513,129],{"class":128},[122,515,249],{"class":132},[122,517,136],{"class":128},[122,519,520,522,524,526,529,531,533],{"class":124,"line":139},[122,521,256],{"class":128},[122,523,133],{"class":132},[122,525,270],{"class":128},[122,527,528],{"class":273},"About @my-parallel",[122,530,198],{"class":128},[122,532,133],{"class":132},[122,534,136],{"class":128},[122,536,537,539,541],{"class":124,"line":166},[122,538,198],{"class":128},[122,540,249],{"class":132},[122,542,136],{"class":128},[217,544,545,546,549],{},"For more information about file naming for file-based routing in Nuxt Pages Plus, please refer to the ",[547,548,23],"a",{"href":24},".",[429,551,553],{"id":552},"displaying-parallel-routes","Displaying Parallel Routes",[95,555,556,559],{},[99,557,558],{},"\u003CPlusParallelPage>"," is used for rendering the parallel routes. We recommend placing it in the layout file but actually you can place it in any page based on your needs.",[112,561,564],{"className":114,"code":562,"filename":116,"highlights":563,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CPlusParallelPage name=\"my-parallel\" \u002F>\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[166],[99,565,566,574,582,602,610,618],{"__ignoreMap":118},[122,567,568,570,572],{"class":124,"line":125},[122,569,129],{"class":128},[122,571,249],{"class":132},[122,573,136],{"class":128},[122,575,576,578,580],{"class":124,"line":139},[122,577,256],{"class":128},[122,579,133],{"class":132},[122,581,136],{"class":128},[122,583,586,588,590,592,594,596,598,600],{"class":584,"line":166},[124,585],"highlight",[122,587,142],{"class":128},[122,589,145],{"class":132},[122,591,149],{"class":148},[122,593,152],{"class":128},[122,595,155],{"class":128},[122,597,438],{"class":158},[122,599,155],{"class":128},[122,601,163],{"class":128},[122,603,604,606,608],{"class":124,"line":176},[122,605,142],{"class":128},[122,607,171],{"class":132},[122,609,163],{"class":128},[122,611,612,614,616],{"class":124,"line":195},[122,613,314],{"class":128},[122,615,133],{"class":132},[122,617,136],{"class":128},[122,619,620,622,624],{"class":124,"line":321},[122,621,198],{"class":128},[122,623,249],{"class":132},[122,625,136],{"class":128},[95,627,628,629,631,632,635],{},"Now, when you navigate to the ",[99,630,229],{}," route, you will see the ",[99,633,634],{},"@my-parallel\u002Findex.vue"," view is rendered.",[112,637,641],{"className":114,"code":638,"filename":639,"highlights":640,"language":117,"meta":118,"style":118},"\u003Chtml>\n  \u003Cdiv>\n    \u003C!-- pages\u002F@my-parallel\u002Findex.vue -->\n    \u003Cdiv>Index @my-parallel\u003C\u002Fdiv>\n\n    \u003C!-- pages\u002Findex.vue -->\n    \u003Cdiv>\n      \u003Ch1>Index\u003C\u002Fh1>\n      \u003CNuxtLink to=\"\u002Fabout\">Go About\u003C\u002FNuxtLink>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fhtml>\n","http:\u002F\u002Flocalhost\u002F",[176],[99,642,643,651,659,665,682,688,693,702,720,747,757,766],{"__ignoreMap":118},[122,644,645,647,649],{"class":124,"line":125},[122,646,129],{"class":128},[122,648,117],{"class":132},[122,650,136],{"class":128},[122,652,653,655,657],{"class":124,"line":139},[122,654,256],{"class":128},[122,656,133],{"class":132},[122,658,136],{"class":128},[122,660,661],{"class":124,"line":166},[122,662,664],{"class":663},"sHwdD","    \u003C!-- pages\u002F@my-parallel\u002Findex.vue -->\n",[122,666,668,670,672,674,676,678,680],{"class":667,"line":176},[124,585],[122,669,142],{"class":128},[122,671,133],{"class":132},[122,673,270],{"class":128},[122,675,489],{"class":273},[122,677,198],{"class":128},[122,679,133],{"class":132},[122,681,136],{"class":128},[122,683,684],{"class":124,"line":195},[122,685,687],{"emptyLinePlaceholder":686},true,"\n",[122,689,690],{"class":124,"line":321},[122,691,692],{"class":663},"    \u003C!-- pages\u002Findex.vue -->\n",[122,694,696,698,700],{"class":124,"line":695},7,[122,697,142],{"class":128},[122,699,133],{"class":132},[122,701,136],{"class":128},[122,703,705,708,710,712,714,716,718],{"class":124,"line":704},8,[122,706,707],{"class":128},"      \u003C",[122,709,267],{"class":132},[122,711,270],{"class":128},[122,713,274],{"class":273},[122,715,198],{"class":128},[122,717,267],{"class":132},[122,719,136],{"class":128},[122,721,723,725,727,729,731,733,735,737,739,741,743,745],{"class":124,"line":722},9,[122,724,707],{"class":128},[122,726,287],{"class":132},[122,728,290],{"class":148},[122,730,152],{"class":128},[122,732,155],{"class":128},[122,734,232],{"class":158},[122,736,155],{"class":128},[122,738,270],{"class":128},[122,740,303],{"class":273},[122,742,198],{"class":128},[122,744,287],{"class":132},[122,746,136],{"class":128},[122,748,750,753,755],{"class":124,"line":749},10,[122,751,752],{"class":128},"    \u003C\u002F",[122,754,133],{"class":132},[122,756,136],{"class":128},[122,758,760,762,764],{"class":124,"line":759},11,[122,761,314],{"class":128},[122,763,133],{"class":132},[122,765,136],{"class":128},[122,767,769,771,773],{"class":124,"line":768},12,[122,770,198],{"class":128},[122,772,117],{"class":132},[122,774,136],{"class":128},[95,776,777,778,631,780,635],{},"If you navigate to the ",[99,779,232],{},[99,781,782],{},"@my-parallel\u002Fabout.vue",[112,784,788],{"className":114,"code":785,"filename":786,"highlights":787,"language":117,"meta":118,"style":118},"\u003Chtml>\n  \u003Cdiv>\n    \u003C!-- pages\u002F@my-parallel\u002Fabout.vue -->\n    \u003Cdiv>About @my-parallel\u003C\u002Fdiv>\n\n    \u003C!-- pages\u002Fabout.vue -->\n    \u003Cdiv>\n      \u003Ch1>About\u003C\u002Fh1>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Fhtml>\n","http:\u002F\u002Flocalhost\u002Fabout",[176],[99,789,790,798,806,811,828,832,837,845,861,869,877],{"__ignoreMap":118},[122,791,792,794,796],{"class":124,"line":125},[122,793,129],{"class":128},[122,795,117],{"class":132},[122,797,136],{"class":128},[122,799,800,802,804],{"class":124,"line":139},[122,801,256],{"class":128},[122,803,133],{"class":132},[122,805,136],{"class":128},[122,807,808],{"class":124,"line":166},[122,809,810],{"class":663},"    \u003C!-- pages\u002F@my-parallel\u002Fabout.vue -->\n",[122,812,814,816,818,820,822,824,826],{"class":813,"line":176},[124,585],[122,815,142],{"class":128},[122,817,133],{"class":132},[122,819,270],{"class":128},[122,821,528],{"class":273},[122,823,198],{"class":128},[122,825,133],{"class":132},[122,827,136],{"class":128},[122,829,830],{"class":124,"line":195},[122,831,687],{"emptyLinePlaceholder":686},[122,833,834],{"class":124,"line":321},[122,835,836],{"class":663},"    \u003C!-- pages\u002Fabout.vue -->\n",[122,838,839,841,843],{"class":124,"line":695},[122,840,142],{"class":128},[122,842,133],{"class":132},[122,844,136],{"class":128},[122,846,847,849,851,853,855,857,859],{"class":124,"line":704},[122,848,707],{"class":128},[122,850,267],{"class":132},[122,852,270],{"class":128},[122,854,360],{"class":273},[122,856,198],{"class":128},[122,858,267],{"class":132},[122,860,136],{"class":128},[122,862,863,865,867],{"class":124,"line":722},[122,864,752],{"class":128},[122,866,133],{"class":132},[122,868,136],{"class":128},[122,870,871,873,875],{"class":124,"line":749},[122,872,314],{"class":128},[122,874,133],{"class":132},[122,876,136],{"class":128},[122,878,879,881,883],{"class":124,"line":759},[122,880,198],{"class":128},[122,882,117],{"class":132},[122,884,136],{"class":128},[212,886,888],{"id":887},"how-it-works","How it works?",[95,890,891,892,896],{},"Nuxt Pages Plus enhances the routing system in Nuxt by identifying paths designated as parallel routes, which are grouped into independent routers that can automatically sync with the global router. This setup includes a robust and controllable ",[547,893,895],{"href":894},"#fallback-mechanism","Fallback Mechanism"," to handle missing routes gracefully.",[95,898,899,900,904],{},"Users can dynamically integrate these routers into different layers or pages of their application using the ",[547,901,902],{"href":49},[99,903,48],{}," component, allowing for flexible and modular application architecture. This process streamlines the management of complex routing scenarios, enhancing both development efficiency and application scalability.",[212,906,908],{"id":907},"navigation-behavior","Navigation Behavior",[95,910,911,912,915,916,922,923,926,927,932],{},"Parallel Routes will auto sync their routes with the global route by default. It is also compatible with all of Nuxt's Pages naming pattern including ",[99,913,914],{},"[id]"," (",[547,917,921],{"href":918,"rel":919},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fpages#dynamic-routes",[920],"nofollow","dynamic routes","), ",[99,924,925],{},"[...slug]","(",[547,928,931],{"href":929,"rel":930},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fpages#catch-all-route",[920],"catch-all route","), etc.",[95,934,935],{},[206,936],{"alt":34,"className":937,"src":938},[209],"\u002Fimages\u002Fparallel-routes-slug.png",[429,940,895],{"id":941},"fallback-mechanism",[95,943,944],{},"In scenarios where Parallel Routes synchronize with the global route but fail to find a matching route, Nuxt Pages Plus employs a series of fallback mechanisms to handle these cases gracefully.",[112,946,949],{"className":114,"code":947,"filename":116,"highlights":948,"language":117,"meta":118,"style":118},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CPlusParallelPage name=\"left\">\n      \u003Ctemplate #not-found>\n        \u003Cdiv>Not Found\u003C\u002Fdiv>\n      \u003C\u002Ftemplate>\n    \u003CPlusParallelPage \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[176,195,321],[99,950,951,959,967,985,997,1016,1026,1034,1042],{"__ignoreMap":118},[122,952,953,955,957],{"class":124,"line":125},[122,954,129],{"class":128},[122,956,249],{"class":132},[122,958,136],{"class":128},[122,960,961,963,965],{"class":124,"line":139},[122,962,256],{"class":128},[122,964,133],{"class":132},[122,966,136],{"class":128},[122,968,969,971,973,975,977,979,981,983],{"class":124,"line":166},[122,970,142],{"class":128},[122,972,145],{"class":132},[122,974,149],{"class":148},[122,976,152],{"class":128},[122,978,155],{"class":128},[122,980,105],{"class":158},[122,982,155],{"class":128},[122,984,136],{"class":128},[122,986,988,990,992,995],{"class":987,"line":176},[124,585],[122,989,707],{"class":128},[122,991,249],{"class":132},[122,993,994],{"class":148}," #not-found",[122,996,136],{"class":128},[122,998,1000,1003,1005,1007,1010,1012,1014],{"class":999,"line":195},[124,585],[122,1001,1002],{"class":128},"        \u003C",[122,1004,133],{"class":132},[122,1006,270],{"class":128},[122,1008,1009],{"class":273},"Not Found",[122,1011,198],{"class":128},[122,1013,133],{"class":132},[122,1015,136],{"class":128},[122,1017,1019,1022,1024],{"class":1018,"line":321},[124,585],[122,1020,1021],{"class":128},"      \u003C\u002F",[122,1023,249],{"class":132},[122,1025,136],{"class":128},[122,1027,1028,1030,1032],{"class":124,"line":695},[122,1029,142],{"class":128},[122,1031,145],{"class":132},[122,1033,163],{"class":128},[122,1035,1036,1038,1040],{"class":124,"line":704},[122,1037,314],{"class":128},[122,1039,133],{"class":132},[122,1041,136],{"class":128},[122,1043,1044,1046,1048],{"class":124,"line":722},[122,1045,198],{"class":128},[122,1047,249],{"class":132},[122,1049,136],{"class":128},[95,1051,1052],{},"Here’s the fallback sequence of operations that occurs during navigation:",[95,1054,1055],{},[1056,1057,1058],"strong",{},"On initial page load:",[1060,1061,1062,1068,1078,1089,1102,1111],"ol",{},[1063,1064,1065,1066,549],"li",{},"Navigate if the current URL matches any routes in ",[99,1067,449],{},[1063,1069,1070,1071,1077],{},"Otherwise, try redirecting to ",[547,1072,1074],{"href":1073},"\u002Fgetting-started\u002Fconfiguration#fallback",[99,1075,1076],{},"fallback.redirect"," if it has been set in config.",[1063,1079,1080,1081,1084,1085,549],{},"Otherwise, try rendering the ",[99,1082,1083],{},"#not-found"," slot if it has been set in ",[547,1086,1087],{"href":49},[99,1088,145],{},[1063,1090,1070,1091,1094,1095,1101],{},[99,1092,1093],{},"\u002F~index"," (or ",[547,1096,1098],{"href":1097},"\u002Fgetting-started\u002Fconfiguration#index",[99,1099,1100],{},"index"," set in config) if it can be resolved.",[1063,1103,1080,1104,1084,1107,549],{},[99,1105,1106],{},"#index",[547,1108,1109],{"href":49},[99,1110,145],{},[1063,1112,1113],{},"If none of the above conditions are met, leave the view empty.",[95,1115,1116],{},[1056,1117,1118],{},"On route navigate:",[1060,1120,1121,1126,1133,1141],{},[1063,1122,1123,1124,549],{},"Navigate if the target URL matches any routes in ",[99,1125,449],{},[1063,1127,1070,1128,1132],{},[547,1129,1130],{"href":1073},[99,1131,1076],{}," if it has been set in the config.",[1063,1134,1080,1135,1084,1137,549],{},[99,1136,1083],{},[547,1138,1139],{"href":49},[99,1140,145],{},[1063,1142,1143],{},"If none of the above conditions are met, keep the last successful view.",[217,1145,1146],{},"Please note that all fallback redirects occur exclusively within the Parallel Router and do not affect the global router or change the browser's URL.",[1148,1149,1151],"h4",{"id":1150},"disabling-the-fallback-mechanism","Disabling the Fallback Mechanism",[95,1153,1154],{},"You have the option to disable the fallback mechanism for specific parallel routes. This can be useful if you want the parallel route view to become empty when no matching routes are found, rather than attempting any fallback redirects.",[95,1156,1157,1158,1164,1165,1167],{},"In addition to disabling parallel route, you might also consider enabling ",[547,1159,1161],{"href":1160},"\u002Fcomponents\u002Fplus-parallel-page#hide-view-on-fallback",[99,1162,1163],{},"hide-fallback"," to hide your fallback view in individual ",[99,1166,558],{}," components.",[112,1169,1175],{"className":1170,"code":1171,"filename":1172,"highlights":1173,"language":1174,"meta":118,"style":118},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  pagesPlus: {\n    parallelPages: {\n      left: { \u002F\u002F your parallel routes name\n        fallback: false\n      }\n    }\n  }\n})\n","nuxt.config.ts",[195],"ts",[99,1176,1177,1195,1206,1215,1228,1240,1245,1250,1255],{"__ignoreMap":118},[122,1178,1179,1183,1186,1190,1192],{"class":124,"line":125},[122,1180,1182],{"class":1181},"s7zQu","export",[122,1184,1185],{"class":1181}," default",[122,1187,1189],{"class":1188},"s2Zo4"," defineNuxtConfig",[122,1191,926],{"class":273},[122,1193,1194],{"class":128},"{\n",[122,1196,1197,1200,1203],{"class":124,"line":139},[122,1198,1199],{"class":132},"  pagesPlus",[122,1201,1202],{"class":128},":",[122,1204,1205],{"class":128}," {\n",[122,1207,1208,1211,1213],{"class":124,"line":166},[122,1209,1210],{"class":132},"    parallelPages",[122,1212,1202],{"class":128},[122,1214,1205],{"class":128},[122,1216,1217,1220,1222,1225],{"class":124,"line":176},[122,1218,1219],{"class":132},"      left",[122,1221,1202],{"class":128},[122,1223,1224],{"class":128}," {",[122,1226,1227],{"class":663}," \u002F\u002F your parallel routes name\n",[122,1229,1231,1234,1236],{"class":1230,"line":195},[124,585],[122,1232,1233],{"class":132},"        fallback",[122,1235,1202],{"class":128},[122,1237,1239],{"class":1238},"sfNiH"," false\n",[122,1241,1242],{"class":124,"line":321},[122,1243,1244],{"class":128},"      }\n",[122,1246,1247],{"class":124,"line":695},[122,1248,1249],{"class":128},"    }\n",[122,1251,1252],{"class":124,"line":704},[122,1253,1254],{"class":128},"  }\n",[122,1256,1257,1260],{"class":124,"line":722},[122,1258,1259],{"class":128},"}",[122,1261,1262],{"class":273},")\n",[429,1264,1266],{"id":1265},"sync-modes","Sync Modes",[95,1268,1269],{},"To customize the synchronization behavior of Parallel Routes with the global route in your Nuxt application, you can modify the synchronization mode for specific parallel routes.",[112,1271,1274],{"className":1170,"code":1272,"filename":1172,"highlights":1273,"language":1174,"meta":118,"style":118},"export default defineNuxtConfig({\n  pagesPlus: {\n    parallelPages: {\n      left: { \u002F\u002F your parallel routes name\n        mode: 'manual'\n      }\n    }\n  }\n})\n",[195],[99,1275,1276,1288,1296,1304,1314,1331,1335,1339,1343],{"__ignoreMap":118},[122,1277,1278,1280,1282,1284,1286],{"class":124,"line":125},[122,1279,1182],{"class":1181},[122,1281,1185],{"class":1181},[122,1283,1189],{"class":1188},[122,1285,926],{"class":273},[122,1287,1194],{"class":128},[122,1289,1290,1292,1294],{"class":124,"line":139},[122,1291,1199],{"class":132},[122,1293,1202],{"class":128},[122,1295,1205],{"class":128},[122,1297,1298,1300,1302],{"class":124,"line":166},[122,1299,1210],{"class":132},[122,1301,1202],{"class":128},[122,1303,1205],{"class":128},[122,1305,1306,1308,1310,1312],{"class":124,"line":176},[122,1307,1219],{"class":132},[122,1309,1202],{"class":128},[122,1311,1224],{"class":128},[122,1313,1227],{"class":663},[122,1315,1317,1320,1322,1325,1328],{"class":1316,"line":195},[124,585],[122,1318,1319],{"class":132},"        mode",[122,1321,1202],{"class":128},[122,1323,1324],{"class":128}," '",[122,1326,1327],{"class":158},"manual",[122,1329,1330],{"class":128},"'\n",[122,1332,1333],{"class":124,"line":321},[122,1334,1244],{"class":128},[122,1336,1337],{"class":124,"line":695},[122,1338,1249],{"class":128},[122,1340,1341],{"class":124,"line":704},[122,1342,1254],{"class":128},[122,1344,1345,1347],{"class":124,"line":722},[122,1346,1259],{"class":128},[122,1348,1262],{"class":273},[1350,1351,1352,1365],"table",{},[1353,1354,1355],"thead",{},[1356,1357,1358,1362],"tr",{},[1359,1360,1361],"th",{},"Mode",[1359,1363,1364],{},"Description",[1366,1367,1368,1379,1389],"tbody",{},[1356,1369,1370,1376],{},[1371,1372,1373],"td",{},[99,1374,1375],{},"sync",[1371,1377,1378],{},"(Default) Auto sync with global route.",[1356,1380,1381,1386],{},[1371,1382,1383],{},[99,1384,1385],{},"sync-once",[1371,1387,1388],{},"Only sync once on initial page load.",[1356,1390,1391,1395],{},[1371,1392,1393],{},[99,1394,1327],{},[1371,1396,1397],{},"Disable auto sync with global route.",[212,1399,78],{"id":1400},"examples",[1402,1403,1404,1411],"ul",{},[1063,1405,1406],{},[547,1407,1410],{"href":1408,"rel":1409},"https:\u002F\u002Fgithub.com\u002Fserkodev\u002Fnuxt-pages-plus\u002Ftree\u002Fmain\u002Fexamples\u002Fparallel-news",[920],"Example - News App with Sidebar",[1063,1412,1413],{},[547,1414,1417],{"href":1415,"rel":1416},"https:\u002F\u002Fgithub.com\u002Fserkodev\u002Fnuxt-pages-plus\u002Ftree\u002Fmain\u002Fexamples",[920],"More examples source code",[1419,1420,1421],"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);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":118,"searchDepth":139,"depth":139,"links":1423},[1424,1428,1429,1433],{"id":214,"depth":139,"text":215,"children":1425},[1426,1427],{"id":431,"depth":166,"text":432},{"id":552,"depth":166,"text":553},{"id":887,"depth":139,"text":888},{"id":907,"depth":139,"text":908,"children":1430},[1431,1432],{"id":941,"depth":166,"text":895},{"id":1265,"depth":166,"text":1266},{"id":1400,"depth":139,"text":78},"Parallel Routes allows you to render multiple Nuxt pages within a single route, either synchronously or manually.","md",null,{},{"title":34,"description":1434},"n3YfG5w8DznKlUHGqsZ7sukNWT114NnzBvg4nM1Hpn8",[1441,1443],{"title":23,"path":24,"stem":25,"description":1442,"children":-1},"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.",{"title":38,"path":39,"stem":40,"description":1444,"children":-1},"Modal Routes can navigate modal routes with real-time URL changes for seamless browsing.",1786721247990]