Installation
Add @nuxtjs/ionic
to your project's dev dependencies:
yarn add --dev @nuxtjs/ionic
Then add the module to your Nuxt configuration:
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!
@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 withnpm install -g @ionic/cli
oryarn 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.
npx cap open
or npx cap run
command. See the Capacitor Environment Setup docs for details.To build, sync, and run your app:
- Create a web build with
npx nuxi generate
ornpx nuxi build
. - Run
npx cap sync
to update your Capacitor project directories with your latest app build. - Run
npx cap run android
ornpx cap run ios
to run the app from the command line using an installed device OR - (Optional) Run
npx cap open android
ornpx 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
- See Config Options