[{"data":1,"prerenderedAt":272},["ShallowReactive",2],{"navigation_docs":3,"-cookbook-customising-app-vue":106,"-cookbook-customising-app-vue-surround":269},[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":80,"body":108,"description":132,"extension":263,"links":264,"meta":265,"navigation":266,"path":75,"seo":267,"stem":81,"__hash__":268},"docs/3.cookbook/1.customising-app-vue.md",{"type":109,"value":110,"toc":260},"minimark",[111,120,126,194,200,205,219,232,245,256],[112,113,114,115,119],"p",{},"This module provides a default ",[116,117,118],"code",{},"app.vue"," file for when one is not otherwise provided by your app.",[112,121,122,123,125],{},"If you need to customize this ",[116,124,118],{}," file, you can create a new one in your project's source directory, based off the default:",[127,128,133],"pre",{"className":129,"code":130,"filename":118,"language":131,"meta":132,"style":132},"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","vue","",[116,134,135,151,162,174,184],{"__ignoreMap":132},[136,137,140,144,148],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sMK4o","\u003C",[136,145,147],{"class":146},"swJcz","template",[136,149,150],{"class":142},">\n",[136,152,154,157,160],{"class":138,"line":153},2,[136,155,156],{"class":142},"  \u003C",[136,158,159],{"class":146},"ion-app",[136,161,150],{"class":142},[136,163,165,168,171],{"class":138,"line":164},3,[136,166,167],{"class":142},"    \u003C",[136,169,170],{"class":146},"ion-router-outlet",[136,172,173],{"class":142}," />\n",[136,175,177,180,182],{"class":138,"line":176},4,[136,178,179],{"class":142},"  \u003C/",[136,181,159],{"class":146},[136,183,150],{"class":142},[136,185,187,190,192],{"class":138,"line":186},5,[136,188,189],{"class":142},"\u003C/",[136,191,147],{"class":146},[136,193,150],{"class":142},[112,195,196,197,199],{},"This module will then stop providing one, so that your project's ",[116,198,118],{}," is used instead.",[201,202,204],"h2",{"id":203},"necessary-ion-tags","Necessary ion tags",[112,206,207,208,211,212,215,216,218],{},"It's necessary that ",[116,209,210],{},"\u003Cion-app>"," and ",[116,213,214],{},"\u003Cion-router-outlet>"," are provided in your ",[116,217,118],{}," for Ionic to function.",[112,220,221,223,224,231],{},[116,222,210],{}," is the container element of Ionic - there should be only one per project - and is required for certain behaviours to work. Please see the ",[225,226,230],"a",{"href":227,"rel":228},"https://ionicframework.com/docs/api/app",[229],"nofollow","Ionic ion-app documentation"," for more info.",[112,233,234,235,237,238,241,242,244],{},"Equally, ",[116,236,214],{}," provides a mounting point for the route component. In regular Nuxt applications,\nthis would be ",[116,239,240],{},"\u003CNuxtPage />",", but as Ionic Router is handling our routing we must use the ",[116,243,214],{},".",[246,247,250,251,244],"callout",{"color":248,"icon":249},"warning","i-lucide-alert-triangle","Remember that app.vue acts as the main component of your Nuxt application. Anything you add to it (JS and CSS) will be global and included in every page. Read more about app.vue ",[225,252,255],{"href":253,"rel":254},"https://nuxt.com/docs/guide/directory-structure/app",[229],"in the Nuxt app.vue docs",[257,258,259],"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":132,"searchDepth":153,"depth":153,"links":261},[262],{"id":203,"depth":153,"text":204},"md",null,{},true,{"title":80,"description":132},"JfSU_nxjLLidOE3GC-hxIQEGczDxoTgOdQScdrtEbF8",[270,271],{"title":68,"path":69,"stem":70,"description":132,"icon":71,"children":-1},{"title":83,"path":84,"stem":85,"description":132,"children":-1},1775601896862]