fix: use nuxt add component util for toaster

This allows Toaster component types to be available, and the Toaster component will only be loaded if it is actually imported.
xiaoluoboding · Nov 19, 2024 · 17adfb9 · 17adfb9
1 parent 5c7cc21
commit 17adfb9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/module.ts b/src/module.ts
@@ -1,4 +1,9 @@
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import {
+  defineNuxtModule,
+  addComponent,
+  addPlugin,
+  createResolver
+} from '@nuxt/kit'
 
 import type { NuxtModule } from '@nuxt/schema'
 
@@ -16,6 +21,12 @@ const module: NuxtModule<ModuleOptions> = defineNuxtModule<ModuleOptions>({
   setup(options: ModuleOptions, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
+    addComponent({
+      name: 'Toaster',
+      export: 'Toaster',
+      filePath: 'vue-sonner'
+    })
+
     addPlugin({
       src: resolve('./runtime/plugin'),
       mode: 'client'

diff --git a/src/runtime/plugin.ts b/src/runtime/plugin.ts
@@ -1,11 +1,7 @@
-import { Toaster, toast } from 'vue-sonner'
+import { toast } from 'vue-sonner'
 import { defineNuxtPlugin } from 'nuxt/app'
 
-import type { NuxtApp } from 'nuxt/app'
-
-export default defineNuxtPlugin((nuxtApp: NuxtApp) => {
-  nuxtApp.vueApp.component('Toaster', Toaster)
-
+export default defineNuxtPlugin(() => {
   return {
     provide: {
       toast