feat!: move base options from nuxt config to app config

Author: stafyniaksacha

README.md

@@ -147,20 +147,15 @@ $nt.show({
 > **note:** the `theme` property is used to customize the toaster behavior. Each `theme.containerId` will have their own context (e.g. the `maxToasts` will count how many toaster are visible in the container with matching id).
 
 
-### Using `@cssninja/nuxt-toaster` module options
+### Using `toaster` app config
 
-To avoid to repeat yourself, you can set defaults values for ninjaToaster.show method in the module options.
+To avoid to repeat yourself, you can set defaults values for ninjaToaster.show method in the nuxt `app.config.ts` at the root of your project.
 
 ```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: [
-    '@cssninja/nuxt-toaster'
-  ],
+// app.config.ts
+export default defineAppConfig({
   toaster: {
-    base: {
-      // default options for ninjaToaster.show
-    }
+    // default options for ninjaToaster.show
   }
 })
 ```

playground/app.config.ts

@@ -0,0 +1,5 @@
+export default defineAppConfig({
+  toaster: {
+    maxToasts: 5
+  }
+})

playground/nuxt.config.ts

@@ -3,7 +3,6 @@ import NinjaNuxtToaster from '..'
 
 export default defineNuxtConfig({
   modules: [NinjaNuxtToaster],
-  toaster: {},
   app: {
     head: {
       script: [

src/module.ts

@@ -4,17 +4,25 @@ import { addImports, addPlugin, defineNuxtModule } from '@nuxt/kit'
 import type { NinjaToasterBaseProps } from './props'
 
 export interface ModuleOptions {
-  base?: NinjaToasterBaseProps
   installPlugin?: boolean
 }
 
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    /** nuxt-icon configuration */
+    toaster?: NinjaToasterBaseProps
+  }
+}
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: '@cssninja/nuxt-toaster',
-    configKey: 'toaster'
+    configKey: 'toaster',
+    compatibility: {
+      nuxt: '^3.0.0-rc.9'
+    }
   },
   defaults: {
-    base: {},
     installPlugin: true
   },
   setup(options, nuxt) {
@@ -40,7 +48,5 @@ export default defineNuxtModule<ModuleOptions>({
     if (options.installPlugin) {
       addPlugin(resolve(runtimeDir, 'plugin'))
     }
-
-    nuxt.options.runtimeConfig.public.nt = options.base as any
   }
 })

src/runtime/components/NinjaToaster.ts

@@ -143,6 +143,7 @@ export default defineComponent({
       })
     }
 
+    // @todo: check if nested element has focus, then pause the timer
     function onMouseover() {
       isHovered.value = true
       toggleTimer(true)

src/runtime/create.ts

@@ -7,11 +7,9 @@ import type { NinjaToasterRenderQueue } from './queue'
 import { type NinjaToastEventBus, createEventBus } from './events'
 import NinjaToaster from './components/NinjaToaster'
 
-// @ts-expect-error - Nuxt 3 auto-imports
-import { useNuxtApp, useRuntimeConfig } from '#app'
+import { useAppConfig, useNuxtApp, useRuntimeConfig } from '#imports'
 
 function createElement() {
-  // @ts-expect-error - Nuxt 3 context
   if (process.server) {
     return null
   }
@@ -51,7 +49,7 @@ export function createNinjaToaster(
   const queues: Map<string, NinjaToasterRenderQueue> = new Map()
 
   function show(options: NinjaToasterProps | string | number) {
-    const config = useRuntimeConfig()
+    const appConfigProps = (useAppConfig() as any).toaster as NinjaToasterProps
     const app = useNuxtApp().vueApp
     const userProps =
       typeof options === 'string' ||
@@ -60,7 +58,7 @@ export function createNinjaToaster(
         ? { content: options }
         : options
     const props: NinjaToasterProps = defu(
-      config.public.nt,
+      appConfigProps,
       createOptions,
       userProps
     )
@@ -79,7 +77,6 @@ export function createNinjaToaster(
         }
       })
 
-      // @ts-expect-error - Nuxt 3 context
       if (process.server) {
         resolve({
           el: null,

src/runtime/plugin.ts

@@ -1,7 +1,6 @@
 import { createNinjaToaster } from './create'
 
-// @ts-expect-error - Nuxt 3 auto-imports
-import { defineNuxtPlugin } from '#app'
+import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(() => {
   return {