Upgrade Nuxt to v4 and migrate to @nuxt/eslint and @nuxt/fonts

.github/workflows/copilot-setup-steps.yml

@@ -0,0 +1,38 @@
+name: "Copilot Setup Steps"
+
+# Automatically run the setup steps when they are changed to allow for easy validation, and
+# allow manual testing through the repository's "Actions" tab
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+  pull_request:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+
+jobs:
+  # The job MUST be called `copilot-setup-steps` or it will not be picked up by Copilot.
+  copilot-setup-steps:
+    runs-on: ubuntu-latest
+
+    # Set the permissions to the lowest permissions possible needed for your steps.
+    # Copilot will be given its own token for its operations.
+    permissions:
+      # If you want to clone the repository as part of your setup steps, for example to install dependencies, you'll need the `contents: read` permission. If you don't clone the repository in your setup steps, Copilot will do this for you automatically after the steps complete.
+      contents: read
+
+    # You can define any steps you want, and they will run before the agent starts.
+    # If you do not check out your code, Copilot will do this for you.
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install JavaScript dependencies
+        run: npm ci

dev/Dev.vue

@@ -1,10 +1,10 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <script lang="ts" setup>
 import StyledComboBox from '@/components/ComboBox/StyledComboBox.vue'
 import ComboBoxOption from '@/components/ComboBox/ComboBoxOption.vue'
 import ComboBox from '@/components/ComboBox/ComboBox.vue'
 import ComboBoxMenu from '@/components/ComboBox/ComboBoxMenu.vue'
 import ComboBoxButton from '@/components/ComboBox/ComboBoxButton.vue'
-import ComboBoxInput from '@/components/ComboBox/ComboBoxInput.vue'
 import { countriesAndCodes } from '@docs/assets/static/data'
 import { ref } from 'vue'
 

dev/dev.js

@@ -1,4 +1,4 @@
-import { createApp, h } from 'vue'
+import { createApp } from 'vue'
 import Dev from './Dev.vue'
 
 createApp(Dev).mount('#app')

docs/components/Hero.vue → docs/app/components/Hero.vue

@@ -23,7 +23,7 @@ import {
             aria-hidden="true"
             src="~/assets/img/blur-cyan.png"
             decoding="async"
-            class="absolute bottom-full right-full -mr-72 -mb-56 opacity-50"
+            class="absolute bottom-full right-full -mr-72 -mb-56 opacity-50 pointer-events-none"
             width="530"
             height="530"
           />
@@ -62,14 +62,14 @@ import {
               alt=""
               src="~/assets/img/blur-cyan.png"
               decoding="async"
-              class="absolute -top-64 -right-64"
+              class="absolute -top-64 -right-64 pointer-events-none"
               width="530"
               height="530"
             /><img
               alt=""
               src="~/assets/img/blur-indigo.png"
               decoding="async"
-              class="absolute -bottom-40 -right-44"
+              class="absolute -bottom-40 -right-44 pointer-events-none"
               width="567"
               height="567"
             />
@@ -94,19 +94,19 @@ import {
                     class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
                   >
                     <ArrowDownTrayIcon class="w-3 h-3 mr-1" />
-                    960k installs/month
+                    +1m downloads/month
                   </span>
                   <span
                     class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
                   >
                     <SparklesIcon class="w-3 h-3 mr-1" />
-                    4.5k stars
+                    4.7k stars
                   </span>
                   <span
                     class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
                   >
                     <RocketLaunchIcon class="w-3 h-3 mr-1" />
-                    Vue 3
+                    Composable, Fully Typed
                   </span>
                 </div>
 

docs/eslint.config.ts

@@ -0,0 +1,5 @@
+import withNuxt from '.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

docs/nuxt.config.ts

@@ -7,7 +7,8 @@ export default defineNuxtConfig({
   modules: [
     '@nuxtjs/color-mode',
     '@nuxt/content',
-    '@nuxtjs/google-fonts',
+    '@nuxt/fonts',
+    '@nuxt/eslint',
     'nuxt-svgo',
   ],
 
@@ -38,10 +39,14 @@ export default defineNuxtConfig({
     defaultImport: 'component',
   },
 
-  googleFonts: {
-    families: {
-      'Public+Sans': [300, 400, 500, 600],
-    },
+  fonts: {
+    families: [
+      {
+        name: 'Public Sans',
+        provider: 'bunny',
+        weights: [300, 400, 500, 600],
+      },
+    ],
   },
 
   vite: {

docs/package.json

@@ -4,30 +4,33 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
-    "preview": "nuxt preview"
+    "preview": "nuxt preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
-    "@nuxt/content": "^3.3.0",
-    "@nuxt/eslint-config": "^1.2.0",
-    "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/google-fonts": "^3.2.0",
-    "@tailwindcss/typography": "^0.5.16",
-    "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.5.0",
-    "autoprefixer": "^10.4.21",
+    "@nuxt/content": "^3.8.2",
+    "@nuxt/eslint": "^1.10.0",
+    "@nuxt/fonts": "^0.12.1",
+    "@nuxtjs/color-mode": "^4.0.0",
+    "@tailwindcss/typography": "^0.5.19",
+    "autoprefixer": "^10.4.22",
     "eslint": "^9.22.0",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-vue": "^10.0.0",
-    "nuxt": "3.16.0",
-    "nuxt-svgo": "^4.0.15",
-    "prettier": "^3.5.3",
-    "prettier-plugin-tailwindcss": "^0.6.11"
+    "eslint-plugin-prettier": "^5.5.4",
+    "nuxt": "^4.2.1",
+    "nuxt-svgo": "^4.2.6",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-tailwindcss": "^0.7.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.2",
+    "vue": "^3.5.24"
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
-    "@tailwindcss/vite": "^4.0.14",
-    "@vueuse/core": "^13.0.0",
-    "tailwindcss": "^4.0.14"
+    "@tailwindcss/vite": "^4.1.17",
+    "@vueuse/core": "^14.0.0",
+    "tailwindcss": "^4.1.17"
   }
 }

package.json

@@ -28,8 +28,8 @@
   "license": "MIT",
   "prepare": "npm run build",
   "scripts": {
-    "dev:docs": "cd docs && yarn dev",
-    "build:docs": "cd docs && yarn generate",
+    "dev:docs": "cd docs && pnpm run dev",
+    "build:docs": "cd docs && pnpm run generate",
     "semantic-release": "semantic-release",
     "commit": "git-cz",
     "dev": "vite",
@@ -90,7 +90,7 @@
       {
         "path": "./dist/vue-select.es.js",
         "compression": "gzip",
-        "maxSize": "8 KB"
+        "maxSize": "11 KB"
       },
       {
         "path": "./dist/vue-select.umd.js",