[{"data":1,"prerenderedAt":240},["ShallowReactive",2],{"navigation_docs":3,"-cookbook-web-and-device":106,"-cookbook-web-and-device-surround":237},[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":99,"body":108,"description":221,"extension":231,"links":232,"meta":233,"navigation":234,"path":100,"seo":235,"stem":101,"__hash__":236},"docs/3.cookbook/6.web-and-device.md",{"type":109,"value":110,"toc":222},"minimark",[111,115,120,123,126,155,163,166,170,173,176,181,191,197,201,209,212],[112,113,114],"p",{},"Here we talk a little about some differences in deploying to native devices over the web, and what is required from the codebase to do so. We then explore some potential solutions to solve these issues.",[116,117,119],"h2",{"id":118},"building-for-native-devices","Building for native devices",[112,121,122],{},"One main caveat of building for native devices is that the final build needs to be able to run completely\nclientside. Another is that deploying a new build requires submitting to the app stores and being manually reviewed and approved.",[112,124,125],{},"This makes building for devices more cumbersome than deploying to the web, and means the following must be followed when deploying:",[127,128,130],"list",{"type":129},"danger",[131,132,133,144],"ul",{},[134,135,136,140,143],"li",{},[137,138,139],"strong",{},"No serverside rendering in the codebase",[141,142],"br",{},"\nAs the build must be able to run completely clientside, we cannot have serverside rendering in the codebase.",[134,145,146,149,151,152,154],{},[137,147,148],{},"Generating new builds are not quickly deployed",[141,150],{},"\nA common paradigm on the web is to use serverside generation to build an app from stable data, then push the bundle to the web. This is then re-generated based on CMS changes or other triggers to ensure a static site that can stay up-to-date.",[141,153],{},"As deploying to the app stores is much slower than to the web, this approach likely will not work anymore.",[112,156,157,158,162],{},"This means, in the codebase that will be deployed to the devices, we recommend using ",[159,160,161],"code",{},"ssr: false",", and not using serverside rendering at all.",[112,164,165],{},"If serverside rendering is required on the web, the simplest solution is to create two Nuxt projects: one targeting the web with SSR/SSG, and one targeting devices.",[116,167,169],{"id":168},"further-solutions","Further Solutions",[112,171,172],{},"Having two completely separate codebases to target web and device is a little cumbersome, so there are some potential solutions you could explore.",[112,174,175],{},"These solutions are outside of the scope of this module, but are provided as guidance on improving your own DX in these cases. We'd love to hear about if you implement these successfully.",[177,178,180],"h3",{"id":179},"a-single-codebase","A single codebase",[112,182,183,184,187,188,190],{},"It may be possible to have a single codebase with both SSR and a fully static application in-tandem, with code-switching based on configuration. E.G. when building for the web, setting ",[159,185,186],{},"ssr: true",", and when building for devices, setting ",[159,189,161],{},".",[112,192,193,194,190],{},"You may need further wrapping around other SSR-aware code and utilities, such as ",[159,195,196],{},"useAsyncData()",[177,198,200],{"id":199},"a-monorepo","A monorepo",[112,202,203,204,206,207,190],{},"You would likely be able to reduce the burden of two separate Nuxt apps by utilising a monorepo. The majority of your shared code could exist within a core package, while having two Nuxt apps, one to target Web with ",[159,205,186],{}," and one to target devices with ",[159,208,161],{},[112,210,211],{},"A possible directory structure for this may look like:",[213,214,219],"pre",{"className":215,"code":217,"language":218},[216],"language-text","- apps\n  - nuxt-web\n    - ...\n    - nuxt.config.ts\n  - nuxt-device\n    - ...\n    - nuxt.config.ts\n- packages\n  - core\n    - components\n    - composables\n    - ...\n","text",[159,220,217],{"__ignoreMap":221},"",{"title":221,"searchDepth":223,"depth":223,"links":224},2,[225,226],{"id":118,"depth":223,"text":119},{"id":168,"depth":223,"text":169,"children":227},[228,230],{"id":179,"depth":229,"text":180},3,{"id":199,"depth":229,"text":200},"md",null,{},true,{"description":221},"mcdKFJqjPg487dwVnxcpzDPS0GWQJrAh2v4I6c-e_Ik",[238,239],{"title":95,"path":96,"stem":97,"description":221,"children":-1},{"title":103,"path":104,"stem":105,"description":221,"children":-1},1775601896862]