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.