chore(deps): update nuxt framework to v4 (v3) (major) (#4532)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.nuxtrc

@@ -0,0 +1 @@
+experimental.normalizeComponentNames=false

docs/app/composables/useFaviconFromTheme.ts

@@ -1,5 +1,5 @@
 import { onMounted, watch } from 'vue'
-import FaviconSvg from 'public/icon.svg?raw'
+import FaviconSvg from '../../public/icon.svg?raw'
 
 export function useFaviconFromTheme() {
   const colorMode = useColorMode()

docs/package.json

@@ -30,7 +30,7 @@
     "joi": "^17.13.3",
     "maska": "^3.2.0",
     "motion-v": "^1.5.0",
-    "nuxt": "^3.17.7",
+    "nuxt": "^4.0.0",
     "nuxt-component-meta": "^0.12.1",
     "nuxt-llms": "^0.1.3",
     "nuxt-og-image": "^5.1.9",

package.json

@@ -116,8 +116,8 @@
     "@internationalized/number": "^3.6.3",
     "@nuxt/fonts": "^0.11.4",
     "@nuxt/icon": "^1.15.0",
-    "@nuxt/kit": "^3.17.7",
-    "@nuxt/schema": "^3.17.7",
+    "@nuxt/kit": "^4.0.0",
+    "@nuxt/schema": "^4.0.0",
     "@nuxtjs/color-mode": "^3.5.2",
     "@standard-schema/spec": "^1.0.0",
     "@tailwindcss/postcss": "^4.1.11",
@@ -163,7 +163,7 @@
     "embla-carousel": "^8.6.0",
     "eslint": "^9.31.0",
     "happy-dom": "^18.0.1",
-    "nuxt": "^3.17.7",
+    "nuxt": "^4.0.0",
     "release-it": "^19.0.3",
     "vitest": "^3.2.4",
     "vitest-environment-nuxt": "^1.0.1",

playground-vue/package.json

@@ -16,9 +16,9 @@
     "zod": "^4.0.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^6.0.0",
     "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "vite": "^7.0.4",
     "vue-tsc": "^3.0.1"
   }
 }

playground/package.json

@@ -14,7 +14,7 @@
     "@internationalized/date": "^3.8.2",
     "@nuxt/ui": "workspace:*",
     "@nuxthub/core": "^0.9.0",
-    "nuxt": "^3.17.7",
+    "nuxt": "^4.0.0",
     "zod": "^4.0.5"
   },
   "devDependencies": {

test/components/CheckboxGroup.spec.ts

@@ -120,7 +120,7 @@ describe('CheckboxGroup', () => {
     test('no label for=... on FormField', async () => {
       const { wrapper } = await createForm()
       const formFieldLabel = wrapper.findAll('label').map(label => label.attributes()).filter(label => !label.for?.includes(':'))[0]
-      expect(formFieldLabel.for).toBeUndefined()
+      expect(formFieldLabel?.for).toBeUndefined()
     })
   })
 })

test/components/CommandPalette.spec.ts

@@ -68,15 +68,15 @@ describe('CommandPalette', () => {
     // Props
     ['with groups', { props }],
     ['without data', {}],
-    ['with modelValue', { props: { ...props, modelValue: groups[2].items[0] } }],
-    ['with defaultValue', { props: { ...props, defaultValue: groups[2].items[0] } }],
+    ['with modelValue', { props: { ...props, modelValue: groups[2]?.items[0] } }],
+    ['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items[0] } }],
     ['with labelKey', { props: { ...props, labelKey: 'icon' } }],
     ['with placeholder', { props: { ...props, placeholder: 'Search...' } }],
     ['with disabled', { props: { ...props, disabled: true } }],
     ['with icon', { props: { ...props, icon: 'i-lucide-terminal' } }],
     ['with loading', { props: { ...props, loading: true } }],
     ['with loadingIcon', { props: { ...props, loading: true, loadingIcon: 'i-lucide-loader' } }],
-    ['with selectedIcon', { props: { ...props, selectedIcon: 'i-lucide-badge-check', modelValue: groups[2].items[0] } }],
+    ['with selectedIcon', { props: { ...props, selectedIcon: 'i-lucide-badge-check', modelValue: groups[2]?.items[0] } }],
     ['with close', { props: { ...props, close: true } }],
     ['with closeIcon', { props: { ...props, close: true, closeIcon: 'i-lucide-trash' } }],
     ['with as', { props: { ...props, as: 'section' } }],

test/components/Form.spec.ts

@@ -314,8 +314,8 @@ describe('Form', () => {
       emailInput.trigger('focus')
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalledTimes(1)
-      expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
-      expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
     })
 
     test('reactivity: touchedFields works on change', async () => {
@@ -327,8 +327,8 @@ describe('Form', () => {
       emailInput.trigger('change')
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalledTimes(1)
-      expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
-      expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
     })
 
     test('reactivity: blurredFields works', async () => {
@@ -340,8 +340,8 @@ describe('Form', () => {
       emailInput.trigger('blur')
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalledTimes(1)
-      expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
-      expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
     })
 
     test('reactivity: dirtyFields works', async () => {
@@ -352,8 +352,8 @@ describe('Form', () => {
       emailInput.trigger('change')
       await flushPromises()
       expect(mockWatchCallback).toHaveBeenCalledTimes(1)
-      expect(mockWatchCallback.mock.calls[0][0].has('email')).toBe(true)
-      expect(mockWatchCallback.mock.calls[0][0].has('password')).toBe(false)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('email')).toBe(true)
+      expect(mockWatchCallback.mock?.calls[0]?.[0]?.has('password')).toBe(false)
     })
 
     test('reactivity: dirty works', async () => {

test/components/FormField.spec.ts

@@ -18,7 +18,6 @@ import {
   USlider,
   UPinInput,
   UFormField
-
 } from '#components'
 
 const inputComponents = [UInput, URadioGroup, UTextarea, UCheckbox, USelect, USelectMenu, UInputMenu, UInputNumber, USwitch, USlider, UPinInput]
@@ -111,7 +110,6 @@ describe('FormField', () => {
           props: { label: 'Label' },
           inputComponent
         })
-
         const label = wrapper.find('label[for=v-0-0]')
         expect(label.exists()).toBe(true)
 

test/components/RadioGroup.spec.ts

@@ -122,7 +122,7 @@ describe('RadioGroup', () => {
     test('no label for=... on FormField', async () => {
       const { wrapper } = await createForm()
       const formFieldLabel = wrapper.findAll('label').map(label => label.attributes()).filter(label => !label.for?.includes('Option'))[0]
-      expect(formFieldLabel.for).toBeUndefined()
+      expect(formFieldLabel?.for).toBeUndefined()
     })
   })
 })