Update dependencies and add playground for Nuxt 4

.changeset/sharp-peaches-speak.md

@@ -0,0 +1,6 @@
+---
+'vue-types-nuxt': major
+---
+
+- Add support for Nuxt 4
+- Package is now published as ESM-only

.gitignore

@@ -61,3 +61,6 @@ dist
 
 # VitePress
 **/.vitepress/cache
+
+# Vue Language Server
+vue-global-types.d.ts

.vscode/settings.json

@@ -1,8 +1,12 @@
 {
-  "[js]": {
+  "eslint.validate": ["javascript", "typescript"],
+  "eslint.format.enable": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": false
   },
-  "[ts]": {
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
     "editor.formatOnSave": false
   },
   "[markdown]": {

package.json

@@ -14,6 +14,7 @@
   "scripts": {
     "examples:dev": "pnpm --filter=vue-types run build && pnpm --filter=examples start",
     "docs:dev": "pnpm --filter=docs run dev",
+    "nuxt:dev": "pnpm --filter=vue-types-nuxt stub && pnpm --filter=vue-types-nuxt-playground dev",
     "build": "pnpm -r build",
     "lint": "pnpm -r lint",
     "test": "pnpm -r test",
@@ -28,19 +29,19 @@
   "devDependencies": {
     "@changesets/cli": "2.29.6",
     "@eslint/js": "9.33.0",
-    "@vitest/coverage-v8": "2.1.9",
-    "eslint-config-prettier": "9.1.2",
+    "@vitest/coverage-v8": "3.2.4",
+    "eslint-config-prettier": "10.1.8",
     "eslint-plugin-prettier": "5.5.4",
-    "eslint-plugin-vue": "^9.32.0",
-    "globals": "^15.14.0",
-    "happy-dom": "15.11.7",
+    "eslint-plugin-vue": "^10.4.0",
+    "globals": "^16.3.0",
+    "happy-dom": "18.0.1",
     "lefthook": "1.12.3",
     "prettier": "3.6.2",
     "publint": "^0.3.4",
     "typescript": "5.9.2",
     "typescript-eslint": "8.39.1",
-    "vite": "6.3.5",
-    "vitest": "2.1.9"
+    "vite": "7.1.2",
+    "vitest": "3.2.4"
   },
   "dependencies": {
     "eslint": "9.33.0"

packages/core/build.config.ts

@@ -17,6 +17,7 @@ const umd = (entryName: string): BuildConfig => ({
     output: {
       format: 'umd',
       name: 'VueTypes',
+      exports: 'named',
       inlineDynamicImports: true,
     },
     esbuild: {
@@ -45,6 +46,9 @@ export default defineBuildConfig([
       emitCJS: true,
       cjsBridge: true,
       inlineDependencies: true,
+      output: {
+        exports: 'named',
+      },
     },
     declaration: true,
   },

packages/core/package.json

@@ -66,9 +66,9 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "20.19.11",
+    "@types/node": "24.3.0",
     "typescript": "5.9.2",
-    "unbuild": "2.0.0"
+    "unbuild": "3.6.1"
   },
   "peerDependenciesMeta": {
     "vue": {

packages/docs/.vitepress/config.ts

@@ -56,6 +56,7 @@ export default defineConfig({
           { text: 'Using VueTypes', link: '/guide/validators' },
 
           { text: 'Configuration', link: '/guide/configuration' },
+          { text: 'Nuxt', link: '/guide/configuration' },
         ],
       },
       {

packages/docs/guide/installation.md

@@ -144,35 +144,3 @@ return {
 ::: warning
 If using [@rollup/plugin-node-resolve](https://www.npmjs.com/package/@rollup/plugin-node-resolve), place the alias plugin **before** the resolve plugin.
 :::
-
-### Nuxt Configuration
-
-VueTypes provides a Nuxt module that automatically enables the shim for production builds:
-
-```sh
-npm install vue-types-nuxt --save-dev
-```
-
-```ts
-// nuxt.config.ts
-
-export default {
-  // Other settings
-  modules: ['vue-types-nuxt'],
-}
-```
-
-To explicitly enable the shim, set the `shim` option:
-
-```ts
-// nuxt.config.ts
-
-export default {
-  modules: ['vue-types-nuxt'],
-
-  // Enable the shim even during development
-  vueTypes: {
-    shim: true,
-  },
-}
-```

packages/docs/guide/nuxt.md

@@ -0,0 +1,31 @@
+# Nuxt
+
+VueTypes provides a Nuxt module that automatically enables the shim for production builds:
+
+```sh
+npm install vue-types-nuxt --save-dev
+```
+
+```ts
+// nuxt.config.ts
+
+export default {
+  // Other settings
+  modules: ['vue-types-nuxt'],
+}
+```
+
+To explicitly enable the shim, set the `shim` option:
+
+```ts
+// nuxt.config.ts
+
+export default {
+  modules: ['vue-types-nuxt'],
+
+  // Enable the shim even during development
+  vueTypes: {
+    shim: true,
+  },
+}
+```

packages/docs/package.json

@@ -11,7 +11,7 @@
     "lint:md": "prettier '**/*.md' --check"
   },
   "devDependencies": {
-    "cross-env": "7.0.3",
+    "cross-env": "10.0.0",
     "markdown-it-container": "4.0.0",
     "vitepress": "1.6.4",
     "vitepress-plugin-tabs": "^0.7.0",

packages/examples/package.json

@@ -10,6 +10,6 @@
     "lint:js": "eslint '**/*.{ts,vue}'"
   },
   "dependencies": {
-    "vue": "3.5.13"
+    "vue": "3.5.18"
   }
 }

packages/examples/vite.config.ts

@@ -1,13 +1,16 @@
 import { defineConfig } from 'vite'
-import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
 
-const resolve = (name: string) => fileURLToPath(import.meta.resolve(name))
+const require = createRequire(import.meta.url)
+const __dirname = dirname(fileURLToPath(import.meta.url))
 
 export default defineConfig({
   resolve: {
     alias: {
-      vue: resolve('vue/dist/vue.esm-browser.js'),
-      'vue-types': resolve('../core/src/index.ts'),
+      vue: require.resolve('vue/dist/vue.esm-browser.js'),
+      'vue-types': resolve(__dirname, '../core/src/index.ts'),
     },
   },
 })

packages/nuxt/package.json

@@ -5,9 +5,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     }
   },
   "engines": {
@@ -18,25 +17,32 @@
     "url": "https://github.com/dwightjack/vue-types.git",
     "directory": "packages/nuxt"
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
   "files": [
     "dist"
   ],
   "scripts": {
     "prepublishOnly": "pnpm run build",
     "build": "nuxt-module-build build",
+    "stub": "nuxt-module-build build --stub",
     "lint": "pnpm run \"/^lint:.*/\"",
     "lint:type": "tsc --noEmit --skipLibCheck",
     "lint:js": "eslint 'src/**/*.ts'"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0"
+    "@nuxt/kit": "^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.8.0",
-    "@nuxt/schema": "^3.0.0",
-    "nuxt": "^3.0.0",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.0.3",
+    "nuxt": "^4.0.3",
     "vue-types": "workspace:^"
   },
   "peerDependencies": {

packages/nuxt/src/module.ts

@@ -13,7 +13,7 @@ export default defineNuxtModule<VueTypesNuxtOptions>({
     name: 'vue-types',
     configKey: 'vueTypes',
     compatibility: {
-      nuxt: '^3.0.0',
+      nuxt: '>=3.0.0',
     },
   },
 

packages/playground/app.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    Nuxt module playground!
+    <Test name="Hello!" />
+  </div>
+</template>

packages/playground/components/test.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { string } from 'vue-types'
+
+defineProps({
+  name: string().isRequired,
+})
+</script>
+
+<template>
+  <p>{{ name }}</p>
+</template>

packages/playground/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  modules: ['vue-types-nuxt'],
+  devtools: { enabled: true },
+})

packages/playground/package.json

@@ -0,0 +1,16 @@
+{
+  "private": true,
+  "version": "0.0.0",
+  "name": "vue-types-nuxt-playground",
+  "type": "module",
+  "scripts": {
+    "dev:prepare": "nuxi prepare",
+    "dev": "pnpm dev:prepare && nuxi dev",
+    "build": "pnpm dev:prepare &&  nuxi build"
+  },
+  "dependencies": {
+    "nuxt": "^4.0.3",
+    "vue-types-nuxt": "workspace:^",
+    "vue-types": "workspace:^"
+  }
+}

packages/playground/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

packages/playground/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./.nuxt/tsconfig.json",
+  "vueCompilerOptions": {
+    "globalTypesPath": "./vue-global-types.d.ts"
+  }
+}