Getting started

Download & install Ionic and setup Capacitor for usage


Installation

Add nuxt-ionic to your project's dev dependencies:

yarn
yarn add --dev nuxt-ionic
npm
npm install nuxt-ionic -D
pnpm
pnpm install nuxt-ionic -D

Then add the module to your Nuxt configuration:

nuxt.config
import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  modules: ['nuxt-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 nuxt-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 nuxt-ionic, but you will need to enable it and choose what platforms you want to support.

npx @ionic/cli integrations enable capacitor # or yarn ionic integrations add capacitornpx cap add ios # or yarn cap add iosnpx cap add android # or yarn cap add android
After building your Nuxt app with npx nuxi generate, you will need to run npx cap sync to update your Capacitor project directories with your latest app build.

Find out more about how to use Capacitor with Ionic at https://capacitorjs.com/docs/getting-started/with-ionic.

Options

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

import { defineNuxtConfig } from 'nuxt'export default defineNuxtConfig({  modules: ['nuxt-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