feat: add option and interface for @ionic/vue global config (#38)

Author: Hrdtr

docs/content/2.getting-started.md

@@ -75,6 +75,9 @@ export default defineNuxtConfig({
     css: {
       //
     },
+    config: {
+      //
+    }
   },
 })
 ```
@@ -117,3 +120,7 @@ export default defineNuxtConfig({
 
   Default: `false`
   Enable to add extra Ionic CSS utilities.
+
+### `config`
+
+- See [Config Options](https://ionicframework.com/docs/vue/config#config-options)

src/module.ts

@@ -1,6 +1,6 @@
 import { existsSync, promises as fsp } from 'node:fs'
 
-import { defineNuxtModule, addComponent, addPlugin } from '@nuxt/kit'
+import { defineNuxtModule, addComponent, addPlugin, addTemplate } from '@nuxt/kit'
 import { join, resolve } from 'pathe'
 import { readPackageJSON } from 'pkg-types'
 import { defineUnimportPreset } from 'unimport'
@@ -13,6 +13,8 @@ import { setupMeta } from './parts/meta'
 import { setupPWA } from './parts/pwa'
 import { setupRouter } from './parts/router'
 
+import type { AnimationBuilder, SpinnerTypes, PlatformConfig } from '@ionic/vue'
+
 export interface ModuleOptions {
   integrations?: {
     router?: boolean
@@ -25,6 +27,46 @@ export interface ModuleOptions {
     basic?: boolean
     utilities?: boolean
   }
+  config?: {
+    actionSheetEnter?: AnimationBuilder
+    actionSheetLeave?: AnimationBuilder
+    alertEnter?: AnimationBuilder
+    alertLeave?: AnimationBuilder
+    animated?: boolean
+    backButtonIcon?: string
+    backButtonText?: string
+    hardwareBackButton?: boolean
+    infiniteLoadingSpinner?: SpinnerTypes
+    loadingEnter?: AnimationBuilder
+    loadingLeave?: AnimationBuilder
+    loadingSpinner?: SpinnerTypes
+    menuIcon?: string
+    menuType?: string
+    modalEnter?: AnimationBuilder
+    modalLeave?: AnimationBuilder
+    mode?: 'ios' | 'md'
+    navAnimation?: AnimationBuilder
+    pickerEnter?: AnimationBuilder
+    pickerLeave?: AnimationBuilder
+    platform?: PlatformConfig
+    popoverEnter?: AnimationBuilder
+    popoverLeave?: AnimationBuilder
+    refreshingIcon?: string
+    refreshingSpinner?: SpinnerTypes
+    sanitizerEnabled?: boolean
+    spinner?: SpinnerTypes
+    statusTap?: boolean
+    swipeBackEnabled?: boolean
+    tabButtonLayout?:
+      | 'icon-top'
+      | 'icon-start'
+      | 'icon-end'
+      | 'icon-bottom'
+      | 'icon-hide'
+      | 'label-hide'
+    toastEnter?: AnimationBuilder
+    toastLeave?: AnimationBuilder
+  }
 }
 
 export default defineNuxtModule<ModuleOptions>({
@@ -44,12 +86,19 @@ export default defineNuxtModule<ModuleOptions>({
       basic: true,
       utilities: false,
     },
+    config: {},
   },
   async setup(options, nuxt) {
     nuxt.options.build.transpile.push(runtimeDir)
     nuxt.options.build.transpile.push(/@ionic/, /@stencil/)
 
-    // Set up Ionic config
+    // Inject options for the Ionic Vue plugin as a virtual module
+    addTemplate({
+      filename: 'ionic/vue-config.mjs',
+      getContents: () => `export default ${JSON.stringify(options.config)}`,
+    })
+
+    // Set up Ionic config file
     const ionicConfigPath = join(nuxt.options.rootDir, 'ionic.config.json')
     if (!existsSync(ionicConfigPath)) {
       await fsp.writeFile(

src/runtime/ionic.ts

@@ -1,6 +1,8 @@
 import { IonicVue } from '@ionic/vue'
 import { defineNuxtPlugin } from '#imports'
+// @ts-expect-error virtual template
+import ionicVueConfig from '#build/ionic/vue-config.mjs'
 
 export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(IonicVue)
+  nuxtApp.vueApp.use(IonicVue, ionicVueConfig)
 })