From c35099e67013aa1a7e274d99cd382ac0018d2e1b Mon Sep 17 00:00:00 2001 From: MiniDigger | Martin Date: Sat, 19 Jul 2025 11:27:16 +0200 Subject: [PATCH] fix(nuxt): inject types for nuxt 4 too --- .gitignore | 2 +- README.md | 8 +- examples/README.md | 36 ++++----- examples/nuxt3/README.md | 42 ----------- examples/nuxt3/tsconfig.json | 4 - examples/{nuxt3 => nuxt4}/.gitignore | 0 examples/{nuxt3 => nuxt4}/.npmrc | 0 examples/{nuxt3 => nuxt4}/.stackblitz.js | 0 examples/nuxt4/README.md | 75 +++++++++++++++++++ examples/{nuxt3 => nuxt4/app}/app.vue | 0 examples/{nuxt3 => nuxt4/app}/components.d.ts | 3 +- .../app}/components/Circle.vue | 0 .../app}/components/LayoutHeader.vue | 0 examples/{nuxt3 => nuxt4}/nuxt.config.ts | 2 +- examples/{nuxt3 => nuxt4}/package.json | 16 ++-- examples/{nuxt3 => nuxt4}/pnpm-workspace.yaml | 0 examples/nuxt4/tsconfig.json | 18 +++++ pnpm-workspace.yaml | 2 +- src/nuxt.ts | 2 +- 19 files changed, 130 insertions(+), 80 deletions(-) delete mode 100644 examples/nuxt3/README.md delete mode 100644 examples/nuxt3/tsconfig.json rename examples/{nuxt3 => nuxt4}/.gitignore (100%) rename examples/{nuxt3 => nuxt4}/.npmrc (100%) rename examples/{nuxt3 => nuxt4}/.stackblitz.js (100%) create mode 100644 examples/nuxt4/README.md rename examples/{nuxt3 => nuxt4/app}/app.vue (100%) rename examples/{nuxt3 => nuxt4/app}/components.d.ts (92%) rename examples/{nuxt3 => nuxt4/app}/components/Circle.vue (100%) rename examples/{nuxt3 => nuxt4/app}/components/LayoutHeader.vue (100%) rename examples/{nuxt3 => nuxt4}/nuxt.config.ts (88%) rename examples/{nuxt3 => nuxt4}/package.json (53%) rename examples/{nuxt3 => nuxt4}/pnpm-workspace.yaml (100%) create mode 100644 examples/nuxt4/tsconfig.json diff --git a/.gitignore b/.gitignore index 93395e72..51fcddac 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,4 @@ example/README.md .nuxt .idea .svelte-kit/ -examples/nuxt3/pnpm-lock.yaml +examples/nuxt4/pnpm-lock.yaml diff --git a/README.md b/README.md index f796f3ba..d5ed0a78 100644 --- a/README.md +++ b/README.md @@ -166,7 +166,7 @@ module.exports = { Nuxt 2 and [Nuxt Bridge](https://github.com/nuxt/bridge) ```ts -// nuxt.config.js +// nuxt.config.ts export default { buildModules: [ ['unplugin-icons/nuxt', { /* options */ }], @@ -174,10 +174,10 @@ export default { } ``` -Nuxt 3 +Nuxt 3/4 ```ts -// nuxt.config.js +// nuxt.config.ts export default defineNuxtConfig({ modules: [ ['unplugin-icons/nuxt', { /* options */ }] @@ -208,7 +208,7 @@ export default defineNuxtConfig({ }) ``` -See [the Nuxt example](examples/nuxt3) for a working example project. +See [the Nuxt example](examples/nuxt4) for a working example project.
diff --git a/examples/README.md b/examples/README.md index 30f3f3ee..48877668 100644 --- a/examples/README.md +++ b/examples/README.md @@ -2,21 +2,21 @@ **NOTE**: Qwik (Vite) example running on StackBlitz will switch to `compiler: 'jsx'` and `jsx: 'qwik'`, replacing `@svgx/core` with `@svgr/core` and `@svgr/plugin-jsx`) -| Example | Source | Playground | -|-------------------------|---------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `Astro` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro) | -| `Astro + Vue` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro-vue) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro-vue) | -| `Next` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/next) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/next) | -| `Nuxt 3` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/nuxt3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/nuxt3) | -| `SvelteKit` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit) | -| `Preact (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-preact) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-preact) | -| `Qwik (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-qwik) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-qwik) | -| `React (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-react) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-react) | -| `Solid (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-solid) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-solid) | -| `Svelte (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-svelte) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-svelte) | -| `VanillaJS (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) | -| `Vue2 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue2) | -| `Vue3 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3) | -| `Vue3 legacy (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) | -| `Web Components (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | -| `Vue2 (Vue CLI)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) | +| Example | Source | Playground | +|-------------------------|---------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------| +| `Astro` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro) | +| `Astro + Vue` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/astro-vue) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/astro-vue) | +| `Next` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/next) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/next) | +| `Nuxt 4` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/nuxt4) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/nuxt4) | +| `SvelteKit` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/sveltekit) | +| `Preact (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-preact) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-preact) | +| `Qwik (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-qwik) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-qwik) | +| `React (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-react) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-react) | +| `Solid (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-solid) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-solid) | +| `Svelte (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-svelte) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-svelte) | +| `VanillaJS (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vanilla) | +| `Vue2 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue2) | +| `Vue3 (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3) | +| `Vue3 legacy (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-vue3-legacy) | +| `Web Components (Vite)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vite-web-components) | +| `Vue2 (Vue CLI)` | [GitHub](https://github.com/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) | [Play Online](https://stackblitz.com/fork/github/unplugin/unplugin-icons/tree/main/examples/vue-cli-vue2) | diff --git a/examples/nuxt3/README.md b/examples/nuxt3/README.md deleted file mode 100644 index d90610e0..00000000 --- a/examples/nuxt3/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Nuxt 3 Minimal Starter - -Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. - -## Setup - -Make sure to install the dependencies: - -```bash -# yarn -yarn install - -# npm -npm install - -# pnpm -pnpm install --shamefully-hoist -``` - -## Development Server - -Start the development server on http://localhost:3000 - -```bash -npm run dev -``` - -## Production - -Build the application for production: - -```bash -npm run build -``` - -Locally preview production build: - -```bash -npm run preview -``` - -Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. diff --git a/examples/nuxt3/tsconfig.json b/examples/nuxt3/tsconfig.json deleted file mode 100644 index a7bfa186..00000000 --- a/examples/nuxt3/tsconfig.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - // https://v3.nuxtjs.org/concepts/typescript - "extends": "./.nuxt/tsconfig.json" -} diff --git a/examples/nuxt3/.gitignore b/examples/nuxt4/.gitignore similarity index 100% rename from examples/nuxt3/.gitignore rename to examples/nuxt4/.gitignore diff --git a/examples/nuxt3/.npmrc b/examples/nuxt4/.npmrc similarity index 100% rename from examples/nuxt3/.npmrc rename to examples/nuxt4/.npmrc diff --git a/examples/nuxt3/.stackblitz.js b/examples/nuxt4/.stackblitz.js similarity index 100% rename from examples/nuxt3/.stackblitz.js rename to examples/nuxt4/.stackblitz.js diff --git a/examples/nuxt4/README.md b/examples/nuxt4/README.md new file mode 100644 index 00000000..25b58212 --- /dev/null +++ b/examples/nuxt4/README.md @@ -0,0 +1,75 @@ +# Nuxt Minimal Starter + +Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. diff --git a/examples/nuxt3/app.vue b/examples/nuxt4/app/app.vue similarity index 100% rename from examples/nuxt3/app.vue rename to examples/nuxt4/app/app.vue diff --git a/examples/nuxt3/components.d.ts b/examples/nuxt4/app/components.d.ts similarity index 92% rename from examples/nuxt3/components.d.ts rename to examples/nuxt4/app/components.d.ts index 7fa6b1bc..99c65244 100644 --- a/examples/nuxt3/components.d.ts +++ b/examples/nuxt4/app/components.d.ts @@ -1,10 +1,11 @@ /* eslint-disable */ -/* prettier-ignore */ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 +// biome-ignore lint: disable export {} +/* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/examples/nuxt3/components/Circle.vue b/examples/nuxt4/app/components/Circle.vue similarity index 100% rename from examples/nuxt3/components/Circle.vue rename to examples/nuxt4/app/components/Circle.vue diff --git a/examples/nuxt3/components/LayoutHeader.vue b/examples/nuxt4/app/components/LayoutHeader.vue similarity index 100% rename from examples/nuxt3/components/LayoutHeader.vue rename to examples/nuxt4/app/components/LayoutHeader.vue diff --git a/examples/nuxt3/nuxt.config.ts b/examples/nuxt4/nuxt.config.ts similarity index 88% rename from examples/nuxt3/nuxt.config.ts rename to examples/nuxt4/nuxt.config.ts index ad009164..5ccb57f4 100644 --- a/examples/nuxt3/nuxt.config.ts +++ b/examples/nuxt4/nuxt.config.ts @@ -1,7 +1,7 @@ import IconsResolver from 'unplugin-icons/resolver' import ViteComponents from 'unplugin-vue-components/vite' -// https://v3.nuxtjs.org/api/configuration/nuxt.config +// https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ modules: [ 'unplugin-icons/nuxt', diff --git a/examples/nuxt3/package.json b/examples/nuxt4/package.json similarity index 53% rename from examples/nuxt3/package.json rename to examples/nuxt4/package.json index c26dbf98..33f4de27 100644 --- a/examples/nuxt3/package.json +++ b/examples/nuxt4/package.json @@ -1,20 +1,22 @@ { - "name": "nuxt3-example", + "name": "nuxt4-example", "type": "module", "private": true, - "description": "unplugin-icons + Nuxt 3", + "description": "unplugin-icons + Nuxt 4", "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", - "preview": "nuxt preview" + "preview": "nuxt preview", + "typecheck": "nuxt typecheck" }, "devDependencies": { - "@iconify-json/logos": "^1.2.3", - "@iconify-json/mdi": "^1.2.1", - "nuxt": "^3.14.1592", + "@iconify-json/logos": "^1.2.5", + "@iconify-json/mdi": "^1.2.3", + "nuxt": "^4.0.1", "unplugin-icons": "link:../..", - "unplugin-vue-components": "^0.27.5" + "unplugin-vue-components": "^28.8.0", + "vue-tsc": "^3.0.4" }, "stackblitz": { "installDependencies": false, diff --git a/examples/nuxt3/pnpm-workspace.yaml b/examples/nuxt4/pnpm-workspace.yaml similarity index 100% rename from examples/nuxt3/pnpm-workspace.yaml rename to examples/nuxt4/pnpm-workspace.yaml diff --git a/examples/nuxt4/tsconfig.json b/examples/nuxt4/tsconfig.json new file mode 100644 index 00000000..307b2134 --- /dev/null +++ b/examples/nuxt4/tsconfig.json @@ -0,0 +1,18 @@ +{ + // https://nuxt.com/docs/guide/concepts/typescript + "files": [], + "references": [ + { + "path": "./.nuxt/tsconfig.app.json" + }, + { + "path": "./.nuxt/tsconfig.server.json" + }, + { + "path": "./.nuxt/tsconfig.shared.json" + }, + { + "path": "./.nuxt/tsconfig.node.json" + } + ] +} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 8710b078..72dd0bb9 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,3 +1,3 @@ packages: - 'examples/*' - - '!examples/nuxt3' + - '!examples/nuxt4' diff --git a/src/nuxt.ts b/src/nuxt.ts index 5f58968f..db764d6b 100644 --- a/src/nuxt.ts +++ b/src/nuxt.ts @@ -4,7 +4,7 @@ import unplugin from '.' export default function (this: any, options: Options = {}, nuxt: any) { const nuxtApp = this?.nuxt || nuxt - if (nuxtApp?._version?.startsWith('3.')) { + if (nuxtApp?._version?.startsWith('3.') || nuxtApp?._version?.startsWith('4.')) { options.compiler = 'vue3' // injecting types