feat: add nuxt module for vue-sonner

src/App.vue → app/App.vue

@@ -36,8 +36,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 // import { toggleDarkmode, isDark } from '~/composables/useDarkmode'
-import { Toaster } from '../packages'
-import type { Position, Theme } from '../packages/types'
+import { Toaster } from '@/packages'
+import type { Position, Theme } from '@/packages/types'
 import { useSEOHeader } from '~/composables/useSEOHeader'
 
 useSEOHeader()

src/components/Expand.vue → app/components/Expand.vue

@@ -51,7 +51,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 import { useCopyCode } from '~/composables/useCopyCode'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'

src/components/Hero.vue → app/components/Hero.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 </script>
 
 <style scoped>

src/components/Installation.vue → app/components/Installation.vue

@@ -26,7 +26,7 @@ import { ref } from 'vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import { useCopyCode } from '~/composables/useCopyCode'
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 
 const code = `pnpm install vue-sonner`
 

src/components/Others.vue → app/components/Others.vue

@@ -43,7 +43,7 @@
 <script lang="ts" setup>
 import { markRaw, ref } from 'vue'
 
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 import HeadlessToast from './HeadlessToast.vue'
 import HeadlessToastWithProps from './HeadlessToastWithProps.vue'
 import { useCopyCode } from '~/composables/useCopyCode'

src/components/Position.vue → app/components/Position.vue

@@ -42,8 +42,8 @@
 import type { PropType } from 'vue'
 import { ref, computed } from 'vue'
 
-import { toast } from '../../packages'
-import type { Position } from '../../packages/types'
+import { toast } from '@/packages'
+import type { Position } from '@/packages/types'
 import { useCopyCode } from '~/composables/useCopyCode'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'

src/components/Styling.vue → app/components/Styling.vue

@@ -52,7 +52,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 import { useCopyCode } from '~/composables/useCopyCode'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'

src/components/Theming.vue → app/components/Theming.vue

@@ -47,7 +47,7 @@
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
 
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 import { useCopyCode } from '~/composables/useCopyCode'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'

src/components/Types.vue → app/components/Types.vue

@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import { ref, h, defineComponent, markRaw } from 'vue'
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 import { useCopyCode } from '~/composables/useCopyCode'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'

src/components/Usage.vue → app/components/Usage.vue

@@ -28,7 +28,7 @@ import { ref } from 'vue'
 import CheckIcon from '~/components/icons/CheckIcon.vue'
 import CopyIcon from '~/components/icons/CopyIcon.vue'
 import { useCopyCode } from '~/composables/useCopyCode'
-import { toast } from '../../packages'
+import { toast } from '@/packages'
 
 const code = `<!-- App.vue -->
 <template>

components.d.ts

@@ -7,19 +7,22 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    CheckIcon: typeof import('./src/components/icons/CheckIcon.vue')['default']
-    CopyIcon: typeof import('./src/components/icons/CopyIcon.vue')['default']
-    Expand: typeof import('./src/components/Expand.vue')['default']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-    HeadlessToast: typeof import('./src/components/HeadlessToast.vue')['default']
-    HeadlessToastWithProps: typeof import('./src/components/HeadlessToastWithProps.vue')['default']
-    Hero: typeof import('./src/components/Hero.vue')['default']
-    Installation: typeof import('./src/components/Installation.vue')['default']
-    Others: typeof import('./src/components/Others.vue')['default']
-    Position: typeof import('./src/components/Position.vue')['default']
-    Styling: typeof import('./src/components/Styling.vue')['default']
-    Theming: typeof import('./src/components/Theming.vue')['default']
-    Types: typeof import('./src/components/Types.vue')['default']
-    Usage: typeof import('./src/components/Usage.vue')['default']
+    'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
+    'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
+    CheckIcon: typeof import('./app/components/icons/CheckIcon.vue')['default']
+    CopyIcon: typeof import('./app/components/icons/CopyIcon.vue')['default']
+    Expand: typeof import('./app/components/Expand.vue')['default']
+    Footer: typeof import('./app/components/Footer.vue')['default']
+    HeadlessToast: typeof import('./app/components/HeadlessToast.vue')['default']
+    HeadlessToastWithProps: typeof import('./app/components/HeadlessToastWithProps.vue')['default']
+    Hero: typeof import('./app/components/Hero.vue')['default']
+    Installation: typeof import('./app/components/Installation.vue')['default']
+    'Mdi:heart': typeof import('~icons/mdi/heart')['default']
+    Others: typeof import('./app/components/Others.vue')['default']
+    Position: typeof import('./app/components/Position.vue')['default']
+    Styling: typeof import('./app/components/Styling.vue')['default']
+    Theming: typeof import('./app/components/Theming.vue')['default']
+    Types: typeof import('./app/components/Types.vue')['default']
+    Usage: typeof import('./app/components/Usage.vue')['default']
   }
 }

index.html

@@ -10,7 +10,7 @@
 
 <body>
   <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
+  <script type="module" src="/app/main.ts"></script>
 </body>
 
 </html>

package.json

@@ -1,15 +1,20 @@
 {
   "name": "vue-sonner",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "type": "module",
   "author": "xiaoluoboding <[email protected]>",
   "scripts": {
     "dev": "vite",
+    "dev:playground": "nuxi dev playground",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "build:dev": "vite build --mode lib --watch",
     "build:docs": "vite build --mode docs",
     "build:lib": "vite build --mode lib && pnpm run build:types",
+    "build:module": "nuxt-module-build build --outDir lib/nuxt",
     "build:types": "vue-tsc -p tsconfig.build.json && api-extractor run",
     "preview": "vite preview",
+    "test": "cd ./test && pnpm test:e2e --ui",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
   },
   "repository": {
@@ -28,6 +33,16 @@
       "types": "./lib/vue-sonner.d.ts",
       "import": "./lib/vue-sonner.js",
       "require": "./lib/vue-sonner.cjs"
+    },
+    "./nuxt": {
+      "import": {
+        "types": "./lib/nuxt/types.d.mts",
+        "default": "./lib/nuxt/module.mjs"
+      },
+      "require": {
+        "types": "./lib/nuxt/types.d.ts",
+        "default": "./lib/nuxt/module.cjs"
+      }
     }
   },
   "sideEffects": [
@@ -38,6 +53,10 @@
   "devDependencies": {
     "@iconify/json": "^2.2.172",
     "@microsoft/api-extractor": "^7.47.10",
+    "@nuxt/devtools": "^1.6.0",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxt/test-utils": "^3.14.4",
     "@types/node": "^18.19.8",
     "@unocss/reset": "^0.63.4",
     "@vitejs/plugin-vue": "^5.1.4",
@@ -46,12 +65,16 @@
     "@vueuse/head": "^2.0.0",
     "clean-css": "^5.3.3",
     "highlight.js": "^11.10.0",
+    "nuxt": "^3.13.2",
     "typescript": "^5.6.3",
     "unocss": "^0.63.4",
     "unplugin-icons": "^0.19.3",
     "unplugin-vue-components": "^0.27.4",
     "vite": "^5.4.9",
     "vue": "^3.5.12",
     "vue-tsc": "^2.1.6"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.13.2"
   }
 }

playground/.nuxt/app.config.mjs

@@ -0,0 +1,18 @@
+
+import { updateAppConfig } from '#app/config'
+import { defuFn } from 'defu'
+
+const inlineConfig = {
+  "nuxt": {}
+}
+
+// Vite - webpack is handled directly in #app/config
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    updateAppConfig(newModule.default)
+  })
+}
+
+
+
+export default /*@__PURE__*/ defuFn(inlineConfig)