3.configuration.md

navigation.icon	uil:wrench

Configuration

This module provides configuration options for itself, as well as passing through configuration for ionic.

Configuration for capacitor is set in the usual way, via capacitor.config.ts.

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.

• 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

  • ionicons

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

  • svg

  Custom SVG icons and automatic detection with nested folders and icon size optimization in assets/ionic-icons path. ::alert{type="warning"} ⚠️ Note: Please put all the necessary SVG files in the assets/ionic-icons folder before you run your project. Because when a file is added/deleted in this path, your project will be rerendered again. ::

  • enable

  Default: true

  Disable to stop svg from being auto-imported.

  • directoryAsNamespace

  Default: true

  Disable to stop svg 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',
      // ...
    },
  },
})

::alert{type="info"} Please see the Ionic Config Options for available keys, values and examples of how they work. ::

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.

::alert{type="info"} Please see the Capacitor Config docs for more information. ::