Local Development

You may find the Ionic docs on developing for iOS and for Android helpful before continuing.

When using Ionic just for the web, local development is as easy as running the dev script provided by Nuxt:

yarn
yarn dev -o
npm
npm run dev -- -o
pnpm
pnpm dev -o

But when working with iOS and Android, we're required to sync our built project to XCode and Android Studio, using npx cap sync.

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.

Native device or simulator

First, ensure your Nuxt development build is created and the development server is running:

yarn
yarn dev -o
npm
npm run dev -- -o
pnpm
pnpm dev -o

Then, in a separate tab, 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 package.json, and installs any discovered capacitor or cordova plugins.

ios
npx @ionic/cli capacitor sync ios --no-build
android
npx @ionic/cli capacitor sync android --no-build

Then to deploy this to a native device or device simulator with livereload, you can ask Capacitor to run the build. Ensure your native device is plugged in so that it displays in your list.

ios
npx @ionic/cli capacitor run ios --livereload-url=http://${LIP}:3000  --external --mode development
android
npx @ionic/cli capacitor run android --livereload-url=http://${LIP}:3000  --external --mode development

The app will then open on the chosen native device or device simulator.

Automating on-device dev

We recommend putting this into a script in scripts/ that you can run more easily via yarn run or pnpm run. For example:

scripts/android.sh
#!/bin/bashLIP=$(ipconfig getifaddr en0)echo "🍦 Starting local development to android device - ensure local dev server is running already"echo "🏗️ Type checking and building for development..."pnpm run build:devecho "🔃 Capacitor installation, podfile installation, sync and copy to app distribution folders..."npx @ionic/cli capacitor sync android --no-buildecho "🏃 Select an Android device to run the build at local ip address ${LIP} on..."eval "npx @ionic/cli capacitor run android --livereload-url=http://${LIP}:3000  --external --mode development"
scripts/ios.sh
#!/bin/bashLIP=$(ipconfig getifaddr en0)echo "🍦 Starting local development to ios device - ensure local dev server is running already"echo "🏗️ Type checking and building for development..."pnpm run build:devecho "🔃 Capacitor installation, podfile installation, sync and copy to app distribution folders..."npx @ionic/cli capacitor sync ios --no-buildecho "🏃 Select an iOS device to run the build at local ip address ${LIP} on..."eval "npx @ionic/cli capacitor run ios --livereload-url=http://${LIP}:3000  --external --mode development"
package.json
{  "scripts": {    "android": "bash ./scripts/android.sh",    "ios": "bash ./scripts/ios.sh"  }}
yarn
yarn iosyarn android
npm
npm run iosnpm run android
pnpm
pnpm run iospnpm run android
If you're having trouble with this step, please check the Ionic guides for deploying to iOS and deploying to android for more information.
Edit this page on GitHub
Table of Contents