From bd8651cc66d21314f101334527332759f4940035 Mon Sep 17 00:00:00 2001
From: Arash Ari Sheyda <38922203+arashsheyda@users.noreply.github.com>
Date: Sat, 30 Nov 2024 23:56:52 -0700
Subject: [PATCH] fix: add v4 compatibility version handeling for pages tab
 (#758)

---
 packages/devtools/client/composables/utils.ts    |  6 ++++++
 packages/devtools/client/pages/modules/pages.vue |  7 ++++++-
 packages/devtools/src/wizard/enable-pages.ts     |  5 +++--
 playgrounds/v4/.npmrc                            |  2 ++
 playgrounds/v4/nuxt.config.ts                    | 12 ++++++++++++
 playgrounds/v4/package.json                      | 10 ++++++++++
 playgrounds/v4/tsconfig.json                     |  4 ++++
 pnpm-lock.yaml                                   |  2 ++
 8 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 playgrounds/v4/.npmrc
 create mode 100644 playgrounds/v4/nuxt.config.ts
 create mode 100644 playgrounds/v4/package.json
 create mode 100644 playgrounds/v4/tsconfig.json

diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
index c349f2d0d4..6c0c37300f 100644
--- a/packages/devtools/client/composables/utils.ts
+++ b/packages/devtools/client/composables/utils.ts
@@ -9,6 +9,7 @@ import { useSessionStorage } from '@vueuse/core'
 import { relative } from 'pathe'
 import { triggerRef } from 'vue'
 import { useClient } from './client'
+import { useServerConfig } from './state'
 
 export function isNodeModulePath(path: string) {
   return !!path.match(/[/\\]node_modules[/\\]/) || isPackageName(path)
@@ -183,3 +184,8 @@ export function refreshData() {
 export function reloadPage() {
   location.reload()
 }
+
+export function useNuxtCompatibilityVersion() {
+  const config = useServerConfig()
+  return config.value?.future.compatibilityVersion
+}
diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue
index 797c06a0fd..a64b4b9d40 100644
--- a/packages/devtools/client/pages/modules/pages.vue
+++ b/packages/devtools/client/pages/modules/pages.vue
@@ -3,6 +3,7 @@ import { definePageMeta } from '#imports'
 import { computed, onMounted, ref } from 'vue'
 import { useClient, useClientRoute, useClientRouter } from '~/composables/client'
 import { useLayouts, useMergedRouteList, useServerApp, useServerConfig } from '~/composables/state'
+import { useNuxtCompatibilityVersion } from '~/composables/utils'
 
 definePageMeta({
   icon: 'carbon-tree-view-alt',
@@ -59,6 +60,10 @@ function navigateToRoute(path: string) {
   router.value.push(path)
   routeInput.value = path
 }
+
+const compatibilityVersion = useNuxtCompatibilityVersion()
+
+const pagesPath = computed(() => `./${compatibilityVersion === 4 ? 'app/' : ''}pages/index.vue`)
 </script>
 
 <template>
@@ -164,7 +169,7 @@ function navigateToRoute(path: string) {
     icon="carbon-tree-view-alt"
     name="wizard-pages"
     title="Nuxt Routing"
-    description="Create `./pages/index.vue` to enable routing"
+    :description="`Create ${pagesPath} to enable routing`"
     :actions="[
       {
         label: 'Learn more',
diff --git a/packages/devtools/src/wizard/enable-pages.ts b/packages/devtools/src/wizard/enable-pages.ts
index c99fc73472..c2b10615e4 100644
--- a/packages/devtools/src/wizard/enable-pages.ts
+++ b/packages/devtools/src/wizard/enable-pages.ts
@@ -18,8 +18,9 @@ const route = useRoute()
 `
 
 export async function enablePages(nuxt: Nuxt) {
-  const pathApp = join(nuxt.options.srcDir, 'app.vue')
-  const pathPageIndex = join(nuxt.options.srcDir, 'pages/index.vue')
+  const baseDir = nuxt.options.future.compatibilityVersion === 4 ? nuxt.options.dir.app : nuxt.options.srcDir
+  const pathApp = join(baseDir, 'app.vue')
+  const pathPageIndex = join(baseDir, 'pages/index.vue')
 
   if (fs.existsSync(pathPageIndex)) {
     logger.warn('pages/index.vue already exists, skipping')
diff --git a/playgrounds/v4/.npmrc b/playgrounds/v4/.npmrc
new file mode 100644
index 0000000000..cf04042455
--- /dev/null
+++ b/playgrounds/v4/.npmrc
@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
diff --git a/playgrounds/v4/nuxt.config.ts b/playgrounds/v4/nuxt.config.ts
new file mode 100644
index 0000000000..d848d3c088
--- /dev/null
+++ b/playgrounds/v4/nuxt.config.ts
@@ -0,0 +1,12 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    '../../local',
+  ],
+
+  compatibilityDate: '2024-09-19',
+
+  future: {
+    compatibilityVersion: 4,
+  },
+})
diff --git a/playgrounds/v4/package.json b/playgrounds/v4/package.json
new file mode 100644
index 0000000000..d270075acb
--- /dev/null
+++ b/playgrounds/v4/package.json
@@ -0,0 +1,10 @@
+{
+  "version": "1.6.1",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  }
+}
diff --git a/playgrounds/v4/tsconfig.json b/playgrounds/v4/tsconfig.json
new file mode 100644
index 0000000000..a746f2a70c
--- /dev/null
+++ b/playgrounds/v4/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3a902f0fc..c10fc59c39 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -982,6 +982,8 @@ importers:
         specifier: 'catalog:'
         version: 3.14.1592(@parcel/watcher@2.5.0)(@types/node@22.10.1)(encoding@0.1.13)(eslint@9.15.0(jiti@2.4.0))(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.3)(rollup@4.27.4)(sass@1.77.4)(terser@5.19.4)(typescript@5.6.3)(vite@5.4.11(@types/node@22.10.1)(sass@1.77.4)(terser@5.19.4))(vue-tsc@2.1.10(typescript@5.6.3))
 
+  playgrounds/v4: {}
+
 packages:
 
   '@aashutoshrathi/word-wrap@1.2.6':