feat: Nuxt 4 compatibility (#77)

* use new directory structure

* generate separate template for server options types

* Update dev dependencies

* add test to check for Nuxt 3 compatibility (old folder structure)

* Fix type imports, use vue-tsc for typecheck

* fix docs build

* recreate package-lock.json

* bump node version

.github/workflows/test.js.yml

@@ -41,4 +41,5 @@ jobs:
 
       - name: nuxi typecheck
         run: |
+          npm run dev:prepare
           npm run typecheck

.nvmrc

@@ -1 +1 @@
-16
+20

package.json

@@ -40,11 +40,12 @@
     "prepack": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:playground-disk": "nuxi dev playground-disk",
+    "dev:playground-nuxt3": "nuxi dev playground-nuxt3",
     "dev:build": "nuxi build playground",
     "dev:serve": "node playground/.output/server/index.mjs",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare playground-disk",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground-disk && nuxi prepare playground-nuxt3 && nuxi prepare playground",
     "dev:inspect": "nuxi dev playground --inspect",
-    "typecheck": "nuxi typecheck",
+    "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
     "docs:dev": "vitepress dev docs --port 5000",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs --port 5000",
@@ -66,14 +67,14 @@
     "dist"
   ],
   "dependencies": {
-    "@nuxt/kit": "^3.12.2",
+    "@nuxt/kit": "^3.13.2",
     "@tusbar/cache-control": "^1.0.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
     "@nuxt/module-builder": "^0.7.1",
-    "@nuxt/schema": "^3.12.2",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxt/test-utils": "^3.14.3",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@types/node": "^20.14.2",
     "@vue/test-utils": "^2.4.6",
@@ -83,11 +84,12 @@
     "eslint-plugin-vue": "^9.26.0",
     "h3-compression": "^0.3.2",
     "happy-dom": "^14.12.0",
-    "nuxt": "^3.12.2",
+    "nuxt": "^3.13.2",
     "playwright-core": "^1.44.1",
     "prettier": "^3.3.2",
-    "vitepress": "^1.2.3",
+    "vitepress": "^1.4.1",
     "vitest": "^1.6.0",
-    "vue-json-pretty": "^2.4.0"
+    "vue-json-pretty": "^2.4.0",
+    "vue-tsc": "^2.1.6"
   }
 }

playground-nuxt3/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="app">
+    <NuxtPage />
+  </div>
+</template>

playground-nuxt3/app/multiCache.serverOptions.ts

@@ -0,0 +1,7 @@
+import { defineMultiCacheOptions } from './../../src/runtime/serverOptions/defineMultiCacheOptions'
+
+export default defineMultiCacheOptions({
+  cacheKeyPrefix: (): Promise<string> => {
+    return Promise.resolve('MY_CACHE_PREFIX_')
+  },
+})

playground-nuxt3/nuxt.config.ts

@@ -0,0 +1,39 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import NuxtMultiCache from './../src/module'
+
+export default defineNuxtConfig({
+  modules: [NuxtMultiCache],
+
+  imports: {
+    autoImport: true,
+  },
+
+  multiCache: {
+    debug: true,
+    component: {
+      enabled: true,
+    },
+    route: {
+      enabled: true,
+    },
+
+    data: {
+      enabled: true,
+    },
+
+    cdn: {
+      enabled: true,
+    },
+    api: {
+      enabled: true,
+      cacheTagInvalidationDelay: 5000,
+      authorization: false,
+    },
+  },
+
+  compatibilityDate: '2024-10-19',
+
+  future: {
+    compatibilityVersion: 3,
+  },
+})

playground-nuxt3/pages/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>This is a cached page.</div>
+</template>
+
+<script lang="ts" setup>
+import { useRouteCache } from '#imports'
+
+useRouteCache((helper) => {
+  helper.setCacheable()
+})
+</script>

playground-nuxt3/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

playground/components/Navbar.vue → playground/app/components/Navbar.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useAsyncData } from 'nuxt/app'
+import { useAsyncData } from '#imports'
 
 const { data: users } = await useAsyncData('navbar', () => {
   return $fetch('/api/getUsers').then((v) => {

playground/components/QueryValue.vue → playground/app/components/QueryValue.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts" setup>
-import { useRoute } from 'nuxt/app'
-import { computed } from 'vue'
+import { useRoute, computed } from '#imports'
+
 const route = useRoute()
 
 const queryValue = computed(() => {

playground/components/RandomNumber.vue → playground/app/components/RandomNumber.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from '#imports'
 
 const random = computed(() => {
   return 'RANDOM_NUMBER__' + Math.round(Math.random() * 1000000000) + '__'

playground/components/UserMenuItem.vue → playground/app/components/UserMenuItem.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from '#imports'
 
 const props = defineProps({
   userId: String,

playground/components/UserTeaser.vue → playground/app/components/UserTeaser.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed } from '#imports'
 
 const props = defineProps({
   userId: String,

playground/components/WithAsyncData.vue → playground/app/components/WithAsyncData.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useAsyncData } from 'nuxt/app'
+import { useAsyncData } from '#imports'
 
 const { data } = await useAsyncData<any>('withAsyncData', () => {
   return $fetch('/api/test').then((v) => {

playground/components/apiPlayground.vue → playground/app/components/apiPlayground.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from '#imports'
 
 type StatsResponse = {
   status: string
@@ -54,6 +54,9 @@ getCache()
 const getData = (data: string) => {
   const cacheItem = data.split('<CACHE_ITEM>')
   const headers = cacheItem[0]
+  if (!headers) {
+    return
+  }
   try {
     return JSON.parse(headers)
   } catch (e) {

playground/app/multiCache.serverOptions.ts

@@ -12,7 +12,7 @@ const customDriver = defineDriver(() => {
       if (key.includes('static_item_for_test')) {
         return JSON.stringify({ data: 'just_an_example_value' })
       }
-      return cache[key]
+      return cache[key] || null
     },
     setItem(key, value) {
       cache[key] = value

playground/pages/cachedPageWithRandomNumber.vue → playground/app/pages/cachedPageWithRandomNumber.vue

@@ -3,8 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useAsyncData } from 'nuxt/app'
-import { useCDNHeaders, useRouteCache } from '#imports'
+import { useCDNHeaders, useRouteCache, useAsyncData } from '#imports'
 
 const { data: random } = await useAsyncData(() => {
   return Promise.resolve(Math.round(Math.random() * 1000000000).toString())

playground/pages/index.vue → playground/app/pages/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useAsyncData } from 'nuxt/app'
+import { useAsyncData } from '#imports'
 
 const { data: users } = await useAsyncData(() => {
   return $fetch('/api/getUsers').then((v) => {

playground/pages/nested/page/random.vue → playground/app/pages/nested/page/random.vue

@@ -3,9 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useAsyncData } from 'nuxt/app'
-import { useRouteCache } from '#imports'
+import { useRouteCache, useAsyncData } from '#imports'
 
 const { data: random } = await useAsyncData(() => {
   return Promise.resolve(Math.round(Math.random() * 1000000000).toString())

playground/app/pages/noCache.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <RenderCacheable cache-key="one" :cache-tags="['tag1']" :no-cache="true">
+      <QueryValue />
+    </RenderCacheable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RenderCacheable } from '#components'
+</script>

playground/pages/payloadData.vue → playground/app/pages/payloadData.vue

@@ -1,14 +1,14 @@
 <template>
   <div>
-    <RenderCacheableComponent
+    <RenderCacheable
       cache-key="test_18539"
       :async-data-keys="['withAsyncData']"
     >
       <WithAsyncData />
-    </RenderCacheableComponent>
+    </RenderCacheable>
   </div>
 </template>
 
 <script setup lang="ts">
-import RenderCacheableComponent from '../../src/runtime/components/RenderCacheable'
+import { RenderCacheable } from '#components'
 </script>

playground/app/pages/test.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <RenderCacheable cache-key="one" :cache-tags="['tag1']">
+      <QueryValue />
+    </RenderCacheable>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { RenderCacheable } from '#components'
+</script>

playground/pages/useCachedAsyncData.vue → playground/app/pages/useCachedAsyncData.vue

@@ -15,7 +15,7 @@
 
 <script lang="ts" setup>
 import { useCachedAsyncData } from '#imports'
-import type { UsersWithCacheability } from '~/server/api/getUsersWithCacheability'
+import type { UsersWithCacheability } from '~~/server/api/getUsersWithCacheability'
 
 const { data, refresh } = await useCachedAsyncData(
   'all-users',

playground/pages/user/[id].vue → playground/app/pages/user/[id].vue

@@ -5,9 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { useAsyncData } from 'nuxt/app'
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { useAsyncData, computed, useRoute } from '#imports'
 
 const route = useRoute()
 const userId = computed(() => {

playground/nuxt.config.ts

@@ -17,10 +17,13 @@ export default defineNuxtConfig({
       },
     },
   },
+
   modules: [NuxtMultiCache],
+
   imports: {
-    autoImport: false,
+    autoImport: true,
   },
+
   multiCache: {
     debug: true,
     component: {
@@ -44,5 +47,10 @@ export default defineNuxtConfig({
     },
   },
 
+  future: {
+    compatibilityVersion: 4,
+  },
+
   css: ['vue-json-pretty/lib/styles.css'],
+  compatibilityDate: '2024-10-18',
 })

playground/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}