[{"data":1,"prerenderedAt":399},["ShallowReactive",2],{"navigation_docs":3,"-get-started-watch-outs":106,"-get-started-watch-outs-surround":395},[4,36,72],{"title":5,"icon":6,"redirect":7,"path":8,"stem":9,"children":10,"page":35},"Get Started","heroicons-outline:star","/get-started/introduction","/get-started","1.get-started",[11,15,20,25,30],{"title":12,"path":7,"stem":13,"icon":14},"Introduction","1.get-started/1.introduction","uil:info-circle",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/get-started/installation","1.get-started/2.installation","uil:play-circle",{"title":21,"path":22,"stem":23,"icon":24},"Configuration","/get-started/configuration","1.get-started/3.configuration","uil:wrench",{"title":26,"path":27,"stem":28,"icon":29},"Enabling Capacitor","/get-started/enabling-capacitor","1.get-started/4.enabling-capacitor","nonicons:capacitor-16",{"title":31,"path":32,"stem":33,"icon":34},"Watchouts","/get-started/watch-outs","1.get-started/5.watch-outs","uil:exclamation-triangle",false,{"title":37,"icon":38,"redirect":39,"path":40,"stem":41,"children":42,"page":35},"Overview","heroicons-outline:sparkles","/overview/routing","/overview","2.overview",[43,47,52,57,62,67],{"title":44,"path":39,"stem":45,"icon":46},"Routing","2.overview/1.routing","uil:sign-alt",{"title":48,"path":49,"stem":50,"icon":51},"Theming","/overview/theming","2.overview/2.theming","uil:palette",{"title":53,"path":54,"stem":55,"icon":56},"Ionic Auto-Imports","/overview/ionic-auto-imports","2.overview/3.ionic-auto-imports","uil:channel",{"title":58,"path":59,"stem":60,"icon":61},"Module Utilities","/overview/module-utilities","2.overview/4.module-utilities","uil:layer-group",{"title":63,"path":64,"stem":65,"icon":66},"Icons","/overview/icons","2.overview/5.icons","uil:illustration",{"title":68,"path":69,"stem":70,"icon":71},"Deployment","/overview/deployment","2.overview/6.deployment","uil:rocket",{"title":73,"icon":74,"redirect":75,"path":76,"stem":77,"children":78,"page":35},"Cookbook","heroicons-outline:bookmark-alt","/cookbook/customising-app-vue","/cookbook","3.cookbook",[79,82,86,90,94,98,102],{"title":80,"path":75,"stem":81},"Customising app.vue","3.cookbook/1.customising-app-vue",{"title":83,"path":84,"stem":85},"Local Development","/cookbook/local-development","3.cookbook/2.local-development",{"title":87,"path":88,"stem":89},"App Tabs","/cookbook/app-tabs","3.cookbook/3.app-tabs",{"title":91,"path":92,"stem":93},"useHead / Page Meta","/cookbook/page-metadata","3.cookbook/4.page-metadata",{"title":95,"path":96,"stem":97},"iOS and Android Apps","/cookbook/creating-ios-android-apps","3.cookbook/5.creating-ios-android-apps",{"title":99,"path":100,"stem":101},"Web And Device","/cookbook/web-and-device","3.cookbook/6.web-and-device",{"title":103,"path":104,"stem":105},"Live Updates","/cookbook/live-updates","3.cookbook/7.live-updates",{"id":107,"title":31,"body":108,"description":170,"extension":389,"links":390,"meta":391,"navigation":392,"path":32,"seo":393,"stem":33,"__hash__":394},"docs/1.get-started/5.watch-outs.md",{"type":109,"value":110,"toc":384},"minimark",[111,115,120,144,163,232,243,249,264,270,280,284,287,294,297,306,309,357,361,368,374,380],[112,113,114],"p",{},"This page aims to succinctly mention things to watch out for when building your Nuxt-powered Ionic application, particularly for those familiar with regular Nuxt and Vue applications.",[116,117,119],"h2",{"id":118},"pages-and-navigation","Pages and Navigation",[121,122,124],"list",{"type":123},"warning",[125,126,127],"ul",{},[128,129,130,131,135,136,139,140,143],"li",{},"Avoid using ",[132,133,134],"code",{},"\u003CNuxtPage>",", ",[132,137,138],{},"\u003CNuxtLayout>"," or ",[132,141,142],{},"\u003CNuxtLink>",". These are currently not integrated with this module.",[112,145,146,147,150,151,154,155,158,159,162],{},"Instead, Ionic expects ",[132,148,149],{},"\u003Cion-router-outlet>"," to show the route component, and ",[132,152,153],{},"useIonRouter()"," or the ",[132,156,157],{},"router-link"," property on any ",[132,160,161],{},"ion-"," component to change page.",[164,165,171],"pre",{"className":166,"code":167,"filename":168,"language":169,"meta":170,"style":170},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cion-app>\n    \u003Cion-router-outlet />\n  \u003C/ion-app>\n\u003C/template>\n","app.vue","vue","",[132,172,173,189,200,212,222],{"__ignoreMap":170},[174,175,178,182,186],"span",{"class":176,"line":177},"line",1,[174,179,181],{"class":180},"sMK4o","\u003C",[174,183,185],{"class":184},"swJcz","template",[174,187,188],{"class":180},">\n",[174,190,192,195,198],{"class":176,"line":191},2,[174,193,194],{"class":180},"  \u003C",[174,196,197],{"class":184},"ion-app",[174,199,188],{"class":180},[174,201,203,206,209],{"class":176,"line":202},3,[174,204,205],{"class":180},"    \u003C",[174,207,208],{"class":184},"ion-router-outlet",[174,210,211],{"class":180}," />\n",[174,213,215,218,220],{"class":176,"line":214},4,[174,216,217],{"class":180},"  \u003C/",[174,219,197],{"class":184},[174,221,188],{"class":180},[174,223,225,228,230],{"class":176,"line":224},5,[174,226,227],{"class":180},"\u003C/",[174,229,185],{"class":184},[174,231,188],{"class":180},[121,233,234],{"type":123},[125,235,236],{},[128,237,238,239,242],{},"The root element of every page must always be ",[132,240,241],{},"\u003Cion-page>",".",[112,244,245,246,248],{},"This is required by Ionic to set up page transitions and stack navigation. Each view that is navigated to using the router must include an ",[132,247,241],{}," component.",[121,250,251],{"type":123},[125,252,253],{},[128,254,255,256,259,260,263],{},"When navigating from a tabbed route to a non-tabbed route, ",[132,257,258],{},"route.params"," from the auto-imported ",[132,261,262],{},"useRoute()"," will always be an empty object.",[112,265,266,267,242],{},"A current workaround is to ",[132,268,269],{},"import { useRoute } from 'vue-router';",[271,272,275,276,242],"callout",{"color":273,"icon":274},"info","i-lucide-info","Read more ",[277,278,279],"a",{"href":39},"about routing here",[116,281,283],{"id":282},"lifecycle-hooks","Lifecycle Hooks",[112,285,286],{},"Ionic handles lifecycle events slightly differently to Vue, as it persists some components in the DOM when Vue would usually unmount them.",[112,288,289,290,293],{},"This means the various mounted hooks, e.g. ",[132,291,292],{},"onBeforeMount",", may not be called when you would expect them to.",[112,295,296],{},"To help with this, Ionic has added extra lifecycle hooks which behave how you may have expected the mounted hooks to behave.",[271,298,299,300,242],{"color":273,"icon":274},"Read about the ",[277,301,305],{"href":302,"rel":303},"https://ionicframework.com/docs/vue/lifecycle",[304],"nofollow","Ionic Vue lifecycle hooks here",[112,307,308],{},"Because of this, some expected functionality from Nuxt or other modules may not work or may require changes to get functioning:",[121,310,311],{"type":123},[125,312,313,333],{},[128,314,315,242,323,326,327,330,331],{},[316,317,318,319,322],"strong",{},"The composable ",[132,320,321],{},"useHead()"," will not work out of the box",[324,325],"br",{},"\nSee ",[277,328,329],{"href":92},"our cookbook page"," for how to continue using ",[132,332,321],{},[128,334,335,242,338,340,341,135,344,347,348,351,352,242],{},[316,336,337],{},"Certain Vue Router components should not be used",[324,339],{},"\nThis includes ",[132,342,343],{},"\u003Ckeep-alive>",[132,345,346],{},"\u003Ctransition>",", and ",[132,349,350],{},"\u003Crouter-view>"," - ",[277,353,356],{"href":354,"rel":355},"https://ionicframework.com/docs/vue/lifecycle#how-ionic-framework-handles-the-life-of-a-page",[304],"read more here",[116,358,360],{"id":359},"no-serverside-rendering","No serverside rendering",[121,362,363],{"type":123},[125,364,365],{},[128,366,367],{},"The application code cannot contain any serverside rendering.",[112,369,370,371,242],{},"When targeting iOS or Android devices, the build must be able to run completely on the clientside. We discuss ",[277,372,373],{"href":100},"solutions for if you're targeting both web and device here",[271,375,376,377,242],{"color":273,"icon":274},"Learn more about ",[277,378,379],{"href":96},"building for native devices here",[381,382,383],"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 .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":170,"searchDepth":191,"depth":191,"links":385},[386,387,388],{"id":118,"depth":191,"text":119},{"id":282,"depth":191,"text":283},{"id":359,"depth":191,"text":360},"md",null,{},{"icon":34},{"title":31,"description":170},"e1DEiin7aM-RRbfzr_DnznKYRQ2E88uU3N6W2F1Qd0I",[396,397],{"title":26,"path":27,"stem":28,"description":170,"icon":29,"children":-1},{"title":44,"path":39,"stem":45,"description":398,"icon":46,"children":-1},"Routing within your Nuxt Ionic application will feel very similar, but with a couple of differences.",1775601896862]