fix: add v4 compatibility version handeling for pages tab (#758)

Author: arashsheyda

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
+}

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',

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')

playgrounds/v4/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

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,
+  },
+})

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"
+  }
+}

playgrounds/v4/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}