Configuration

Module Config

This module exposes three keys for configuration: integrations, css and config:

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

integrations

Integrations control which other modules this module should enable and setup from the list below. Disabling them allows you to remove them, or gives you the option to set them up yourself.

• meta

Default: true
Disable to take full control of meta tags.

• router

Default: true
Disable to configure Ionic Router yourself.

• icons

Default: true
Disable to stop icons from being auto-imported.

css

Configure which Ionic stylesheets are automatically added to your application. For more information about these stylesheets, see the Ionic Documentation for Stylesheets.

• core

Default: true
Disable to import these CSS files manually:

• @ionic/vue/css/core.css
• basic

Default: true
Disable to import these CSS files manually:

• @ionic/vue/css/normalize.css
• @ionic/vue/css/structure.css
• @ionic/vue/css/typography.css
• utilities

Default: false
Enable to add extra Ionic CSS utilities:

• @ionic/vue/css/padding.css
• @ionic/vue/css/float-elements.css
• @ionic/vue/css/text-alignment.css
• @ionic/vue/css/text-transformation.css
• @ionic/vue/css/flex-utils.css
• @ionic/vue/css/display.css

config

Configure Ionic components globally across your app, such as app mode, tab button layout, etc. For example:

export default defineNuxtConfig({
  ionic: {
    config: {
      rippleEffect: false,
      mode: 'md',
      // ...
    },
  },
})

Capacitor Config

Capacitor is configured via the capacitor.config.ts file - this is only required if you are targeting native devices such as iOS or Android.