Installation

Get started quickly by installing and setting up this module with the following instructions.

Prerequisites

A fresh or existing Nuxt project
Nuxt's prerequisites
Ionic's environment setup
Capacitor's enviroment setup if using iOS or Android

Installation

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

npx nuxi@latest module add ionic

Nuxt Module

Next, add the module to your Nuxt configuration in nuxt.config.ts.

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/ionic'],
  ssr: false,
})

If deploying to iOS or Android, be aware the app must be able to run completely client-side. We recommend setting ssr: false in your nuxt config. Find out more in deploying to both web and device.

Finally, either remove your app.vue file or replace it with a custom one.

Development Server

Now you'll be able to start your Nuxt app in development mode as usual:

yarn

yarn dev -o

Well done! A browser window should automatically open for http://localhost:3000.

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.