diff --git a/docs/content/2.getting-started.md b/docs/content/2.getting-started.md index a3bfab93..440c660c 100644 --- a/docs/content/2.getting-started.md +++ b/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) diff --git a/src/module.ts b/src/module.ts index c1c0931e..924a6908 100644 --- a/src/module.ts +++ b/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({ @@ -44,12 +86,19 @@ export default defineNuxtModule({ 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( diff --git a/src/runtime/ionic.ts b/src/runtime/ionic.ts index a6497ac2..b26a2f6d 100644 --- a/src/runtime/ionic.ts +++ b/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) })