chore: Update to Nuxt 4.6.1, @ionic/vue to 9

docs/package.json

@@ -2,6 +2,7 @@
   "name": "nuxt-ionic-docs",
   "description": "Batteries-included Ionic integration for Nuxt.",
   "homepage": "https://github.com/nuxt-modules/ionic/",
+  "type": "module",
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build",
@@ -14,7 +15,7 @@
     "@nuxtjs/plausible": "4.0.0",
     "better-sqlite3": "13.0.3",
     "docus": "5.13.0",
-    "nuxt": "4.4.7",
+    "nuxt": "4.6.1",
     "tailwindcss": "4.3.3"
   }
 }

package.json

@@ -60,9 +60,8 @@
     "@capacitor/cli": "^8.0.0",
     "@capacitor/core": "^8.0.0",
     "@ionic/cli": "^7.2.1",
-    "@ionic/vue": "^8.7.3",
+    "@ionic/vue": "^9.0.0",
     "@ionic/vue-router": "^9.0.0",
-    "@nuxt/kit": "^4.1.2",
     "@unhead/vue": "^2.0.14",
     "ionicons": "^8.0.13",
     "jiti": "^2.6.0",
@@ -75,8 +74,9 @@
   "devDependencies": {
     "@ionic/core": "9.0.6",
     "@nuxt/eslint-config": "1.17.0",
+    "@nuxt/kit": "^4.6.1",
     "@nuxt/module-builder": "1.0.3",
-    "@nuxt/schema": "4.5.2",
+    "@nuxt/schema": "4.6.1",
     "@nuxt/test-utils": "4.3.3",
     "@types/node": "24.19.1",
     "@vitest/coverage-v8": "5.0.3",
@@ -87,7 +87,7 @@
     "happy-dom": "20.14.5",
     "husky": "9.1.7",
     "lint-staged": "17.6.0",
-    "nuxt": "4.4.7",
+    "nuxt": "4.6.1",
     "playwright-core": "1.63.0",
     "simple-git-hooks": "2.14.0",
     "typescript": "6.0.3",

playground/nuxt.config.ts

@@ -1,7 +1,23 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/ionic'],
   css: ['~/assets/css/ionic.css'],
+  future: {
+    compatibilityVersion: 5,
+  },
   compatibilityDate: '2024-08-19',
+  vite: {
+    optimizeDeps: {
+      include: [
+        '@capacitor/camera',
+        '@capacitor/core',
+        '@capacitor/filesystem',
+        '@capacitor/preferences',
+        '@ionic/vue',
+        '@ionic/vue-router',
+        'ionicons/icons',
+      ],
+    },
+  },
   ionic: {
     // integrations: {
     //   icons: true,

playground/package.json

@@ -12,6 +12,6 @@
     "@capacitor/filesystem": "8.1.4",
     "@capacitor/preferences": "8.0.1",
     "@nuxtjs/ionic": "latest",
-    "nuxt": "4.4.7"
+    "nuxt": "4.6.1"
   }
 }

pnpm-workspace.yaml

@@ -3,8 +3,8 @@ packages:
   - docs
 
 overrides:
-  "@nuxt/kit": "^4.1.2"
-  "@nuxt/schema": "4.5.2"
+  "@nuxt/kit": "^4.6.1"
+  "@nuxt/schema": "^4.6.1"
   "@nuxtjs/ionic": "workspace:*"
   consola: "^3.4.2"
   nuxt-component-meta: ">=0.14.0"

src/imports.ts

@@ -18,7 +18,6 @@ export const IonicHooks = [
   'alertController',
   'actionSheetController',
   'loadingController',
-  'pickerController',
   'toastController',
   'onIonViewDidEnter',
   'onIonViewDidLeave',
@@ -89,7 +88,6 @@ export const IonicBuiltInComponents = [
   'IonPicker',
   'IonPickerColumn',
   'IonPickerColumnOption',
-  'IonPickerLegacy',
   'IonPopover',
   'IonProgressBar',
   'IonRadio',

src/module.ts

@@ -1,6 +1,7 @@
 import { existsSync, promises as fsp } from 'node:fs'
 
 import {
+  extendRouteRules,
   defineNuxtModule,
   addComponent,
   addPlugin,
@@ -101,6 +102,11 @@ export default defineNuxtModule<ModuleOptions>({
     config: {},
   },
   async setup(options, nuxt) {
+    nuxt.options.vite.define ??= {}
+    // Force-enable Vue's Options API.
+    // @ionic/vue components rely on it, but it is disabled by default in Nuxt 5.
+    nuxt.options.vite.define.__VUE_OPTIONS_API__ = true
+
     nuxt.options.build.transpile.push(runtimeDir)
     nuxt.options.build.transpile.push(/@ionic/, /@stencil/)
 
@@ -173,12 +179,12 @@ export default defineNuxtModule<ModuleOptions>({
     ])
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    if (nuxt.options.nitro.static || (nuxt.options as any)._generate /* TODO: remove in future */) {
-      nuxt.hook('nitro:config', async (config) => {
-        config.prerender ||= {}
-        config.prerender.routes ||= []
-        config.prerender.routes.push('/200.html')
+    if ((nuxt.options as any).nitro?.static || (nuxt.options as any)._generate /* TODO: remove in future */) {
+      // Prerender the SPA fallback route (used by the Capacitor webDir)
+      extendRouteRules('/200.html', { prerender: true })
 
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      nuxt.hook('nitro:config', async (config: any) => {
         config.output ||= {}
         if (!config.output.publicDir) {
           const distDir = resolve(nuxt.options.rootDir, 'dist')
@@ -194,7 +200,8 @@ export default defineNuxtModule<ModuleOptions>({
 
       // Ensure there is an index.html file present when doing static file generation
       let publicFolder: string
-      nuxt.hook('nitro:init', (nitro) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      nuxt.hook('nitro:init', (nitro: any) => {
         publicFolder = nitro.options.output.publicDir
       })
 

src/runtime/plugins/router.ts

@@ -8,7 +8,7 @@ import {
 import { isReadonly, reactive, shallowReactive, shallowRef } from 'vue'
 import type { Ref } from 'vue'
 import type { RouteLocationNormalizedLoaded, Router } from 'vue-router'
-import { createError } from 'h3'
+import { createError } from '#app'
 import { isEqual, withoutBase } from 'ufo'
 
 import type { PageMeta, Plugin, RouteMiddleware } from '#app'
@@ -116,9 +116,9 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
         }
         if (to.matched.length === 0) {
           await nuxtApp.runWithContext(() => showError(createError({
-            statusCode: 404,
+            status: 404,
             fatal: false,
-            statusMessage: `Page not found: ${to.fullPath}`,
+            statusText: `Page not found: ${to.fullPath}`,
             data: {
               path: to.fullPath,
             },
@@ -196,8 +196,8 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
           if (import.meta.server || (!nuxtApp.payload.serverRendered && nuxtApp.isHydrating)) {
             if (result === false || result instanceof Error) {
               const error = result || createError({
-                statusCode: 404,
-                statusMessage: `Page Not Found: ${initialURL}`,
+                status: 404,
+                statusText: `Page Not Found: ${initialURL}`,
               })
               await nuxtApp.runWithContext(() => showError(error))
               return false