[{"data":1,"prerenderedAt":1084},["ShallowReactive",2],{"navigation_docs":3,"-cookbook-app-tabs":106,"-cookbook-app-tabs-surround":1081},[4,36,72],{"title":5,"icon":6,"redirect":7,"path":8,"stem":9,"children":10,"page":35},"Get Started","heroicons-outline:star","\u002Fget-started\u002Fintroduction","\u002Fget-started","1.get-started",[11,15,20,25,30],{"title":12,"path":7,"stem":13,"icon":14},"Introduction","1.get-started\u002F1.introduction","uil:info-circle",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fget-started\u002Finstallation","1.get-started\u002F2.installation","uil:play-circle",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","\u002Fget-started\u002Fconfiguration","1.get-started\u002F3.configuration","uil:wrench",{"title":26,"path":27,"stem":28,"icon":29},"Enabling Capacitor","\u002Fget-started\u002Fenabling-capacitor","1.get-started\u002F4.enabling-capacitor","nonicons:capacitor-16",{"title":31,"path":32,"stem":33,"icon":34},"Watchouts","\u002Fget-started\u002Fwatch-outs","1.get-started\u002F5.watch-outs","uil:exclamation-triangle",false,{"title":37,"icon":38,"redirect":39,"path":40,"stem":41,"children":42,"page":35},"Overview","heroicons-outline:sparkles","\u002Foverview\u002Frouting","\u002Foverview","2.overview",[43,47,52,57,62,67],{"title":44,"path":39,"stem":45,"icon":46},"Routing","2.overview\u002F1.routing","uil:sign-alt",{"title":48,"path":49,"stem":50,"icon":51},"Theming","\u002Foverview\u002Ftheming","2.overview\u002F2.theming","uil:palette",{"title":53,"path":54,"stem":55,"icon":56},"Ionic Auto-Imports","\u002Foverview\u002Fionic-auto-imports","2.overview\u002F3.ionic-auto-imports","uil:channel",{"title":58,"path":59,"stem":60,"icon":61},"Module Utilities","\u002Foverview\u002Fmodule-utilities","2.overview\u002F4.module-utilities","uil:layer-group",{"title":63,"path":64,"stem":65,"icon":66},"Icons","\u002Foverview\u002Ficons","2.overview\u002F5.icons","uil:illustration",{"title":68,"path":69,"stem":70,"icon":71},"Deployment","\u002Foverview\u002Fdeployment","2.overview\u002F6.deployment","uil:rocket",{"title":73,"icon":74,"redirect":75,"path":76,"stem":77,"children":78,"page":35},"Cookbook","heroicons-outline:bookmark-alt","\u002Fcookbook\u002Fcustomising-app-vue","\u002Fcookbook","3.cookbook",[79,82,86,90,94,98,102],{"title":80,"path":75,"stem":81},"Customising app.vue","3.cookbook\u002F1.customising-app-vue",{"title":83,"path":84,"stem":85},"Local Development","\u002Fcookbook\u002Flocal-development","3.cookbook\u002F2.local-development",{"title":87,"path":88,"stem":89},"App Tabs","\u002Fcookbook\u002Fapp-tabs","3.cookbook\u002F3.app-tabs",{"title":91,"path":92,"stem":93},"useHead \u002F Page Meta","\u002Fcookbook\u002Fpage-metadata","3.cookbook\u002F4.page-metadata",{"title":95,"path":96,"stem":97},"iOS and Android Apps","\u002Fcookbook\u002Fcreating-ios-android-apps","3.cookbook\u002F5.creating-ios-android-apps",{"title":99,"path":100,"stem":101},"Web And Device","\u002Fcookbook\u002Fweb-and-device","3.cookbook\u002F6.web-and-device",{"title":103,"path":104,"stem":105},"Live Updates","\u002Fcookbook\u002Flive-updates","3.cookbook\u002F7.live-updates",{"id":107,"title":87,"body":108,"description":168,"extension":1076,"links":1077,"meta":1078,"navigation":375,"path":88,"seo":1079,"stem":89,"__hash__":1080},"docs\u002F3.cookbook\u002F3.app-tabs.md",{"type":109,"value":110,"toc":1071},"minimark",[111,115,118,137,142,154,157,160,171,178,888,896,903,909,912,915,926,932,942,946,949,955,973,977,980,987,1060,1067],[112,113,114],"p",{},"It's common for mobile apps to come with tabs at the bottom of the screen. These tabs act as separate routing stacks, so should remember where they were when a user navigates away and back to a tab.",[112,116,117],{},"Ionic provides several components to provide App Tabs out of the box, with a deep integration with the Ionic Router for them.",[119,120,123,124,136],"callout",{"color":121,"icon":122},"info","i-lucide-info","Read more about ",[125,126,130,131,135],"a",{"href":127,"rel":128},"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Fapi\u002Ftabs",[129],"nofollow","Ionic's ",[132,133,134],"code",{},"ion-tabs"," here",".",[138,139,141],"h2",{"id":140},"setup-an-application-with-tabs","Setup an application with tabs",[143,144,145],"blockquote",{},[112,146,147,148,153],{},"See the example in ",[125,149,152],{"href":150,"rel":151},"https:\u002F\u002Fgithub.com\u002Fnuxt-modules\u002Fionic\u002Fblob\u002Fmain\u002Fplayground",[129],"the playground"," for a working demo of an app with tabs.",[112,155,156],{},"Tabs require a main tab component, and then child components to be rendered in the tab view.",[112,158,159],{},"Your file structure should look like this:",[161,162,169],"pre",{"className":163,"code":165,"filename":166,"language":167,"meta":168},[164],"language-text","pages\u002F\n--| tabs.vue\n--| tabs\u002F\n----| tab1.vue\n----| tab2.vue\n----| tab3.vue\n----| tab4.vue\n","pages\u002F directory","text","",[132,170,165],{"__ignoreMap":168},[112,172,173,174,177],{},"These tabs should then have a similar code structure as shown below. Remember, all pages must start with an ",[132,175,176],{},"ion-page"," component.",[179,180,181,670,780],"code-group",{},[161,182,187],{"className":183,"code":184,"filename":185,"language":186,"meta":168,"style":168},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cion-page>\n    \u003Cion-content>\n      \u003Cion-tabs>\n        \u003Cion-router-outlet \u002F>\n        \n        \u003Cion-tab-bar slot=\"bottom\">\n          \u003Cion-tab-button tab=\"tab1\" href=\"\u002Ftabs\u002Ftab1\">\n            \u003Cion-icon :icon=\"ioniconsHomeOutline\" \u002F>\n            \u003Cion-label>Tab 1\u003C\u002Fion-label>\n          \u003C\u002Fion-tab-button>\n\n          \u003Cion-tab-button tab=\"tab2\" href=\"\u002Ftabs\u002Ftab2\">\n            \u003Cion-icon :icon=\"ioniconsImagesOutline\" \u002F>\n            \u003Cion-label>Photos\u003C\u002Fion-label>\n          \u003C\u002Fion-tab-button>\n\n          \u003Cion-tab-button tab=\"tab3\" href=\"\u002Ftabs\u002Ftab3\">\n            \u003Cion-icon :icon=\"ioniconsBulbOutline\" \u002F>\n            \u003Cion-label>Tab 3\u003C\u002Fion-label>\n          \u003C\u002Fion-tab-button>\n\n          \u003Cion-tab-button tab=\"tab4\" href=\"\u002Ftabs\u002Ftab4\">\n            \u003Cion-icon :icon=\"ioniconsAccessibilityOutline\" \u002F>\n            \u003Cion-label>Animation examples\u003C\u002Fion-label>\n          \u003C\u002Fion-tab-button>\n        \u003C\u002Fion-tab-bar>\n      \u003C\u002Fion-tabs>\n    \u003C\u002Fion-content>\n  \u003C\u002Fion-page>\n\u003C\u002Ftemplate>\n","pages\u002Ftabs.vue","vue",[132,188,189,205,215,226,236,248,255,281,316,339,360,370,377,408,428,446,455,460,491,511,529,538,543,574,594,612,621,631,641,651,661],{"__ignoreMap":168},[190,191,194,198,202],"span",{"class":192,"line":193},"line",1,[190,195,197],{"class":196},"sMK4o","\u003C",[190,199,201],{"class":200},"swJcz","template",[190,203,204],{"class":196},">\n",[190,206,208,211,213],{"class":192,"line":207},2,[190,209,210],{"class":196},"  \u003C",[190,212,176],{"class":200},[190,214,204],{"class":196},[190,216,218,221,224],{"class":192,"line":217},3,[190,219,220],{"class":196},"    \u003C",[190,222,223],{"class":200},"ion-content",[190,225,204],{"class":196},[190,227,229,232,234],{"class":192,"line":228},4,[190,230,231],{"class":196},"      \u003C",[190,233,134],{"class":200},[190,235,204],{"class":196},[190,237,239,242,245],{"class":192,"line":238},5,[190,240,241],{"class":196},"        \u003C",[190,243,244],{"class":200},"ion-router-outlet",[190,246,247],{"class":196}," \u002F>\n",[190,249,251],{"class":192,"line":250},6,[190,252,254],{"class":253},"sTEyZ","        \n",[190,256,258,260,263,267,270,273,277,279],{"class":192,"line":257},7,[190,259,241],{"class":196},[190,261,262],{"class":200},"ion-tab-bar",[190,264,266],{"class":265},"spNyl"," slot",[190,268,269],{"class":196},"=",[190,271,272],{"class":196},"\"",[190,274,276],{"class":275},"sfazB","bottom",[190,278,272],{"class":196},[190,280,204],{"class":196},[190,282,284,287,290,293,295,297,300,302,305,307,309,312,314],{"class":192,"line":283},8,[190,285,286],{"class":196},"          \u003C",[190,288,289],{"class":200},"ion-tab-button",[190,291,292],{"class":265}," tab",[190,294,269],{"class":196},[190,296,272],{"class":196},[190,298,299],{"class":275},"tab1",[190,301,272],{"class":196},[190,303,304],{"class":265}," href",[190,306,269],{"class":196},[190,308,272],{"class":196},[190,310,311],{"class":275},"\u002Ftabs\u002Ftab1",[190,313,272],{"class":196},[190,315,204],{"class":196},[190,317,319,322,325,328,330,332,335,337],{"class":192,"line":318},9,[190,320,321],{"class":196},"            \u003C",[190,323,324],{"class":200},"ion-icon",[190,326,327],{"class":265}," :icon",[190,329,269],{"class":196},[190,331,272],{"class":196},[190,333,334],{"class":275},"ioniconsHomeOutline",[190,336,272],{"class":196},[190,338,247],{"class":196},[190,340,342,344,347,350,353,356,358],{"class":192,"line":341},10,[190,343,321],{"class":196},[190,345,346],{"class":200},"ion-label",[190,348,349],{"class":196},">",[190,351,352],{"class":253},"Tab 1",[190,354,355],{"class":196},"\u003C\u002F",[190,357,346],{"class":200},[190,359,204],{"class":196},[190,361,363,366,368],{"class":192,"line":362},11,[190,364,365],{"class":196},"          \u003C\u002F",[190,367,289],{"class":200},[190,369,204],{"class":196},[190,371,373],{"class":192,"line":372},12,[190,374,376],{"emptyLinePlaceholder":375},true,"\n",[190,378,380,382,384,386,388,390,393,395,397,399,401,404,406],{"class":192,"line":379},13,[190,381,286],{"class":196},[190,383,289],{"class":200},[190,385,292],{"class":265},[190,387,269],{"class":196},[190,389,272],{"class":196},[190,391,392],{"class":275},"tab2",[190,394,272],{"class":196},[190,396,304],{"class":265},[190,398,269],{"class":196},[190,400,272],{"class":196},[190,402,403],{"class":275},"\u002Ftabs\u002Ftab2",[190,405,272],{"class":196},[190,407,204],{"class":196},[190,409,411,413,415,417,419,421,424,426],{"class":192,"line":410},14,[190,412,321],{"class":196},[190,414,324],{"class":200},[190,416,327],{"class":265},[190,418,269],{"class":196},[190,420,272],{"class":196},[190,422,423],{"class":275},"ioniconsImagesOutline",[190,425,272],{"class":196},[190,427,247],{"class":196},[190,429,431,433,435,437,440,442,444],{"class":192,"line":430},15,[190,432,321],{"class":196},[190,434,346],{"class":200},[190,436,349],{"class":196},[190,438,439],{"class":253},"Photos",[190,441,355],{"class":196},[190,443,346],{"class":200},[190,445,204],{"class":196},[190,447,449,451,453],{"class":192,"line":448},16,[190,450,365],{"class":196},[190,452,289],{"class":200},[190,454,204],{"class":196},[190,456,458],{"class":192,"line":457},17,[190,459,376],{"emptyLinePlaceholder":375},[190,461,463,465,467,469,471,473,476,478,480,482,484,487,489],{"class":192,"line":462},18,[190,464,286],{"class":196},[190,466,289],{"class":200},[190,468,292],{"class":265},[190,470,269],{"class":196},[190,472,272],{"class":196},[190,474,475],{"class":275},"tab3",[190,477,272],{"class":196},[190,479,304],{"class":265},[190,481,269],{"class":196},[190,483,272],{"class":196},[190,485,486],{"class":275},"\u002Ftabs\u002Ftab3",[190,488,272],{"class":196},[190,490,204],{"class":196},[190,492,494,496,498,500,502,504,507,509],{"class":192,"line":493},19,[190,495,321],{"class":196},[190,497,324],{"class":200},[190,499,327],{"class":265},[190,501,269],{"class":196},[190,503,272],{"class":196},[190,505,506],{"class":275},"ioniconsBulbOutline",[190,508,272],{"class":196},[190,510,247],{"class":196},[190,512,514,516,518,520,523,525,527],{"class":192,"line":513},20,[190,515,321],{"class":196},[190,517,346],{"class":200},[190,519,349],{"class":196},[190,521,522],{"class":253},"Tab 3",[190,524,355],{"class":196},[190,526,346],{"class":200},[190,528,204],{"class":196},[190,530,532,534,536],{"class":192,"line":531},21,[190,533,365],{"class":196},[190,535,289],{"class":200},[190,537,204],{"class":196},[190,539,541],{"class":192,"line":540},22,[190,542,376],{"emptyLinePlaceholder":375},[190,544,546,548,550,552,554,556,559,561,563,565,567,570,572],{"class":192,"line":545},23,[190,547,286],{"class":196},[190,549,289],{"class":200},[190,551,292],{"class":265},[190,553,269],{"class":196},[190,555,272],{"class":196},[190,557,558],{"class":275},"tab4",[190,560,272],{"class":196},[190,562,304],{"class":265},[190,564,269],{"class":196},[190,566,272],{"class":196},[190,568,569],{"class":275},"\u002Ftabs\u002Ftab4",[190,571,272],{"class":196},[190,573,204],{"class":196},[190,575,577,579,581,583,585,587,590,592],{"class":192,"line":576},24,[190,578,321],{"class":196},[190,580,324],{"class":200},[190,582,327],{"class":265},[190,584,269],{"class":196},[190,586,272],{"class":196},[190,588,589],{"class":275},"ioniconsAccessibilityOutline",[190,591,272],{"class":196},[190,593,247],{"class":196},[190,595,597,599,601,603,606,608,610],{"class":192,"line":596},25,[190,598,321],{"class":196},[190,600,346],{"class":200},[190,602,349],{"class":196},[190,604,605],{"class":253},"Animation examples",[190,607,355],{"class":196},[190,609,346],{"class":200},[190,611,204],{"class":196},[190,613,615,617,619],{"class":192,"line":614},26,[190,616,365],{"class":196},[190,618,289],{"class":200},[190,620,204],{"class":196},[190,622,624,627,629],{"class":192,"line":623},27,[190,625,626],{"class":196},"        \u003C\u002F",[190,628,262],{"class":200},[190,630,204],{"class":196},[190,632,634,637,639],{"class":192,"line":633},28,[190,635,636],{"class":196},"      \u003C\u002F",[190,638,134],{"class":200},[190,640,204],{"class":196},[190,642,644,647,649],{"class":192,"line":643},29,[190,645,646],{"class":196},"    \u003C\u002F",[190,648,223],{"class":200},[190,650,204],{"class":196},[190,652,654,657,659],{"class":192,"line":653},30,[190,655,656],{"class":196},"  \u003C\u002F",[190,658,176],{"class":200},[190,660,204],{"class":196},[190,662,664,666,668],{"class":192,"line":663},31,[190,665,355],{"class":196},[190,667,201],{"class":200},[190,669,204],{"class":196},[161,671,674],{"className":183,"code":672,"filename":673,"language":186,"meta":168,"style":168},"\u003Ctemplate>\n  \u003Cion-page>\n    \u003Cion-header>\n      \u003Cion-toolbar>\n        \u003Cion-title>Tab 1\u003C\u002Fion-title>\n      \u003C\u002Fion-toolbar>\n    \u003C\u002Fion-header>\n    \u003Cion-content>\n      Tab 1 content\n    \u003C\u002Fion-content>\n  \u003C\u002Fion-page>\n\u003C\u002Ftemplate>\n","pages\u002Ftabs\u002Ftab1.vue",[132,675,676,684,692,701,710,727,735,743,751,756,764,772],{"__ignoreMap":168},[190,677,678,680,682],{"class":192,"line":193},[190,679,197],{"class":196},[190,681,201],{"class":200},[190,683,204],{"class":196},[190,685,686,688,690],{"class":192,"line":207},[190,687,210],{"class":196},[190,689,176],{"class":200},[190,691,204],{"class":196},[190,693,694,696,699],{"class":192,"line":217},[190,695,220],{"class":196},[190,697,698],{"class":200},"ion-header",[190,700,204],{"class":196},[190,702,703,705,708],{"class":192,"line":228},[190,704,231],{"class":196},[190,706,707],{"class":200},"ion-toolbar",[190,709,204],{"class":196},[190,711,712,714,717,719,721,723,725],{"class":192,"line":238},[190,713,241],{"class":196},[190,715,716],{"class":200},"ion-title",[190,718,349],{"class":196},[190,720,352],{"class":253},[190,722,355],{"class":196},[190,724,716],{"class":200},[190,726,204],{"class":196},[190,728,729,731,733],{"class":192,"line":250},[190,730,636],{"class":196},[190,732,707],{"class":200},[190,734,204],{"class":196},[190,736,737,739,741],{"class":192,"line":257},[190,738,646],{"class":196},[190,740,698],{"class":200},[190,742,204],{"class":196},[190,744,745,747,749],{"class":192,"line":283},[190,746,220],{"class":196},[190,748,223],{"class":200},[190,750,204],{"class":196},[190,752,753],{"class":192,"line":318},[190,754,755],{"class":253},"      Tab 1 content\n",[190,757,758,760,762],{"class":192,"line":341},[190,759,646],{"class":196},[190,761,223],{"class":200},[190,763,204],{"class":196},[190,765,766,768,770],{"class":192,"line":362},[190,767,656],{"class":196},[190,769,176],{"class":200},[190,771,204],{"class":196},[190,773,774,776,778],{"class":192,"line":372},[190,775,355],{"class":196},[190,777,201],{"class":200},[190,779,204],{"class":196},[161,781,784],{"className":183,"code":782,"filename":783,"language":186,"meta":168,"style":168},"\u003Ctemplate>\n  \u003Cion-page>\n    \u003Cion-header>\n      \u003Cion-toolbar>\n        \u003Cion-title>Tab 2\u003C\u002Fion-title>\n      \u003C\u002Fion-toolbar>\n    \u003C\u002Fion-header>\n    \u003Cion-content>\n      Tab 2 content\n    \u003C\u002Fion-content>\n  \u003C\u002Fion-page>\n\u003C\u002Ftemplate>\n","pages\u002Ftabs\u002Ftab2.vue",[132,785,786,794,802,810,818,835,843,851,859,864,872,880],{"__ignoreMap":168},[190,787,788,790,792],{"class":192,"line":193},[190,789,197],{"class":196},[190,791,201],{"class":200},[190,793,204],{"class":196},[190,795,796,798,800],{"class":192,"line":207},[190,797,210],{"class":196},[190,799,176],{"class":200},[190,801,204],{"class":196},[190,803,804,806,808],{"class":192,"line":217},[190,805,220],{"class":196},[190,807,698],{"class":200},[190,809,204],{"class":196},[190,811,812,814,816],{"class":192,"line":228},[190,813,231],{"class":196},[190,815,707],{"class":200},[190,817,204],{"class":196},[190,819,820,822,824,826,829,831,833],{"class":192,"line":238},[190,821,241],{"class":196},[190,823,716],{"class":200},[190,825,349],{"class":196},[190,827,828],{"class":253},"Tab 2",[190,830,355],{"class":196},[190,832,716],{"class":200},[190,834,204],{"class":196},[190,836,837,839,841],{"class":192,"line":250},[190,838,636],{"class":196},[190,840,707],{"class":200},[190,842,204],{"class":196},[190,844,845,847,849],{"class":192,"line":257},[190,846,646],{"class":196},[190,848,698],{"class":200},[190,850,204],{"class":196},[190,852,853,855,857],{"class":192,"line":283},[190,854,220],{"class":196},[190,856,223],{"class":200},[190,858,204],{"class":196},[190,860,861],{"class":192,"line":318},[190,862,863],{"class":253},"      Tab 2 content\n",[190,865,866,868,870],{"class":192,"line":341},[190,867,646],{"class":196},[190,869,223],{"class":200},[190,871,204],{"class":196},[190,873,874,876,878],{"class":192,"line":362},[190,875,656],{"class":196},[190,877,176],{"class":200},[190,879,204],{"class":196},[190,881,882,884,886],{"class":192,"line":372},[190,883,355],{"class":196},[190,885,201],{"class":200},[190,887,204],{"class":196},[112,889,890,891,895],{},"All pages that should show inside these tabs must be ",[892,893,894],"strong",{},"sibling routes"," of these initial tab views, but with the name of the tab in its prefix.",[112,897,898,899,902],{},"The simplest way to manage this is for all pages being within this ",[132,900,901],{},"pages\u002Ftabs\u002F"," directory, with a directory per tab, like so:",[161,904,907],{"className":905,"code":906,"filename":166,"language":167,"meta":168},[164],"pages\u002F\n--| tabs.vue\n--| tabs\u002F\n----| tab1\u002F\n------| index.vue\n------| a-page.vue\n----| tab2\u002F\n------| index.vue\n----| tab3\u002F\n------| index.vue\n----| tab4.vue\n------| index.vue\n------| another-page.vue\n",[132,908,906],{"__ignoreMap":168},[112,910,911],{},"If a particular tab only has one route component, you don't explicitly need the directory for it with the index.vue inside\nof it, but we find it's a neater approach this way.",[112,913,914],{},"Using these directories avoids the routes becoming children routes of the tab by accident. The following folder structure is incorrect and would result in children routes, which IonRouter will not serve correctly:",[916,917,919],"list",{"type":918},"danger",[920,921,922],"ul",{},[923,924,925],"li",{},"An example of incorrect routing (do not copy):",[161,927,930],{"className":928,"code":929,"filename":166,"language":167,"meta":168},[164],"pages\u002F\n--| tabs.vue\n--| tabs\u002F\n----| tab1.vue\n----| tab1\u002F\n------| a-page.vue\n----| tab2.vue\n----| tab3.vue\n----| tab4.vue\n----| tab4\u002F\n------| another-page.vue\n",[132,931,929],{"__ignoreMap":168},[119,933,936,937,136],{"color":934,"icon":935},"success","i-lucide-check-circle","Ionic provides an article on ",[125,938,941],{"href":939,"rel":940},"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Fvue\u002Fnavigation#working-with-tabs",[129],"best practices for using tabs in your application",[138,943,945],{"id":944},"routing-to-pages-that-shouldnt-be-displayed-in-the-tabs","Routing to pages that shouldn't be displayed in the tabs",[112,947,948],{},"If you'd like to surface a page on-top of the tabs, rather than inside one of them, you can include the page component outside\nof the tabs directory.",[161,950,953],{"className":951,"code":952,"filename":166,"language":167,"meta":168},[164],"pages\u002F\n--| tabs.vue\n--| tabs\u002F\n----| tab1\u002F\n------| index.vue\n------| a-page.vue\n----| tab2\u002F\n------| index.vue\n--| settings.vue\n",[132,954,952],{"__ignoreMap":168},[916,956,957],{"type":918},[920,958,959],{},[923,960,961,962,965,966,969,970,136],{},"When navigating from a tabbed route to a non-tabbed route, ",[132,963,964],{},"route.params"," from the auto-imported ",[132,967,968],{},"useRoute()"," will always be an empty object. A current workaround is to ",[132,971,972],{},"import { useRoute } from 'vue-router';",[138,974,976],{"id":975},"reusing-views-across-tabs","Reusing views across tabs",[112,978,979],{},"Some apps may require showing the same component in different tabs. For instance, Spotify will allow you to view an album from both the Home and the Search tab.",[112,981,982,983,986],{},"To best accomplish this with Nuxt's file-based routing, create the routes using vue components in ",[132,984,985],{},"pages\u002Ftabs",", and have them include the same component.",[179,988,989,995,1029],{},[161,990,993],{"className":991,"code":992,"filename":166,"language":167,"meta":168},[164],"pages\u002F\n--| tabs.vue\n--| tabs\u002F\n----| home\u002F\n------| index.vue\n------| album-[id].vue\n----| search\u002F\n------| index.vue\n------| album.vue\n----| library\u002F\n------| index.vue\n",[132,994,992],{"__ignoreMap":168},[161,996,1002],{"className":183,"code":997,"filename":998,"highlights":999,"language":186,"meta":1001,"style":168},"\u003Ctemplate>\n  \u003CSingleAlbumView \u002F>\n\u003C\u002Ftemplate>\n","pages\u002Fhome\u002Falbum-{id}.vue",[1000],0,"[pages\u002Fhome\u002Falbum-.vue]",[132,1003,1004,1012,1021],{"__ignoreMap":168},[190,1005,1006,1008,1010],{"class":192,"line":193},[190,1007,197],{"class":196},[190,1009,201],{"class":200},[190,1011,204],{"class":196},[190,1013,1014,1016,1019],{"class":192,"line":207},[190,1015,210],{"class":196},[190,1017,1018],{"class":200},"SingleAlbumView",[190,1020,247],{"class":196},[190,1022,1023,1025,1027],{"class":192,"line":217},[190,1024,355],{"class":196},[190,1026,201],{"class":200},[190,1028,204],{"class":196},[161,1030,1034],{"className":183,"code":997,"filename":1031,"highlights":1032,"language":186,"meta":1033,"style":168},"pages\u002Fsearch\u002Falbum-{id}.vue",[1000],"[pages\u002Fsearch\u002Falbum-.vue]",[132,1035,1036,1044,1052],{"__ignoreMap":168},[190,1037,1038,1040,1042],{"class":192,"line":193},[190,1039,197],{"class":196},[190,1041,201],{"class":200},[190,1043,204],{"class":196},[190,1045,1046,1048,1050],{"class":192,"line":207},[190,1047,210],{"class":196},[190,1049,1018],{"class":200},[190,1051,247],{"class":196},[190,1053,1054,1056,1058],{"class":192,"line":217},[190,1055,355],{"class":196},[190,1057,201],{"class":200},[190,1059,204],{"class":196},[119,1061,123,1062,136],{"color":121,"icon":122},[125,1063,1066],{"href":1064,"rel":1065},"https:\u002F\u002Fionicframework.com\u002Fdocs\u002Fvue\u002Fnavigation#switching-between-tabs",[129],"reusing views across tabs in the Ionic docs",[1068,1069,1070],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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);}",{"title":168,"searchDepth":207,"depth":207,"links":1072},[1073,1074,1075],{"id":140,"depth":207,"text":141},{"id":944,"depth":207,"text":945},{"id":975,"depth":207,"text":976},"md",null,{},{"title":87,"description":168},"Dz9AlSSwwzCyZox_6sC3NLqkqXAs1QWv2CpmhRoKKCk",[1082,1083],{"title":83,"path":84,"stem":85,"description":168,"children":-1},{"title":91,"path":92,"stem":93,"description":168,"children":-1},1779255260377]