feat: support nuxt v5

docs/package.json

@@ -14,7 +14,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"
   }
 }

eslint.config.js

@@ -9,6 +9,7 @@ export default createConfigForNuxt({
   dirs: {
     src: [
       './playground',
+      './playground-v5',
       './docs',
     ],
   },
@@ -26,7 +27,7 @@ export default createConfigForNuxt({
     },
   },
   {
-    files: ['playground/**'],
+    files: ['playground/**', 'playground-v5/**'],
     rules: {
       'vue/no-deprecated-slot-attribute': 'off',
     },

package.json

@@ -44,8 +44,9 @@
   "scripts": {
     "build": "pnpm dev:prepare && nuxt-module-build build",
     "dev": "nuxt dev playground",
+    "dev:v5": "pnpm --dir playground-v5 exec nuxt dev",
     "dev:build": "nuxt build playground",
-    "dev:prepare": "pnpm nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
+    "dev:prepare": "pnpm nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground && pnpm --dir playground-v5 exec nuxt prepare",
     "docs:dev": "pnpm --filter 'nuxt-ionic-docs' dev",
     "docs:build": "pnpm --filter 'nuxt-ionic-docs' generate",
     "lint": "eslint",
@@ -62,8 +63,8 @@
     "@ionic/cli": "^7.2.1",
     "@ionic/vue": "^8.7.3",
     "@ionic/vue-router": "^9.0.0",
-    "@nuxt/kit": "^4.1.2",
-    "@unhead/vue": "^2.0.14",
+    "@nuxt/kit": "^4.6.1",
+    "@unhead/vue": "^3.4.2",
     "ionicons": "^8.0.13",
     "jiti": "^2.6.0",
     "pathe": "^2.0.3",
@@ -76,7 +77,7 @@
     "@ionic/core": "9.0.6",
     "@nuxt/eslint-config": "1.17.0",
     "@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,12 +88,12 @@
     "happy-dom": "20.14.6",
     "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",
     "unbuild": "3.6.1",
-    "unhead": "2.1.17",
+    "unhead": "3.4.2",
     "vitest": "5.0.3",
     "vue": "3.5.43",
     "vue-tsc": "3.3.12"

playground-v5/components/ExploreContainer.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+const props = defineProps({ name: String })
+useHead({
+  title: `Explore Container - ${props.name}`,
+})
+</script>
+
+<template>
+  <div id="container">
+    <strong>{{ name }}</strong>
+    <p>
+      Explore <a
+        target="_blank"
+        rel="noopener noreferrer"
+        href="https://ionicframework.com/docs/components"
+      >UI Components</a>
+    </p>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  text-align: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+  color: #8c8c8c;
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}
+</style>

playground-v5/middleware/auth.global.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default defineNuxtRouteMiddleware((to) => {
+  console.log('ran middleware')
+})

playground-v5/nuxt.config.ts

@@ -0,0 +1,4 @@
+export default defineNuxtConfig({
+  modules: ['@nuxtjs/ionic'],
+  compatibilityDate: '2024-08-19',
+})

playground-v5/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "nuxt-ionic-playground-v5",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt generate"
+  },
+  "devDependencies": {
+    "@nuxtjs/ionic": "latest",
+    "nuxt": "npm:nuxt-nightly@5x"
+  }
+}

playground-v5/pages/overlap.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+useHead({
+  title: 'Overlapping - no tabs',
+})
+const isExploreEnabled = ref(true)
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/tabs/tab3" />
+        </ion-buttons>
+        <ion-title>Overlapping - no tabs</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Overlap Page"
+      />
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-op"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Overlap Explore Container
+        </ion-button>
+      </p>
+    </ion-content>
+  </ion-page>
+</template>

playground-v5/pages/tabs.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+useHead({
+  title: 'House Tabs',
+})
+</script>
+
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-tabs>
+        <ion-router-outlet />
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button
+            tab="tab1"
+            href="/tabs/tab1"
+          >
+            <ion-icon :icon="ioniconsHomeOutline" />
+            <ion-label>Tab 1</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button
+            tab="tab2"
+            href="/tabs/tab2"
+          >
+            <ion-icon :icon="ioniconsImagesOutline" />
+            <ion-label>Photos</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button
+            tab="tab3"
+            href="/tabs/tab3"
+          >
+            <ion-icon :icon="ioniconsBulbOutline" />
+            <ion-label>Tab 3</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button
+            tab="tab4"
+            href="/tabs/tab4"
+          >
+            <ion-icon :icon="ioniconsAccessibilityOutline" />
+            <ion-label>Animation examples</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-content>
+  </ion-page>
+</template>

playground-v5/pages/tabs/tab1/index.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+definePageMeta({
+  alias: ['/', '/tabs'],
+})
+useHead({
+  title: 'Tab 1',
+})
+const isExploreEnabled = ref(true)
+</script>
+
+<template>
+  <ion-page>
+    <ion-header translucent>
+      <ion-toolbar>
+        <ion-thumbnail slot="start">
+          <ion-img src="/icon.png" />
+        </ion-thumbnail>
+        <ion-title> Nuxt Ionic </ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Tab 1"
+      />
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">
+            Tab 1
+          </ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-list>
+        <ion-item>
+          <ion-checkbox
+            slot="start"
+            aria-label="Mark idea complete"
+          />
+          <ion-label>
+            <h1>Create Idea</h1>
+            <ion-note>Run Idea By Brandy</ion-note>
+          </ion-label>
+          <ion-badge
+            slot="end"
+            color="success"
+          >
+            5 Days
+          </ion-badge>
+        </ion-item>
+      </ion-list>
+
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-1"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Explore Container - Tab 1
+        </ion-button>
+      </p>
+    </ion-content>
+  </ion-page>
+</template>

playground-v5/pages/tabs/tab2/index.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+useHead({
+  title: 'Tab 2 - Photos',
+})
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Photo Gallery</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-fab
+        slot="fixed"
+        vertical="bottom"
+        horizontal="center"
+      >
+        <ion-fab-button>
+          <ion-icon :icon="ioniconsCamera" />
+        </ion-fab-button>
+      </ion-fab>
+    </ion-content>
+  </ion-page>
+</template>

playground-v5/pages/tabs/tab3/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+useHead({
+  title: 'Tab 3',
+})
+const isExploreEnabled = ref(true)
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 3</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">
+            Tab 3
+          </ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-button router-link="/tabs/tab3/page-two">
+        Go to page two
+      </ion-button>
+      <ion-button router-link="/overlap">
+        Go to overlapping page
+      </ion-button>
+      <ExploreContainer
+        v-if="isExploreEnabled"
+        name="Tab 3"
+      />
+      <p style="text-align: center;">
+        <ion-button
+          class="explorer-toggle-3"
+          fill="solid"
+          color="primary"
+          strong
+          @click="isExploreEnabled = !isExploreEnabled"
+        >
+          Toggle Explore Container - Tab 3
+        </ion-button>
+      </p>
+    </ion-content>
+  </ion-page>
+</template>