Installation

Add @nuxtjs/ionic to your project's dev dependencies:

yarn
yarn add --dev @nuxtjs/ionic
npm
npm install @nuxtjs/ionic -D
pnpm
pnpm install @nuxtjs/ionic -D

Then add the module to your Nuxt configuration:

nuxt.config
export default defineNuxtConfig({  modules: ['@nuxtjs/ionic']})

Finally, either remove your app.vue file or replace it with a custom one (starting with this template).

You're good to go!

The first time you start a Nuxt project with @nuxtjs/ionic enabled, a ionic.config.json file will be created if it doesn't already exist.

Enabling Capacitor

Capacitor is a powerful tool for shipping to native platforms like iOS and Android alongside your web app.

The good news is that it's installed by default with @nuxtjs/ionic, but you will need to enable it and choose what platforms you want to support.

The Ionic CLI is available via npx or can be installed globally with npm install -g @ionic/cli or yarn global add @ionic/cli.

npx @ionic/cli integrations enable capacitor # or ionic integrations enable capacitornpx @ionic/cli capacitor add ios # or ionic capacitor add iosnpx @ionic/cli capacitor add android # or ionic capacitor add android

Run on iOS or Android

Once an Android or iOS project is added with Capacitor, you can run your app on an iOS or Android emulator.

Android Studio and SDK (for Android projects) or XCode (for iOS projects) are required to use the npx cap open or npx cap run command. See the Capacitor Environment Setup docs for details.

To build, sync, and run your app:

  1. Create a web build with npx nuxi generate or npx nuxi build.
  2. Run npx cap sync to update your Capacitor project directories with your latest app build.
  3. Run npx cap run android or npx cap run ios to run the app from the command line using an installed device OR
  4. (Optional) Run npx cap open android or npx cap open ios to open the project in Android Studio or XCode, respectively.

Remember to run npx cap sync after every new build to ensure your Android and/or iOS project is up-to-date.

Options

While not required, you can configure the features that are enabled:

export default defineNuxtConfig({  modules: ['@nuxtjs/ionic'],  ionic: {    integrations: {      //    },    css: {      //    },    config: {      //    }  },})

integrations

  • meta
    Default: true Disable to take full control of meta tags.
  • pwa
    Default: true Disable to take full control of icon generation, manifest and service worker installation.
  • router
    Default: true Disable to configure Ionic Router yourself.
  • icons
    Default: true Disable to stop icons from being auto-imported.

css

  • core
    Default: true Disable to import these CSS files manually.
  • basic
    Default: true Disable to import these CSS files manually.
  • utilities
    Default: false Enable to add extra Ionic CSS utilities.

config

Table of Contents