feat: migrate to nuxt 4

Author: stafyniaksacha

.app/package.json

@@ -11,13 +11,15 @@
     "clean": "rimraf .nuxt .output node_modules"
   },
   "devDependencies": {
-    "@iconify-json/fa6-brands": "^1.2.5",
+    "@iconify-json/fa6-brands": "^1.2.6",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.30",
-    "@nuxt/fonts": "^0.11.1",
-    "@shuriken-ui/nuxt": "4.0.0-beta.4",
-    "nuxt": "3.16.2",
-    "tailwindcss": "^4.1.3",
-    "typescript": "5.8.3"
+    "@iconify-json/simple-icons": "^1.2.47",
+    "@nuxt/fonts": "^0.11.4",
+    "@shuriken-ui/nuxt": "4.0.0",
+    "nuxt": "4.0.3",
+    "tailwindcss": "^4.1.11",
+    "typescript": "5.9.2",
+    "vue": "^3.5.18",
+    "vue-tsc": "^3.0.5"
   }
 }

.app/tsconfig.json

@@ -1,4 +1,9 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ],
+  "files": []
 }

.demo/app/components/AddonInputPassword.vue

@@ -183,6 +183,7 @@ onNuxtReady(async () => {
             class="flex items-center justify-between gap-2"
           >
             <Icon
+              v-if="props.icons.hint"
               :name="props.icons.hint"
               class="text-muted-400 dark:text-muted-500 size-4 shrink-0"
             />
@@ -198,6 +199,7 @@ onNuxtReady(async () => {
             class="flex items-center justify-between gap-2"
           >
             <Icon
+              v-if="props.icons.hint"
               :name="props.icons.hint"
               class="text-muted-400 dark:text-muted-500 size-4 shrink-0"
             />
@@ -265,10 +267,11 @@ onNuxtReady(async () => {
               class="relative flex size-full items-center justify-center"
             >
               <Icon
+                v-if="showPassword ? props.icons.reveal : props.icons.hide"
                 :name="
                   showPassword
-                    ? props.icons.reveal
-                    : props.icons.hide
+                    ? props.icons.reveal!
+                    : props.icons.hide!
                 "
                 class="size-4"
               />

.demo/app/pages/dashboards/map.vue

@@ -404,7 +404,7 @@ function updatePopup() {
 
   const feature = selectedLocation.value
   const coordinates = ((feature.geometry || {}) as any)?.coordinates as LngLatLike
-  const properties = feature.properties as GeoJsonLocationProperties
+  const properties = feature.properties as unknown as GeoJsonLocationProperties
 
   popup.value = new mapboxgl.Popup({
     closeOnClick: false,
@@ -561,7 +561,7 @@ function selectFeature(feature?: any) {
         class="starting:opacity-0 transition-discrete duration-300 transition-all"
       >
         <DemoMapMarker
-          v-bind="(selectedLocation.properties as GeoJsonLocationProperties)"
+          v-bind="(selectedLocation.properties as unknown as GeoJsonLocationProperties)"
           @close="selectFeature()"
         />
       </div>

.demo/app/pages/layouts/onboarding-1.vue

@@ -16,7 +16,7 @@ const loading = ref(false)
 const twoFaMode = ref('email_address')
 const currentStep = ref(1)
 const codeLength = ref(4)
-const input = ref<string[]>([])
+const input = ref<number[]>([])
 const inputElements = useTemplateRef<HTMLInputElement[]>('inputElements')
 const correctPin = '1234'
 const onlyCheckOnLastFieldInput = ref(true)

.demo/content/documentation/04.demo-installation.md

@@ -17,7 +17,7 @@ It's a good starting point to see how Tairo is used to build a dashboard applica
 ::doc-checklist
 ---
 items:
-  - Nuxt 4 compatibility mode
+  - Nuxt 4
   - Nuxt content integration
   - Nuxt i18n integration
   - Prebuilt layouts

.demo/content/documentation/10.setup/1.new-project.md

@@ -49,26 +49,11 @@ cd <app>
   ```
 ::
 
-### Enable Nuxt 4 compatibility
-
-This optionnal step allows you to use the latest version of Nuxt with Tairo.
-
-::code-group
-```ts [<app>/nuxt.config.ts]
-export default defineNuxtConfig({
-  future: {
-    compatibilityVersion: 4,
-  },
-})
-```
-::
-
 ---
 
 Useful resources:
 
 - [New Project on nuxt.com](https://nuxt.com/docs/getting-started/installation#new-project)
-- [Testing Nuxt 4 on nuxt.com](https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4)
 
 ---
 

.demo/nuxt.config.ts

@@ -81,6 +81,23 @@ export default defineNuxtConfig({
     '~/assets/main.css',
   ],
   fonts: {
+    families: [
+      {
+        name: 'Inter',
+        provider: 'google',
+        weights: ['100 900'],
+      },
+      {
+        name: 'Karla',
+        provider: 'google',
+        weights: ['200 800'],
+      },
+      {
+        name: 'Fira Code',
+        provider: 'google',
+        weights: ['300 700'],
+      },
+    ],
     experimental: {
       processCSSVariables: true,
     },
@@ -110,7 +127,6 @@ export default defineNuxtConfig({
     // We recommend using the default prefix_except_default strategy for SEO.
     strategy: 'no_prefix',
     defaultLocale: 'en',
-    lazy: true,
     locales: [
       { code: 'en', dir: 'ltr', language: 'en-US', file: 'en-US.yaml', name: 'English', isCatchallLocale: true },
       { code: 'fr', dir: 'ltr', language: 'fr-FR', file: 'fr-FR.yaml', name: 'Français' },
@@ -119,13 +135,6 @@ export default defineNuxtConfig({
       { code: 'ar', dir: 'rtl', language: 'ar-SA', file: 'ar-SA.yaml', name: 'العربية' },
       { code: 'ja', dir: 'ltr', language: 'ja-JP', file: 'ja-JP.yaml', name: '日本語' },
     ],
-    // Use i18n v10 features
-    experimental: {
-      generatedLocaleFilePathFormat: 'off',
-    },
-    bundle: {
-      optimizeTranslationDirective: false,
-    },
   },
 
   routeRules: {
@@ -198,6 +207,7 @@ export default defineNuxtConfig({
       include: [
         'scule',
         'klona',
+        'minisearch',
         // AddonDatepicker
         'v-calendar',
         // AddonApexcharts
@@ -215,7 +225,6 @@ export default defineNuxtConfig({
         'mapbox-gl',
         '@mapbox/mapbox-gl-geocoder',
         // form validation
-        '@vee-validate/zod',
         'vee-validate',
         'zod',
         // calendar app

.demo/package.json

@@ -13,89 +13,90 @@
     "clean": "rimraf .nuxt .output node_modules"
   },
   "devDependencies": {
-    "@iconify-json/akar-icons": "^1.2.2",
-    "@iconify-json/bi": "^1.2.2",
-    "@iconify-json/cib": "^1.2.2",
-    "@iconify-json/cryptocurrency": "^1.2.2",
-    "@iconify-json/devicon": "^1.2.23",
-    "@iconify-json/fa-brands": "^1.2.1",
-    "@iconify-json/fa6-brands": "^1.2.5",
+    "@cssninja/tairo-component-meta": "workspace:*",
+    "@iconify-json/akar-icons": "^1.2.7",
+    "@iconify-json/bi": "^1.2.6",
+    "@iconify-json/cib": "^1.2.3",
+    "@iconify-json/cryptocurrency": "^1.2.3",
+    "@iconify-json/devicon": "^1.2.41",
+    "@iconify-json/fa-brands": "^1.2.2",
+    "@iconify-json/fa6-brands": "^1.2.6",
     "@iconify-json/feather": "^1.2.1",
-    "@iconify-json/file-icons": "^1.2.1",
-    "@iconify-json/flagpack": "^1.2.2",
+    "@iconify-json/file-icons": "^1.2.2",
+    "@iconify-json/flagpack": "^1.2.6",
     "@iconify-json/gg": "^1.2.2",
     "@iconify-json/guidance": "^1.2.2",
-    "@iconify-json/ic": "^1.2.2",
-    "@iconify-json/icon-park-outline": "^1.2.2",
-    "@iconify-json/ion": "^1.2.2",
-    "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.34",
+    "@iconify-json/ic": "^1.2.4",
+    "@iconify-json/icon-park-outline": "^1.2.4",
+    "@iconify-json/ion": "^1.2.6",
+    "@iconify-json/logos": "^1.2.9",
+    "@iconify-json/lucide": "^1.2.62",
     "@iconify-json/mdi": "^1.2.2",
     "@iconify-json/mdi-light": "^1.2.2",
-    "@iconify-json/mingcute": "^1.2.3",
+    "@iconify-json/mingcute": "^1.2.5",
     "@iconify-json/nonicons": "^1.2.2",
-    "@iconify-json/pajamas": "^1.2.4",
+    "@iconify-json/pajamas": "^1.2.13",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/ri": "^1.2.5",
-    "@iconify-json/simple-icons": "^1.2.30",
-    "@iconify-json/solar": "^1.2.2",
-    "@iconify-json/streamline": "^1.2.2",
-    "@iconify-json/system-uicons": "^1.2.2",
+    "@iconify-json/simple-icons": "^1.2.47",
+    "@iconify-json/solar": "^1.2.4",
+    "@iconify-json/streamline": "^1.2.5",
+    "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/teenyicons": "^1.2.2",
-    "@iconify-json/token-branded": "^1.2.16",
-    "@iconify-json/uiw": "^1.2.1",
-    "@iconify-json/unjs": "^1.2.0",
+    "@iconify-json/token-branded": "^1.2.24",
+    "@iconify-json/uiw": "^1.2.3",
+    "@iconify-json/unjs": "^1.2.3",
     "@iconify-json/vaadin": "^1.2.1",
-    "@mapbox/mapbox-gl-geocoder": "5.0.3",
-    "@nuxt/content": "3.4.0",
-    "@cssninja/tairo-component-meta": "workspace:*",
-    "@nuxt/fonts": "^0.11.1",
-    "@nuxt/image": "1.10.0",
-    "@nuxt/kit": "^3.16.2",
-    "@nuxtjs/i18n": "^9.5.2",
-    "@shuriken-ui/nuxt": "4.0.0-beta.4",
+    "@mapbox/mapbox-gl-geocoder": "5.1.0",
+    "@nuxt/content": "3.6.3",
+    "@nuxt/fonts": "^0.11.4",
+    "@nuxt/image": "1.11.0",
+    "@nuxt/kit": "^4.0.3",
+    "@nuxtjs/i18n": "^10.0.5",
+    "@shuriken-ui/nuxt": "4.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@types/geojson": "^7946.0.15",
     "@types/mapbox-gl": "3.4.1",
     "@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
-    "@vee-validate/zod": "^4.15.0",
-    "@vueuse/core": "^13.0.0",
-    "@vueuse/nuxt": "^13.0.0",
+    "@vueuse/core": "^13.6.0",
+    "@vueuse/nuxt": "^13.6.0",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
     "@zxcvbn-ts/language-en": "^3.0.2",
     "@zxcvbn-ts/language-fr": "^3.0.2",
-    "apexcharts": "4.5.0",
+    "apexcharts": "5.3.3",
+    "better-sqlite3": "^12.2.0",
     "country-codes-list": "^2.0.0",
     "date-fns": "4.1.0",
-    "debug": "^4.3.7",
+    "debug": "^4.4.1",
     "geojson": "^0.5.0",
     "imask": "7.6.1",
     "klona": "^2.0.6",
-    "libphonenumber-js": "^1.12.6",
-    "lightningcss": "^1.29.2",
-    "lightweight-charts": "^5.0.5",
+    "libphonenumber-js": "^1.12.12",
+    "lightningcss": "^1.30.1",
+    "lightweight-charts": "^5.0.8",
     "magic-string": "0.30.17",
-    "mapbox-gl": "3.11.0",
+    "mapbox-gl": "3.14.0",
     "minisearch": "^7.1.2",
-    "nuxt": "3.16.2",
-    "nuxt-component-meta": "0.10.1",
+    "nuxt": "4.0.3",
+    "nuxt-component-meta": "0.13.1",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "^2.2.0",
+    "reka-ui": "^2.4.1",
     "scule": "^1.3.0",
-    "sharp": "0.34.0",
-    "shiki": "3.2.1",
+    "sharp": "0.34.3",
+    "shiki": "3.9.2",
     "slugify": "^1.6.6",
-    "tailwindcss": "^4.1.3",
-    "typescript": "5.8.3",
+    "tailwindcss": "^4.1.11",
+    "typescript": "5.9.2",
     "v-calendar": "3.1.2",
-    "vee-validate": "^4.15.0",
-    "vue": "^3.5.13",
-    "vue-component-meta": "2.2.8",
-    "vue-router": "^4.5.0",
+    "vee-validate": "^4.15.1",
+    "vue": "^3.5.18",
+    "vue-component-meta": "3.0.5",
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^3.0.5",
     "vue3-apexcharts": "1.8.0",
     "vue3-smooth-dnd": "0.0.6",
-    "zod": "^3.24.1"
+    "zod": "^4.0.17"
   }
 }

.demo/tsconfig.json

@@ -1,4 +1,9 @@
 {
-  // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
+  "references": [
+    { "path": "./.nuxt/tsconfig.app.json" },
+    { "path": "./.nuxt/tsconfig.server.json" },
+    { "path": "./.nuxt/tsconfig.shared.json" },
+    { "path": "./.nuxt/tsconfig.node.json" }
+  ],
+  "files": []
 }