[{"data":1,"prerenderedAt":1864},["ShallowReactive",2],{"navigation_docs":3,"-routing-modal-routes":89,"-routing-modal-routes-surround":1859},[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":38,"body":91,"description":1853,"extension":1854,"links":1855,"meta":1856,"navigation":842,"path":39,"seo":1857,"stem":40,"__hash__":1858},"docs\u002F2.routing\u002F2.modal-routes.md",{"type":92,"value":93,"toc":1840},"minimark",[94,110,118,121,127,133,138,146,157,351,363,368,384,396,429,446,514,518,529,647,665,669,679,721,754,757,761,774,789,1012,1016,1056,1060,1063,1066,1174,1184,1334,1339,1343,1353,1526,1529,1619,1634,1811,1817,1820,1836],[95,96,97,98,102,103,106,107,109],"p",{},"For example, imagine your website has a page called ",[99,100,101],"code",{},"\u002Fshop"," that lists various product links. When a user clicks on a product link, such as ",[99,104,105],{},"\u002Fitem\u002F5",", the details of the product are displayed in a modal, while the URL is simultaneously updated to ",[99,108,105],{},".",[95,111,112],{},[113,114],"img",{"alt":38,"className":115,"src":117},[116],"prose-image","\u002Fimages\u002Fmodal-routes.png",[95,119,120],{},"This approach offers several advantages. Not only does it help users intuitively understand their current location on the site, but it also allows them to copy and share the URL with others easily.",[95,122,123],{},[113,124],{"alt":38,"className":125,"src":126},[116],"\u002Fimages\u002Fnormal-routes.png",[95,128,129,130,132],{},"When a user navigates directly to ",[99,131,105],{},", the page is displayed normally instead of as a modal. This setup ensures that the user experience is seamless, whether accessing the item details through a link on the shop page or by entering the URL directly into the browser.",[134,135,137],"h2",{"id":136},"usage","Usage",[139,140,141,142,145],"note",{},"Before we start, make sure you have installed ",[99,143,144],{},"nuxt-pages-plus"," module in your Nuxt project.",[95,147,148,149,152,153,156],{},"For instance, here's how your original Nuxt project setup with two routes: ",[99,150,151],{},"\u002F"," and ",[99,154,155],{},"\u002Finfo"," would look like:",[158,159,160,254,319],"code-group",{},[161,162,168],"pre",{"className":163,"code":164,"filename":165,"language":166,"meta":167,"style":167},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtLink to=\"\u002Finfo\">Go Info\u003C\u002FNuxtLink>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Findex.vue","html","",[99,169,170,186,197,235,245],{"__ignoreMap":167},[171,172,175,179,183],"span",{"class":173,"line":174},"line",1,[171,176,178],{"class":177},"sMK4o","\u003C",[171,180,182],{"class":181},"swJcz","template",[171,184,185],{"class":177},">\n",[171,187,189,192,195],{"class":173,"line":188},2,[171,190,191],{"class":177},"  \u003C",[171,193,194],{"class":181},"div",[171,196,185],{"class":177},[171,198,200,203,206,210,213,216,219,221,224,228,231,233],{"class":173,"line":199},3,[171,201,202],{"class":177},"    \u003C",[171,204,205],{"class":181},"NuxtLink",[171,207,209],{"class":208},"spNyl"," to",[171,211,212],{"class":177},"=",[171,214,215],{"class":177},"\"",[171,217,155],{"class":218},"sfazB",[171,220,215],{"class":177},[171,222,223],{"class":177},">",[171,225,227],{"class":226},"sTEyZ","Go Info",[171,229,230],{"class":177},"\u003C\u002F",[171,232,205],{"class":181},[171,234,185],{"class":177},[171,236,238,241,243],{"class":173,"line":237},4,[171,239,240],{"class":177},"  \u003C\u002F",[171,242,194],{"class":181},[171,244,185],{"class":177},[171,246,248,250,252],{"class":173,"line":247},5,[171,249,230],{"class":177},[171,251,182],{"class":181},[171,253,185],{"class":177},[161,255,258],{"className":163,"code":256,"filename":257,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtLink to=\"\u002F\">Go Home\u003C\u002FNuxtLink>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Finfo.vue",[99,259,260,268,276,303,311],{"__ignoreMap":167},[171,261,262,264,266],{"class":173,"line":174},[171,263,178],{"class":177},[171,265,182],{"class":181},[171,267,185],{"class":177},[171,269,270,272,274],{"class":173,"line":188},[171,271,191],{"class":177},[171,273,194],{"class":181},[171,275,185],{"class":177},[171,277,278,280,282,284,286,288,290,292,294,297,299,301],{"class":173,"line":199},[171,279,202],{"class":177},[171,281,205],{"class":181},[171,283,209],{"class":208},[171,285,212],{"class":177},[171,287,215],{"class":177},[171,289,151],{"class":218},[171,291,215],{"class":177},[171,293,223],{"class":177},[171,295,296],{"class":226},"Go Home",[171,298,230],{"class":177},[171,300,205],{"class":181},[171,302,185],{"class":177},[171,304,305,307,309],{"class":173,"line":237},[171,306,240],{"class":177},[171,308,194],{"class":181},[171,310,185],{"class":177},[171,312,313,315,317],{"class":173,"line":247},[171,314,230],{"class":177},[171,316,182],{"class":181},[171,318,185],{"class":177},[161,320,323],{"className":163,"code":321,"filename":322,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003CNuxtPage \u002F>\n\u003C\u002Ftemplate>\n","app.vue",[99,324,325,333,343],{"__ignoreMap":167},[171,326,327,329,331],{"class":173,"line":174},[171,328,178],{"class":177},[171,330,182],{"class":181},[171,332,185],{"class":177},[171,334,335,337,340],{"class":173,"line":188},[171,336,191],{"class":177},[171,338,339],{"class":181},"NuxtPage",[171,341,342],{"class":177}," \u002F>\n",[171,344,345,347,349],{"class":173,"line":199},[171,346,230],{"class":177},[171,348,182],{"class":181},[171,350,185],{"class":177},[95,352,353,354,356,357,360,361,109],{},"In this tutorial, we will add a modal route for ",[99,355,155],{}," and add a button on ",[99,358,359],{},"index.vue",". When you click the button, an info modal will pop up on the page, and the URL will change to ",[99,362,155],{},[364,365,367],"h3",{"id":366},"preparation","Preparation",[95,369,370,371,374,375,383],{},"First, you need to change your ",[99,372,373],{},"\u003CNuxtPage \u002F>"," in your ",[376,377,381],"a",{"href":378,"rel":379},"https:\u002F\u002Fnuxt.com\u002Fdocs\u002Fguide\u002Fdirectory-structure\u002Fapp",[380],"nofollow",[99,382,322],{}," file.",[95,385,386,390,391,393,394,109],{},[387,388,389],"strong",{},"Option 1",": Replace ",[99,392,373],{}," with ",[99,395,52],{},[161,397,401],{"className":398,"code":399,"filename":322,"language":400,"meta":167,"style":167},"language-diff shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n-  \u003CNuxtPage \u002F>\n+  \u003CPlusModalNuxtPage \u002F>\n\u003C\u002Ftemplate>\n","diff",[99,402,403,408,416,424],{"__ignoreMap":167},[171,404,405],{"class":173,"line":174},[171,406,407],{"class":226},"\u003Ctemplate>\n",[171,409,410,413],{"class":173,"line":188},[171,411,412],{"class":177},"-",[171,414,415],{"class":181},"  \u003CNuxtPage \u002F>\n",[171,417,418,421],{"class":173,"line":199},[171,419,420],{"class":177},"+",[171,422,423],{"class":218},"  \u003CPlusModalNuxtPage \u002F>\n",[171,425,426],{"class":173,"line":237},[171,427,428],{"class":226},"\u003C\u002Ftemplate>\n",[95,430,431,434,435,438,439,441,442,445],{},[387,432,433],{},"Option 2",": You can use ",[99,436,437],{},"PlusModalNuxtPage"," to wrap your ",[99,440,339],{}," component and pass the ",[99,443,444],{},"route"," prop to it.",[161,447,449],{"className":163,"code":448,"filename":322,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003CPlusModalNuxtPage v-slot=\"{ route }\">\n    \u003CNuxtPage :route=\"route\" \u002F>\n  \u003C\u002FPlusModalNuxtPage>\n\u003C\u002Ftemplate>\n",[99,450,451,459,479,498,506],{"__ignoreMap":167},[171,452,453,455,457],{"class":173,"line":174},[171,454,178],{"class":177},[171,456,182],{"class":181},[171,458,185],{"class":177},[171,460,461,463,465,468,470,472,475,477],{"class":173,"line":188},[171,462,191],{"class":177},[171,464,437],{"class":181},[171,466,467],{"class":208}," v-slot",[171,469,212],{"class":177},[171,471,215],{"class":177},[171,473,474],{"class":218},"{ route }",[171,476,215],{"class":177},[171,478,185],{"class":177},[171,480,481,483,485,488,490,492,494,496],{"class":173,"line":199},[171,482,202],{"class":177},[171,484,339],{"class":181},[171,486,487],{"class":208}," :route",[171,489,212],{"class":177},[171,491,215],{"class":177},[171,493,444],{"class":218},[171,495,215],{"class":177},[171,497,342],{"class":177},[171,499,500,502,504],{"class":173,"line":237},[171,501,240],{"class":177},[171,503,437],{"class":181},[171,505,185],{"class":177},[171,507,508,510,512],{"class":173,"line":247},[171,509,230],{"class":177},[171,511,182],{"class":181},[171,513,185],{"class":177},[364,515,517],{"id":516},"adding-modal-routes","Adding Modal Routes",[95,519,520,521,524,525,528],{},"First, add a new file ",[99,522,523],{},"@my-modal\u002Finfo.vue"," (or any name you prefer) to your ",[99,526,527],{},"~\u002Fpages"," directory:",[161,530,533],{"className":163,"code":531,"filename":532,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003CTeleport to=\"body\">\n    \u003Cdiv>\n      \u003Cp>I am info modal\u003C\u002Fp>\n      \u003Cbutton @click=\"$modalRouter.close()\">Close\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n","pages\u002F@my-modal\u002Finfo.vue",[99,534,535,543,563,571,589,619,629,638],{"__ignoreMap":167},[171,536,537,539,541],{"class":173,"line":174},[171,538,178],{"class":177},[171,540,182],{"class":181},[171,542,185],{"class":177},[171,544,545,547,550,552,554,556,559,561],{"class":173,"line":188},[171,546,191],{"class":177},[171,548,549],{"class":181},"Teleport",[171,551,209],{"class":208},[171,553,212],{"class":177},[171,555,215],{"class":177},[171,557,558],{"class":218},"body",[171,560,215],{"class":177},[171,562,185],{"class":177},[171,564,565,567,569],{"class":173,"line":199},[171,566,202],{"class":177},[171,568,194],{"class":181},[171,570,185],{"class":177},[171,572,573,576,578,580,583,585,587],{"class":173,"line":237},[171,574,575],{"class":177},"      \u003C",[171,577,95],{"class":181},[171,579,223],{"class":177},[171,581,582],{"class":226},"I am info modal",[171,584,230],{"class":177},[171,586,95],{"class":181},[171,588,185],{"class":177},[171,590,591,593,596,599,601,603,606,608,610,613,615,617],{"class":173,"line":247},[171,592,575],{"class":177},[171,594,595],{"class":181},"button",[171,597,598],{"class":208}," @click",[171,600,212],{"class":177},[171,602,215],{"class":177},[171,604,605],{"class":218},"$modalRouter.close()",[171,607,215],{"class":177},[171,609,223],{"class":177},[171,611,612],{"class":226},"Close",[171,614,230],{"class":177},[171,616,595],{"class":181},[171,618,185],{"class":177},[171,620,622,625,627],{"class":173,"line":621},6,[171,623,624],{"class":177},"    \u003C\u002F",[171,626,194],{"class":181},[171,628,185],{"class":177},[171,630,632,634,636],{"class":173,"line":631},7,[171,633,240],{"class":177},[171,635,549],{"class":181},[171,637,185],{"class":177},[171,639,641,643,645],{"class":173,"line":640},8,[171,642,230],{"class":177},[171,644,182],{"class":181},[171,646,185],{"class":177},[648,649,650,660],"ul",{},[651,652,653,656,657,659],"li",{},[99,654,655],{},"\u003CTeleport>"," is a native component in Vue 3 that allows you to move components to a specified location, here moving the modal to the ",[99,658,558],{}," of the document.",[651,661,662,664],{},[99,663,605],{}," is a method used to close the modal.",[364,666,668],{"id":667},"displaying-modal-routes","Displaying Modal Routes",[95,670,671,672,152,675,678],{},"After creating the modal route, you can now display the modal route on your page by adding a ",[99,673,674],{},"\u003CPlusModalLink>",[99,676,677],{},"\u003CPlusModalPage>"," component.",[161,680,682],{"className":398,"code":681,"filename":165,"language":400,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CNuxtLink to=\"\u002Finfo\">Go Info\u003C\u002FNuxtLink>\n+    \u003CPlusModalLink to=\"\u002Finfo\">Show Info Modal\u003C\u002FPlusModalLink>\n+    \u003CPlusModalPage name=\"my-modal\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[99,683,684,688,693,698,705,712,717],{"__ignoreMap":167},[171,685,686],{"class":173,"line":174},[171,687,407],{"class":226},[171,689,690],{"class":173,"line":188},[171,691,692],{"class":226},"  \u003Cdiv>\n",[171,694,695],{"class":173,"line":199},[171,696,697],{"class":226},"    \u003CNuxtLink to=\"\u002Finfo\">Go Info\u003C\u002FNuxtLink>\n",[171,699,700,702],{"class":173,"line":237},[171,701,420],{"class":177},[171,703,704],{"class":218},"    \u003CPlusModalLink to=\"\u002Finfo\">Show Info Modal\u003C\u002FPlusModalLink>\n",[171,706,707,709],{"class":173,"line":247},[171,708,420],{"class":177},[171,710,711],{"class":218},"    \u003CPlusModalPage name=\"my-modal\" \u002F>\n",[171,713,714],{"class":173,"line":621},[171,715,716],{"class":226},"  \u003C\u002Fdiv>\n",[171,718,719],{"class":173,"line":631},[171,720,428],{"class":226},[648,722,723,735],{},[651,724,725,728,729,731,732,734],{},[99,726,727],{},"PlusModalLink"," functions similarly to ",[99,730,205],{}," but performs soft-navigation that changes the URL to ",[99,733,155],{}," without a full page navigation.",[651,736,737,740,741,744,745,747,748,750,751,753],{},[99,738,739],{},"PlusModalPage"," in here is used to display the content of the ",[99,742,743],{},"my-modal"," modal route. When the URL is ",[99,746,155],{},", it will display the content from ",[99,749,523],{},". You can add ",[99,752,677],{}," to layout for showing modal in all pages or add it to a specific page like this example.",[95,755,756],{},"That's it! You've successfully added a modal route to your Nuxt application.",[364,758,760],{"id":759},"displaying-a-custom-modal","Displaying a Custom Modal",[95,762,763,764,766,767,769,770,773],{},"If you display your own modal UI instead of ",[99,765,677],{}," (for example an inline ",[99,768,655],{}," or a dialog component from a UI library), gate it with ",[99,771,772],{},"$modalRouter.isOpen"," instead of checking the current route.",[95,775,776,777,780,781,784,785,788],{},"While a navigation is pending (for example when the target page has an async ",[99,778,779],{},"setup"," or is fetching data), the global route and the parallel routers are already updated to the target route, but the previous page is still displayed. A modal gated only by the route would therefore pop up over the previous page even when the target history entry should render as a plain full page — for example when revisiting a refreshed modal route with the browser back \u002F forward buttons. ",[99,782,783],{},"isOpen"," only becomes ",[99,786,787],{},"true"," when the current history entry actually carries a modal background view.",[161,790,792],{"className":163,"code":791,"filename":165,"language":166,"meta":167,"style":167},"\u003Cscript setup>\nconst { isOpen } = useModalRouter()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003CPlusModalLink to=\"\u002Finfo\">Show Info Modal\u003C\u002FPlusModalLink>\n\n    \u003CTeleport v-if=\"isOpen\" to=\"body\">\n      \u003Cdiv>\n        \u003Cp>I am info modal\u003C\u002Fp>\n        \u003Cbutton @click=\"$modalRouter.close()\">Close\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002FTeleport>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[99,793,794,806,830,838,844,852,860,887,891,921,930,948,975,985,994,1003],{"__ignoreMap":167},[171,795,796,798,801,804],{"class":173,"line":174},[171,797,178],{"class":177},[171,799,800],{"class":181},"script",[171,802,803],{"class":208}," setup",[171,805,185],{"class":177},[171,807,808,811,814,817,820,823,827],{"class":173,"line":188},[171,809,810],{"class":208},"const",[171,812,813],{"class":177}," {",[171,815,816],{"class":226}," isOpen ",[171,818,819],{"class":177},"}",[171,821,822],{"class":177}," =",[171,824,826],{"class":825},"s2Zo4"," useModalRouter",[171,828,829],{"class":226},"()\n",[171,831,832,834,836],{"class":173,"line":199},[171,833,230],{"class":177},[171,835,800],{"class":181},[171,837,185],{"class":177},[171,839,840],{"class":173,"line":237},[171,841,843],{"emptyLinePlaceholder":842},true,"\n",[171,845,846,848,850],{"class":173,"line":247},[171,847,178],{"class":177},[171,849,182],{"class":181},[171,851,185],{"class":177},[171,853,854,856,858],{"class":173,"line":621},[171,855,191],{"class":177},[171,857,194],{"class":181},[171,859,185],{"class":177},[171,861,862,864,866,868,870,872,874,876,878,881,883,885],{"class":173,"line":631},[171,863,202],{"class":177},[171,865,727],{"class":181},[171,867,209],{"class":208},[171,869,212],{"class":177},[171,871,215],{"class":177},[171,873,155],{"class":218},[171,875,215],{"class":177},[171,877,223],{"class":177},[171,879,880],{"class":226},"Show Info Modal",[171,882,230],{"class":177},[171,884,727],{"class":181},[171,886,185],{"class":177},[171,888,889],{"class":173,"line":640},[171,890,843],{"emptyLinePlaceholder":842},[171,892,894,896,898,901,903,905,907,909,911,913,915,917,919],{"class":173,"line":893},9,[171,895,202],{"class":177},[171,897,549],{"class":181},[171,899,900],{"class":208}," v-if",[171,902,212],{"class":177},[171,904,215],{"class":177},[171,906,783],{"class":218},[171,908,215],{"class":177},[171,910,209],{"class":208},[171,912,212],{"class":177},[171,914,215],{"class":177},[171,916,558],{"class":218},[171,918,215],{"class":177},[171,920,185],{"class":177},[171,922,924,926,928],{"class":173,"line":923},10,[171,925,575],{"class":177},[171,927,194],{"class":181},[171,929,185],{"class":177},[171,931,933,936,938,940,942,944,946],{"class":173,"line":932},11,[171,934,935],{"class":177},"        \u003C",[171,937,95],{"class":181},[171,939,223],{"class":177},[171,941,582],{"class":226},[171,943,230],{"class":177},[171,945,95],{"class":181},[171,947,185],{"class":177},[171,949,951,953,955,957,959,961,963,965,967,969,971,973],{"class":173,"line":950},12,[171,952,935],{"class":177},[171,954,595],{"class":181},[171,956,598],{"class":208},[171,958,212],{"class":177},[171,960,215],{"class":177},[171,962,605],{"class":218},[171,964,215],{"class":177},[171,966,223],{"class":177},[171,968,612],{"class":226},[171,970,230],{"class":177},[171,972,595],{"class":181},[171,974,185],{"class":177},[171,976,978,981,983],{"class":173,"line":977},13,[171,979,980],{"class":177},"      \u003C\u002F",[171,982,194],{"class":181},[171,984,185],{"class":177},[171,986,988,990,992],{"class":173,"line":987},14,[171,989,624],{"class":177},[171,991,549],{"class":181},[171,993,185],{"class":177},[171,995,997,999,1001],{"class":173,"line":996},15,[171,998,240],{"class":177},[171,1000,194],{"class":181},[171,1002,185],{"class":177},[171,1004,1006,1008,1010],{"class":173,"line":1005},16,[171,1007,230],{"class":177},[171,1009,182],{"class":181},[171,1011,185],{"class":177},[134,1013,1015],{"id":1014},"how-it-works","How it works?",[95,1017,1018,1019,1026,1027,1033,1034,1041,1042,1049,1050,1055],{},"Modal Routes uses the ",[376,1020,1023],{"href":1021,"rel":1022},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FHistory",[380],[99,1024,1025],{},"History"," API for saving the \"background view\" of the modal and pass it's route to the ",[376,1028,1031],{"href":1029,"rel":1030},"https:\u002F\u002Frouter.vuejs.org\u002Fapi\u002Finterfaces\u002FRouterViewProps.html#route",[380],[99,1032,444],{}," prop of ",[376,1035,1038],{"href":1036,"rel":1037},"https:\u002F\u002Frouter.vuejs.org\u002Fapi\u002F#RouterView",[380],[99,1039,1040],{},"RouterView",". There is a Vue ",[376,1043,1046],{"href":1044,"rel":1045},"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Frfcs\u002Fblob\u002Fmaster\u002Factive-rfcs\u002F0036-router-view-route-prop.md",[380],[99,1047,1048],{},"RFC"," by ",[376,1051,1054],{"href":1052,"rel":1053},"https:\u002F\u002Fgithub.com\u002Fposva",[380],"@posva"," demonstrating the idea.",[134,1057,1059],{"id":1058},"navigation-in-modal","Navigation in Modal",[95,1061,1062],{},"When a modal route is opened, you can navigate to another modal route while keeping the modal open.",[95,1064,1065],{},"Consider the example of developing a gallery application:",[161,1067,1070],{"className":163,"code":1068,"filename":1069,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003CPlusModalLink to=\"\u002Fimage\u002F1\">\n      \u003Cimg src=\"\u002Fimage\u002F1\" \u002F>\n    \u003C\u002FPlusModalLink>\n\n    \u003CPlusModalPage name=\"modal\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Fhome.vue",[99,1071,1072,1080,1088,1107,1126,1134,1138,1158,1166],{"__ignoreMap":167},[171,1073,1074,1076,1078],{"class":173,"line":174},[171,1075,178],{"class":177},[171,1077,182],{"class":181},[171,1079,185],{"class":177},[171,1081,1082,1084,1086],{"class":173,"line":188},[171,1083,191],{"class":177},[171,1085,194],{"class":181},[171,1087,185],{"class":177},[171,1089,1090,1092,1094,1096,1098,1100,1103,1105],{"class":173,"line":199},[171,1091,202],{"class":177},[171,1093,727],{"class":181},[171,1095,209],{"class":208},[171,1097,212],{"class":177},[171,1099,215],{"class":177},[171,1101,1102],{"class":218},"\u002Fimage\u002F1",[171,1104,215],{"class":177},[171,1106,185],{"class":177},[171,1108,1109,1111,1113,1116,1118,1120,1122,1124],{"class":173,"line":237},[171,1110,575],{"class":177},[171,1112,113],{"class":181},[171,1114,1115],{"class":208}," src",[171,1117,212],{"class":177},[171,1119,215],{"class":177},[171,1121,1102],{"class":218},[171,1123,215],{"class":177},[171,1125,342],{"class":177},[171,1127,1128,1130,1132],{"class":173,"line":247},[171,1129,624],{"class":177},[171,1131,727],{"class":181},[171,1133,185],{"class":177},[171,1135,1136],{"class":173,"line":621},[171,1137,843],{"emptyLinePlaceholder":842},[171,1139,1140,1142,1144,1147,1149,1151,1154,1156],{"class":173,"line":631},[171,1141,202],{"class":177},[171,1143,739],{"class":181},[171,1145,1146],{"class":208}," name",[171,1148,212],{"class":177},[171,1150,215],{"class":177},[171,1152,1153],{"class":218},"modal",[171,1155,215],{"class":177},[171,1157,342],{"class":177},[171,1159,1160,1162,1164],{"class":173,"line":640},[171,1161,240],{"class":177},[171,1163,194],{"class":181},[171,1165,185],{"class":177},[171,1167,1168,1170,1172],{"class":173,"line":893},[171,1169,230],{"class":177},[171,1171,182],{"class":181},[171,1173,185],{"class":177},[95,1175,1176,1177,1179,1180,1183],{},"When a user clicks on an image link (",[99,1178,1102],{},") from the ",[99,1181,1182],{},"\u002Fhome"," page, a modal opens displaying detailed information about the image. Inside the modal, there are \"Next\" and \"Previous\" buttons allowing the user to browse through images:",[161,1185,1188],{"className":163,"code":1186,"filename":1187,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    Image Modal\n    \u003CPlusModalLink :to=\"`\u002Fimage\u002F${parseInt(id) - 1}`\">Prev\u003C\u002FPlusModalLink>\n    \u003Cimg :src=\"`\u002Fimage\u002F${id}`\" \u002F>\n    \u003CPlusModalLink :to=\"`\u002Fimage\u002F${parseInt(id) + 1}`\">Next\u003C\u002FPlusModalLink>\n\n    \u003Cbutton @click=\"$modalRouter.close()\">Close\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002F@modal\u002Fimage\u002F[id].vue",[99,1189,1190,1198,1206,1211,1240,1260,1288,1292,1318,1326],{"__ignoreMap":167},[171,1191,1192,1194,1196],{"class":173,"line":174},[171,1193,178],{"class":177},[171,1195,182],{"class":181},[171,1197,185],{"class":177},[171,1199,1200,1202,1204],{"class":173,"line":188},[171,1201,191],{"class":177},[171,1203,194],{"class":181},[171,1205,185],{"class":177},[171,1207,1208],{"class":173,"line":199},[171,1209,1210],{"class":226},"    Image Modal\n",[171,1212,1213,1215,1217,1220,1222,1224,1227,1229,1231,1234,1236,1238],{"class":173,"line":237},[171,1214,202],{"class":177},[171,1216,727],{"class":181},[171,1218,1219],{"class":208}," :to",[171,1221,212],{"class":177},[171,1223,215],{"class":177},[171,1225,1226],{"class":218},"`\u002Fimage\u002F${parseInt(id) - 1}`",[171,1228,215],{"class":177},[171,1230,223],{"class":177},[171,1232,1233],{"class":226},"Prev",[171,1235,230],{"class":177},[171,1237,727],{"class":181},[171,1239,185],{"class":177},[171,1241,1242,1244,1246,1249,1251,1253,1256,1258],{"class":173,"line":247},[171,1243,202],{"class":177},[171,1245,113],{"class":181},[171,1247,1248],{"class":208}," :src",[171,1250,212],{"class":177},[171,1252,215],{"class":177},[171,1254,1255],{"class":218},"`\u002Fimage\u002F${id}`",[171,1257,215],{"class":177},[171,1259,342],{"class":177},[171,1261,1262,1264,1266,1268,1270,1272,1275,1277,1279,1282,1284,1286],{"class":173,"line":621},[171,1263,202],{"class":177},[171,1265,727],{"class":181},[171,1267,1219],{"class":208},[171,1269,212],{"class":177},[171,1271,215],{"class":177},[171,1273,1274],{"class":218},"`\u002Fimage\u002F${parseInt(id) + 1}`",[171,1276,215],{"class":177},[171,1278,223],{"class":177},[171,1280,1281],{"class":226},"Next",[171,1283,230],{"class":177},[171,1285,727],{"class":181},[171,1287,185],{"class":177},[171,1289,1290],{"class":173,"line":631},[171,1291,843],{"emptyLinePlaceholder":842},[171,1293,1294,1296,1298,1300,1302,1304,1306,1308,1310,1312,1314,1316],{"class":173,"line":640},[171,1295,202],{"class":177},[171,1297,595],{"class":181},[171,1299,598],{"class":208},[171,1301,212],{"class":177},[171,1303,215],{"class":177},[171,1305,605],{"class":218},[171,1307,215],{"class":177},[171,1309,223],{"class":177},[171,1311,612],{"class":226},[171,1313,230],{"class":177},[171,1315,595],{"class":181},[171,1317,185],{"class":177},[171,1319,1320,1322,1324],{"class":173,"line":893},[171,1321,240],{"class":177},[171,1323,194],{"class":181},[171,1325,185],{"class":177},[171,1327,1328,1330,1332],{"class":173,"line":923},[171,1329,230],{"class":177},[171,1331,182],{"class":181},[171,1333,185],{"class":177},[95,1335,1336,1337,109],{},"The modal remains open as the user navigates through images, and when the \"Close\" button is pressed, the modal closes and the route returns to ",[99,1338,1182],{},[364,1340,1342],{"id":1341},"nested-navigation-in-modal","Nested Navigation in Modal",[95,1344,1345,1346,1349,1350,109],{},"Continuing with the gallery application example, suppose you want to open another set of modals within ",[99,1347,1348],{},"@modal\u002Fimage\u002F[id].vue"," to view comments, such as ",[99,1351,1352],{},"\u002Fcomments\u002F[id]",[161,1354,1356],{"className":163,"code":1355,"filename":1187,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    Image Modal\n    \u003CPlusModalLink :to=\"`\u002Fimage\u002F${parseInt(id) - 1}`\">Prev\u003C\u002FPlusModalLink>\n    \u003Cimg :src=\"`\u002Fimage\u002F${id}`\" \u002F>\n    \u003CPlusModalLink :to=\"`\u002Fimage\u002F${parseInt(id) + 1}`\">Next\u003C\u002FPlusModalLink>\n\n    \u003CPlusModalLink :to=\"`\u002Fcomments\u002F${id}`\">Comments\u003C\u002FPlusModalLink>\n\n    \u003Cbutton @click=\"$modalRouter.close()\">Close\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[99,1357,1358,1366,1374,1378,1404,1422,1448,1452,1480,1484,1510,1518],{"__ignoreMap":167},[171,1359,1360,1362,1364],{"class":173,"line":174},[171,1361,178],{"class":177},[171,1363,182],{"class":181},[171,1365,185],{"class":177},[171,1367,1368,1370,1372],{"class":173,"line":188},[171,1369,191],{"class":177},[171,1371,194],{"class":181},[171,1373,185],{"class":177},[171,1375,1376],{"class":173,"line":199},[171,1377,1210],{"class":226},[171,1379,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402],{"class":173,"line":237},[171,1381,202],{"class":177},[171,1383,727],{"class":181},[171,1385,1219],{"class":208},[171,1387,212],{"class":177},[171,1389,215],{"class":177},[171,1391,1226],{"class":218},[171,1393,215],{"class":177},[171,1395,223],{"class":177},[171,1397,1233],{"class":226},[171,1399,230],{"class":177},[171,1401,727],{"class":181},[171,1403,185],{"class":177},[171,1405,1406,1408,1410,1412,1414,1416,1418,1420],{"class":173,"line":247},[171,1407,202],{"class":177},[171,1409,113],{"class":181},[171,1411,1248],{"class":208},[171,1413,212],{"class":177},[171,1415,215],{"class":177},[171,1417,1255],{"class":218},[171,1419,215],{"class":177},[171,1421,342],{"class":177},[171,1423,1424,1426,1428,1430,1432,1434,1436,1438,1440,1442,1444,1446],{"class":173,"line":621},[171,1425,202],{"class":177},[171,1427,727],{"class":181},[171,1429,1219],{"class":208},[171,1431,212],{"class":177},[171,1433,215],{"class":177},[171,1435,1274],{"class":218},[171,1437,215],{"class":177},[171,1439,223],{"class":177},[171,1441,1281],{"class":226},[171,1443,230],{"class":177},[171,1445,727],{"class":181},[171,1447,185],{"class":177},[171,1449,1450],{"class":173,"line":631},[171,1451,843],{"emptyLinePlaceholder":842},[171,1453,1454,1456,1458,1460,1462,1464,1467,1469,1471,1474,1476,1478],{"class":173,"line":640},[171,1455,202],{"class":177},[171,1457,727],{"class":181},[171,1459,1219],{"class":208},[171,1461,212],{"class":177},[171,1463,215],{"class":177},[171,1465,1466],{"class":218},"`\u002Fcomments\u002F${id}`",[171,1468,215],{"class":177},[171,1470,223],{"class":177},[171,1472,1473],{"class":226},"Comments",[171,1475,230],{"class":177},[171,1477,727],{"class":181},[171,1479,185],{"class":177},[171,1481,1482],{"class":173,"line":893},[171,1483,843],{"emptyLinePlaceholder":842},[171,1485,1486,1488,1490,1492,1494,1496,1498,1500,1502,1504,1506,1508],{"class":173,"line":923},[171,1487,202],{"class":177},[171,1489,595],{"class":181},[171,1491,598],{"class":208},[171,1493,212],{"class":177},[171,1495,215],{"class":177},[171,1497,605],{"class":218},[171,1499,215],{"class":177},[171,1501,223],{"class":177},[171,1503,612],{"class":226},[171,1505,230],{"class":177},[171,1507,595],{"class":181},[171,1509,185],{"class":177},[171,1511,1512,1514,1516],{"class":173,"line":932},[171,1513,240],{"class":177},[171,1515,194],{"class":181},[171,1517,185],{"class":177},[171,1519,1520,1522,1524],{"class":173,"line":950},[171,1521,230],{"class":177},[171,1523,182],{"class":181},[171,1525,185],{"class":177},[1527,1528],"br",{},[161,1530,1533],{"className":163,"code":1531,"filename":1532,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    Comments\n    \u003CCommentsComponent :id=\"id\" \u002F>\n    \u003Cbutton @click=\"$modalRouter.close()\">Close\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002F@modal\u002Fcomments\u002F[id].vue",[99,1534,1535,1543,1551,1556,1577,1603,1611],{"__ignoreMap":167},[171,1536,1537,1539,1541],{"class":173,"line":174},[171,1538,178],{"class":177},[171,1540,182],{"class":181},[171,1542,185],{"class":177},[171,1544,1545,1547,1549],{"class":173,"line":188},[171,1546,191],{"class":177},[171,1548,194],{"class":181},[171,1550,185],{"class":177},[171,1552,1553],{"class":173,"line":199},[171,1554,1555],{"class":226},"    Comments\n",[171,1557,1558,1560,1563,1566,1568,1570,1573,1575],{"class":173,"line":237},[171,1559,202],{"class":177},[171,1561,1562],{"class":181},"CommentsComponent",[171,1564,1565],{"class":208}," :id",[171,1567,212],{"class":177},[171,1569,215],{"class":177},[171,1571,1572],{"class":218},"id",[171,1574,215],{"class":177},[171,1576,342],{"class":177},[171,1578,1579,1581,1583,1585,1587,1589,1591,1593,1595,1597,1599,1601],{"class":173,"line":247},[171,1580,202],{"class":177},[171,1582,595],{"class":181},[171,1584,598],{"class":208},[171,1586,212],{"class":177},[171,1588,215],{"class":177},[171,1590,605],{"class":218},[171,1592,215],{"class":177},[171,1594,223],{"class":177},[171,1596,612],{"class":226},[171,1598,230],{"class":177},[171,1600,595],{"class":181},[171,1602,185],{"class":177},[171,1604,1605,1607,1609],{"class":173,"line":621},[171,1606,240],{"class":177},[171,1608,194],{"class":181},[171,1610,185],{"class":177},[171,1612,1613,1615,1617],{"class":173,"line":631},[171,1614,230],{"class":177},[171,1616,182],{"class":181},[171,1618,185],{"class":177},[95,1620,1621,1622,1624,1625,1627,1628,1631,1632,109],{},"The challenge arises when pressing the \"Close\" button in the comments modal, the default behavior would take you back to ",[99,1623,1182],{},". To ensure that closing the comments modal takes you back to the image modal instead of ",[99,1626,1182],{},", you can utilize the ",[99,1629,1630],{},"open"," prop on ",[99,1633,727],{},[161,1635,1638],{"className":163,"code":1636,"filename":1187,"highlights":1637,"language":166,"meta":167,"style":167},"\u003Ctemplate>\n  \u003Cdiv>\n    Image Modal\n    \u003CPlusModalLink :to=\"`\u002Fimage\u002F${parseInt(id) - 1}`\">Prev\u003C\u002FPlusModalLink>\n    \u003Cimg :src=\"`\u002Fimage\u002F${id}`\" \u002F>\n    \u003CPlusModalLink :to=\"`\u002Fimage\u002F${parseInt(id) + 1}`\">Next\u003C\u002FPlusModalLink>\n\n    \u003CPlusModalLink open :to=\"`\u002Fcomments\u002F${id}`\">Comments\u003C\u002FPlusModalLink>\n\n    \u003Cbutton @click=\"$modalRouter.close()\">Close\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[640],[99,1639,1640,1648,1656,1660,1686,1704,1730,1734,1765,1769,1795,1803],{"__ignoreMap":167},[171,1641,1642,1644,1646],{"class":173,"line":174},[171,1643,178],{"class":177},[171,1645,182],{"class":181},[171,1647,185],{"class":177},[171,1649,1650,1652,1654],{"class":173,"line":188},[171,1651,191],{"class":177},[171,1653,194],{"class":181},[171,1655,185],{"class":177},[171,1657,1658],{"class":173,"line":199},[171,1659,1210],{"class":226},[171,1661,1662,1664,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684],{"class":173,"line":237},[171,1663,202],{"class":177},[171,1665,727],{"class":181},[171,1667,1219],{"class":208},[171,1669,212],{"class":177},[171,1671,215],{"class":177},[171,1673,1226],{"class":218},[171,1675,215],{"class":177},[171,1677,223],{"class":177},[171,1679,1233],{"class":226},[171,1681,230],{"class":177},[171,1683,727],{"class":181},[171,1685,185],{"class":177},[171,1687,1688,1690,1692,1694,1696,1698,1700,1702],{"class":173,"line":247},[171,1689,202],{"class":177},[171,1691,113],{"class":181},[171,1693,1248],{"class":208},[171,1695,212],{"class":177},[171,1697,215],{"class":177},[171,1699,1255],{"class":218},[171,1701,215],{"class":177},[171,1703,342],{"class":177},[171,1705,1706,1708,1710,1712,1714,1716,1718,1720,1722,1724,1726,1728],{"class":173,"line":621},[171,1707,202],{"class":177},[171,1709,727],{"class":181},[171,1711,1219],{"class":208},[171,1713,212],{"class":177},[171,1715,215],{"class":177},[171,1717,1274],{"class":218},[171,1719,215],{"class":177},[171,1721,223],{"class":177},[171,1723,1281],{"class":226},[171,1725,230],{"class":177},[171,1727,727],{"class":181},[171,1729,185],{"class":177},[171,1731,1732],{"class":173,"line":631},[171,1733,843],{"emptyLinePlaceholder":842},[171,1735,1738,1740,1742,1745,1747,1749,1751,1753,1755,1757,1759,1761,1763],{"class":1736,"line":640},[173,1737],"highlight",[171,1739,202],{"class":177},[171,1741,727],{"class":181},[171,1743,1744],{"class":208}," open",[171,1746,1219],{"class":208},[171,1748,212],{"class":177},[171,1750,215],{"class":177},[171,1752,1466],{"class":218},[171,1754,215],{"class":177},[171,1756,223],{"class":177},[171,1758,1473],{"class":226},[171,1760,230],{"class":177},[171,1762,727],{"class":181},[171,1764,185],{"class":177},[171,1766,1767],{"class":173,"line":893},[171,1768,843],{"emptyLinePlaceholder":842},[171,1770,1771,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793],{"class":173,"line":923},[171,1772,202],{"class":177},[171,1774,595],{"class":181},[171,1776,598],{"class":208},[171,1778,212],{"class":177},[171,1780,215],{"class":177},[171,1782,605],{"class":218},[171,1784,215],{"class":177},[171,1786,223],{"class":177},[171,1788,612],{"class":226},[171,1790,230],{"class":177},[171,1792,595],{"class":181},[171,1794,185],{"class":177},[171,1796,1797,1799,1801],{"class":173,"line":932},[171,1798,240],{"class":177},[171,1800,194],{"class":181},[171,1802,185],{"class":177},[171,1804,1805,1807,1809],{"class":173,"line":950},[171,1806,230],{"class":177},[171,1808,182],{"class":181},[171,1810,185],{"class":177},[95,1812,1813,1814,1816],{},"This adjustment ensures that upon closing the comments modal, the navigation returns to the image modal instead of defaulting back to ",[99,1815,1182],{},". This enhances the continuity and user experience of navigating through modals within your application.",[134,1818,78],{"id":1819},"examples",[648,1821,1822,1829],{},[651,1823,1824],{},[376,1825,1828],{"href":1826,"rel":1827},"https:\u002F\u002Fgithub.com\u002Fserkodev\u002Fnuxt-pages-plus\u002Ftree\u002Fmain\u002Fexamples\u002Fmodal-gallery",[380],"Example - Gallery",[651,1830,1831],{},[376,1832,1835],{"href":1833,"rel":1834},"https:\u002F\u002Fgithub.com\u002Fserkodev\u002Fnuxt-pages-plus\u002Ftree\u002Fmain\u002Fexamples",[380],"More examples source code",[1837,1838,1839],"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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":167,"searchDepth":188,"depth":188,"links":1841},[1842,1848,1849,1852],{"id":136,"depth":188,"text":137,"children":1843},[1844,1845,1846,1847],{"id":366,"depth":199,"text":367},{"id":516,"depth":199,"text":517},{"id":667,"depth":199,"text":668},{"id":759,"depth":199,"text":760},{"id":1014,"depth":188,"text":1015},{"id":1058,"depth":188,"text":1059,"children":1850},[1851],{"id":1341,"depth":199,"text":1342},{"id":1819,"depth":188,"text":78},"Modal Routes can navigate modal routes with real-time URL changes for seamless browsing.","md",null,{},{"title":38,"description":1853},"V1M7K4Ca_-LVzinLneSoutst_G1JBGhxSrNq2q_Y2uM",[1860,1862],{"title":34,"path":35,"stem":36,"description":1861,"children":-1},"Parallel Routes allows you to render multiple Nuxt pages within a single route, either synchronously or manually.",{"title":48,"path":49,"stem":50,"description":1863,"children":-1},"Component to use for rendering a parallel page.",1786721247990]