[{"data":1,"prerenderedAt":877},["ShallowReactive",2],{"navigation_docs":3,"-cookbook-local-development":106,"-cookbook-local-development-surround":874},[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":83,"body":108,"description":150,"extension":869,"links":870,"meta":871,"navigation":477,"path":84,"seo":872,"stem":85,"__hash__":873},"docs/3.cookbook/2.local-development.md",{"type":109,"value":110,"toc":865},"minimark",[111,131,140,202,214,217,222,225,267,280,329,338,416,419,423,438,706,784,847,861],[112,113,116,117,124,125,130],"callout",{"color":114,"icon":115},"info","i-lucide-info","You may find the Ionic docs on developing ",[118,119,123],"a",{"href":120,"rel":121},"https://ionicframework.com/docs/developing/ios",[122],"nofollow","for iOS"," and ",[118,126,129],{"href":127,"rel":128},"https://ionicframework.com/docs/developing/android",[122],"for Android"," helpful before continuing.",[132,133,134,135,139],"p",{},"When using Ionic just for the web, local development is as easy as running the ",[136,137,138],"code",{},"dev"," script provided by Nuxt:",[141,142,143,168,188],"code-group",{},[144,145,151],"pre",{"className":146,"code":147,"filename":148,"language":149,"meta":150,"style":150},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","yarn dev -o\n","yarn","bash","",[136,152,153],{"__ignoreMap":150},[154,155,158,161,165],"span",{"class":156,"line":157},"line",1,[154,159,148],{"class":160},"sBMFI",[154,162,164],{"class":163},"sfazB"," dev",[154,166,167],{"class":163}," -o\n",[144,169,172],{"className":146,"code":170,"filename":171,"language":149,"meta":150,"style":150},"npm run dev -- -o\n","npm",[136,173,174],{"__ignoreMap":150},[154,175,176,178,181,183,186],{"class":156,"line":157},[154,177,171],{"class":160},[154,179,180],{"class":163}," run",[154,182,164],{"class":163},[154,184,185],{"class":163}," --",[154,187,167],{"class":163},[144,189,192],{"className":146,"code":190,"filename":191,"language":149,"meta":150,"style":150},"pnpm dev -o\n","pnpm",[136,193,194],{"__ignoreMap":150},[154,195,196,198,200],{"class":156,"line":157},[154,197,191],{"class":160},[154,199,164],{"class":163},[154,201,167],{"class":163},[132,203,204,205,213],{},"But when working with iOS and Android, we're required to sync our built project to XCode and Android Studio, ",[118,206,209,210],{"href":207,"rel":208},"https://capacitorjs.com/docs/cli/commands/sync",[122],"using ",[136,211,212],{},"npx cap sync",".",[132,215,216],{},"This manual process can be tedious, but capacitor provides a way to livereload in development mode. This allows you to test on a native device or a device simulator and maintain the hot module replacement or livereload functionality that you enjoy already with Nuxt on the web.",[218,219,221],"h2",{"id":220},"native-device-or-simulator","Native device or simulator",[132,223,224],{},"First, ensure your Nuxt development build is created and the development server is running:",[141,226,227,239,255],{},[144,228,229],{"className":146,"code":147,"filename":148,"language":149,"meta":150,"style":150},[136,230,231],{"__ignoreMap":150},[154,232,233,235,237],{"class":156,"line":157},[154,234,148],{"class":160},[154,236,164],{"class":163},[154,238,167],{"class":163},[144,240,241],{"className":146,"code":170,"filename":171,"language":149,"meta":150,"style":150},[136,242,243],{"__ignoreMap":150},[154,244,245,247,249,251,253],{"class":156,"line":157},[154,246,171],{"class":160},[154,248,180],{"class":163},[154,250,164],{"class":163},[154,252,185],{"class":163},[154,254,167],{"class":163},[144,256,257],{"className":146,"code":190,"filename":191,"language":149,"meta":150,"style":150},[136,258,259],{"__ignoreMap":150},[154,260,261,263,265],{"class":156,"line":157},[154,262,191],{"class":160},[154,264,164],{"class":163},[154,266,167],{"class":163},[132,268,269,270,275,276,279],{},"Then, in a separate tab, ",[118,271,274],{"href":272,"rel":273},"https://ionicframework.com/docs/cli/commands/capacitor-sync",[122],"sync the build"," to ios or android, based on the device you wish to run it on (or both). This copies the web build and capacitor configuration file into the native platform project, then updates the native plugins referenced in ",[136,277,278],{},"package.json",", and installs any discovered capacitor or cordova plugins.",[141,281,282,308],{},[144,283,286],{"className":146,"code":284,"filename":285,"language":149,"meta":150,"style":150},"npx @ionic/cli capacitor sync ios --no-build\n","ios",[136,287,288],{"__ignoreMap":150},[154,289,290,293,296,299,302,305],{"class":156,"line":157},[154,291,292],{"class":160},"npx",[154,294,295],{"class":163}," @ionic/cli",[154,297,298],{"class":163}," capacitor",[154,300,301],{"class":163}," sync",[154,303,304],{"class":163}," ios",[154,306,307],{"class":163}," --no-build\n",[144,309,312],{"className":146,"code":310,"filename":311,"language":149,"meta":150,"style":150},"npx @ionic/cli capacitor sync android --no-build\n","android",[136,313,314],{"__ignoreMap":150},[154,315,316,318,320,322,324,327],{"class":156,"line":157},[154,317,292],{"class":160},[154,319,295],{"class":163},[154,321,298],{"class":163},[154,323,301],{"class":163},[154,325,326],{"class":163}," android",[154,328,307],{"class":163},[132,330,331,332,337],{},"Then to deploy this to a native device or device simulator with livereload, you can ",[118,333,336],{"href":334,"rel":335},"https://ionicframework.com/docs/cli/commands/capacitor-run",[122],"ask Capacitor to run the build",". Ensure your native device is plugged in so that it displays in your list.",[141,339,340,383],{},[144,341,343],{"className":146,"code":342,"filename":285,"language":149,"meta":150,"style":150},"npx @ionic/cli capacitor run ios --livereload-url=http://${LIP}:3000  --external --mode development\n",[136,344,345],{"__ignoreMap":150},[154,346,347,349,351,353,355,357,360,364,368,371,374,377,380],{"class":156,"line":157},[154,348,292],{"class":160},[154,350,295],{"class":163},[154,352,298],{"class":163},[154,354,180],{"class":163},[154,356,304],{"class":163},[154,358,359],{"class":163}," --livereload-url=http://",[154,361,363],{"class":362},"sMK4o","${",[154,365,367],{"class":366},"sTEyZ","LIP",[154,369,370],{"class":362},"}",[154,372,373],{"class":163},":3000",[154,375,376],{"class":163},"  --external",[154,378,379],{"class":163}," --mode",[154,381,382],{"class":163}," development\n",[144,384,386],{"className":146,"code":385,"filename":311,"language":149,"meta":150,"style":150},"npx @ionic/cli capacitor run android --livereload-url=http://${LIP}:3000  --external --mode development\n",[136,387,388],{"__ignoreMap":150},[154,389,390,392,394,396,398,400,402,404,406,408,410,412,414],{"class":156,"line":157},[154,391,292],{"class":160},[154,393,295],{"class":163},[154,395,298],{"class":163},[154,397,180],{"class":163},[154,399,326],{"class":163},[154,401,359],{"class":163},[154,403,363],{"class":362},[154,405,367],{"class":366},[154,407,370],{"class":362},[154,409,373],{"class":163},[154,411,376],{"class":163},[154,413,379],{"class":163},[154,415,382],{"class":163},[132,417,418],{},"The app will then open on the chosen native device or device simulator.",[218,420,422],{"id":421},"automating-on-device-dev","Automating on-device dev",[132,424,425,426,429,430,433,434,437],{},"We recommend putting this into a script in ",[136,427,428],{},"scripts/"," that you can run more easily via ",[136,431,432],{},"yarn run"," or ",[136,435,436],{},"pnpm run",". For example:",[141,439,440,587],{},[144,441,444],{"className":146,"code":442,"filename":443,"language":149,"meta":150,"style":150},"#!/bin/bash\nLIP=$(ipconfig getifaddr en0)\n\necho \"🍦 Starting local development to android device - ensure local dev server is running already\"\necho \"🏗️ Type checking and building for development...\"\npnpm run build:dev\necho \"🔃 Capacitor installation, podfile installation, sync and copy to app distribution folders...\"\nnpx @ionic/cli capacitor sync android --no-build\necho \"🏃 Select an Android device to run the build at local ip address ${LIP} on...\"\neval \"npx @ionic/cli capacitor run android --livereload-url=http://${LIP}:3000  --external --mode development\"\n","scripts/android.sh",[136,445,446,452,472,479,495,507,517,529,544,565],{"__ignoreMap":150},[154,447,448],{"class":156,"line":157},[154,449,451],{"class":450},"sHwdD","#!/bin/bash\n",[154,453,455,457,460,463,466,469],{"class":156,"line":454},2,[154,456,367],{"class":366},[154,458,459],{"class":362},"=$(",[154,461,462],{"class":160},"ipconfig",[154,464,465],{"class":163}," getifaddr",[154,467,468],{"class":163}," en0",[154,470,471],{"class":362},")\n",[154,473,475],{"class":156,"line":474},3,[154,476,478],{"emptyLinePlaceholder":477},true,"\n",[154,480,482,486,489,492],{"class":156,"line":481},4,[154,483,485],{"class":484},"s2Zo4","echo",[154,487,488],{"class":362}," \"",[154,490,491],{"class":163},"🍦 Starting local development to android device - ensure local dev server is running already",[154,493,494],{"class":362},"\"\n",[154,496,498,500,502,505],{"class":156,"line":497},5,[154,499,485],{"class":484},[154,501,488],{"class":362},[154,503,504],{"class":163},"🏗️ Type checking and building for development...",[154,506,494],{"class":362},[154,508,510,512,514],{"class":156,"line":509},6,[154,511,191],{"class":160},[154,513,180],{"class":163},[154,515,516],{"class":163}," build:dev\n",[154,518,520,522,524,527],{"class":156,"line":519},7,[154,521,485],{"class":484},[154,523,488],{"class":362},[154,525,526],{"class":163},"🔃 Capacitor installation, podfile installation, sync and copy to app distribution folders...",[154,528,494],{"class":362},[154,530,532,534,536,538,540,542],{"class":156,"line":531},8,[154,533,292],{"class":160},[154,535,295],{"class":163},[154,537,298],{"class":163},[154,539,301],{"class":163},[154,541,326],{"class":163},[154,543,307],{"class":163},[154,545,547,549,551,554,556,558,560,563],{"class":156,"line":546},9,[154,548,485],{"class":484},[154,550,488],{"class":362},[154,552,553],{"class":163},"🏃 Select an Android device to run the build at local ip address ",[154,555,363],{"class":362},[154,557,367],{"class":366},[154,559,370],{"class":362},[154,561,562],{"class":163}," on...",[154,564,494],{"class":362},[154,566,568,571,573,576,578,580,582,585],{"class":156,"line":567},10,[154,569,570],{"class":484},"eval",[154,572,488],{"class":362},[154,574,575],{"class":163},"npx @ionic/cli capacitor run android --livereload-url=http://",[154,577,363],{"class":362},[154,579,367],{"class":366},[154,581,370],{"class":362},[154,583,584],{"class":163},":3000  --external --mode development",[154,586,494],{"class":362},[144,588,591],{"className":146,"code":589,"filename":590,"language":149,"meta":150,"style":150},"#!/bin/bash\nLIP=$(ipconfig getifaddr en0)\n\necho \"🍦 Starting local development to ios device - ensure local dev server is running already\"\necho \"🏗️ Type checking and building for development...\"\npnpm run build:dev\necho \"🔃 Capacitor installation, podfile installation, sync and copy to app distribution folders...\"\nnpx @ionic/cli capacitor sync ios --no-build\necho \"🏃 Select an iOS device to run the build at local ip address ${LIP} on...\"\neval \"npx @ionic/cli capacitor run ios --livereload-url=http://${LIP}:3000  --external --mode development\"\n","scripts/ios.sh",[136,592,593,597,611,615,626,636,644,654,668,687],{"__ignoreMap":150},[154,594,595],{"class":156,"line":157},[154,596,451],{"class":450},[154,598,599,601,603,605,607,609],{"class":156,"line":454},[154,600,367],{"class":366},[154,602,459],{"class":362},[154,604,462],{"class":160},[154,606,465],{"class":163},[154,608,468],{"class":163},[154,610,471],{"class":362},[154,612,613],{"class":156,"line":474},[154,614,478],{"emptyLinePlaceholder":477},[154,616,617,619,621,624],{"class":156,"line":481},[154,618,485],{"class":484},[154,620,488],{"class":362},[154,622,623],{"class":163},"🍦 Starting local development to ios device - ensure local dev server is running already",[154,625,494],{"class":362},[154,627,628,630,632,634],{"class":156,"line":497},[154,629,485],{"class":484},[154,631,488],{"class":362},[154,633,504],{"class":163},[154,635,494],{"class":362},[154,637,638,640,642],{"class":156,"line":509},[154,639,191],{"class":160},[154,641,180],{"class":163},[154,643,516],{"class":163},[154,645,646,648,650,652],{"class":156,"line":519},[154,647,485],{"class":484},[154,649,488],{"class":362},[154,651,526],{"class":163},[154,653,494],{"class":362},[154,655,656,658,660,662,664,666],{"class":156,"line":531},[154,657,292],{"class":160},[154,659,295],{"class":163},[154,661,298],{"class":163},[154,663,301],{"class":163},[154,665,304],{"class":163},[154,667,307],{"class":163},[154,669,670,672,674,677,679,681,683,685],{"class":156,"line":546},[154,671,485],{"class":484},[154,673,488],{"class":362},[154,675,676],{"class":163},"🏃 Select an iOS device to run the build at local ip address ",[154,678,363],{"class":362},[154,680,367],{"class":366},[154,682,370],{"class":362},[154,684,562],{"class":163},[154,686,494],{"class":362},[154,688,689,691,693,696,698,700,702,704],{"class":156,"line":567},[154,690,570],{"class":484},[154,692,488],{"class":362},[154,694,695],{"class":163},"npx @ionic/cli capacitor run ios --livereload-url=http://",[154,697,363],{"class":362},[154,699,367],{"class":366},[154,701,370],{"class":362},[154,703,584],{"class":163},[154,705,494],{"class":362},[144,707,711],{"className":708,"code":709,"filename":278,"language":710,"meta":150,"style":150},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"scripts\": {\n    \"android\": \"bash ./scripts/android.sh\",\n    \"ios\": \"bash ./scripts/ios.sh\"\n  }\n}\n","json",[136,712,713,718,736,757,774,779],{"__ignoreMap":150},[154,714,715],{"class":156,"line":157},[154,716,717],{"class":362},"{\n",[154,719,720,723,727,730,733],{"class":156,"line":454},[154,721,722],{"class":362},"  \"",[154,724,726],{"class":725},"spNyl","scripts",[154,728,729],{"class":362},"\"",[154,731,732],{"class":362},":",[154,734,735],{"class":362}," {\n",[154,737,738,741,743,745,747,749,752,754],{"class":156,"line":474},[154,739,740],{"class":362},"    \"",[154,742,311],{"class":160},[154,744,729],{"class":362},[154,746,732],{"class":362},[154,748,488],{"class":362},[154,750,751],{"class":163},"bash ./scripts/android.sh",[154,753,729],{"class":362},[154,755,756],{"class":362},",\n",[154,758,759,761,763,765,767,769,772],{"class":156,"line":481},[154,760,740],{"class":362},[154,762,285],{"class":160},[154,764,729],{"class":362},[154,766,732],{"class":362},[154,768,488],{"class":362},[154,770,771],{"class":163},"bash ./scripts/ios.sh",[154,773,494],{"class":362},[154,775,776],{"class":156,"line":497},[154,777,778],{"class":362},"  }\n",[154,780,781],{"class":156,"line":509},[154,782,783],{"class":362},"}\n",[141,785,786,805,826],{},[144,787,789],{"className":146,"code":788,"filename":148,"language":149,"meta":150,"style":150},"yarn ios\nyarn android\n",[136,790,791,798],{"__ignoreMap":150},[154,792,793,795],{"class":156,"line":157},[154,794,148],{"class":160},[154,796,797],{"class":163}," ios\n",[154,799,800,802],{"class":156,"line":454},[154,801,148],{"class":160},[154,803,804],{"class":163}," android\n",[144,806,808],{"className":146,"code":807,"filename":171,"language":149,"meta":150,"style":150},"npm run ios\nnpm run android\n",[136,809,810,818],{"__ignoreMap":150},[154,811,812,814,816],{"class":156,"line":157},[154,813,171],{"class":160},[154,815,180],{"class":163},[154,817,797],{"class":163},[154,819,820,822,824],{"class":156,"line":454},[154,821,171],{"class":160},[154,823,180],{"class":163},[154,825,804],{"class":163},[144,827,829],{"className":146,"code":828,"filename":191,"language":149,"meta":150,"style":150},"pnpm run ios\npnpm run android\n",[136,830,831,839],{"__ignoreMap":150},[154,832,833,835,837],{"class":156,"line":157},[154,834,191],{"class":160},[154,836,180],{"class":163},[154,838,797],{"class":163},[154,840,841,843,845],{"class":156,"line":454},[154,842,191],{"class":160},[154,844,180],{"class":163},[154,846,804],{"class":163},[112,848,851,852,124,856,860],{"color":849,"icon":850},"warning","i-lucide-alert-triangle","If you're having trouble with this step, please check the Ionic guides for ",[118,853,855],{"href":120,"rel":854},[122],"deploying to iOS",[118,857,859],{"href":127,"rel":858},[122],"deploying to android"," for more information.",[862,863,864],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":150,"searchDepth":454,"depth":454,"links":866},[867,868],{"id":220,"depth":454,"text":221},{"id":421,"depth":454,"text":422},"md",null,{},{"description":150},"WJmbMbE2Q0fGDmSl9bY7U8C0DbO4r1ognnTWxUvzy2w",[875,876],{"title":80,"path":75,"stem":81,"description":150,"children":-1},{"title":87,"path":88,"stem":89,"description":150,"children":-1},1775601896862]