fix(nuxt, nuxi): improve pages creation and removal dx (#8502)

packages/nuxi/src/commands/dev.ts

@@ -1,5 +1,6 @@
 import type { AddressInfo } from 'node:net'
 import { RequestListener } from 'node:http'
+import { existsSync, readdirSync } from 'node:fs'
 import { resolve, relative, normalize } from 'pathe'
 import chokidar from 'chokidar'
 import { debounce } from 'perfect-debounce'
@@ -129,16 +130,28 @@ export default defineNuxtCommand({
 
       const isDirChange = ['addDir', 'unlinkDir'].includes(event)
       const isFileChange = ['add', 'unlink'].includes(event)
-      const reloadDirs = [currentNuxt.options.dir.pages, 'components', 'composables']
+      const pagesDir = resolve(currentNuxt.options.srcDir, currentNuxt.options.dir.pages)
-        .map(d => resolve(currentNuxt.options.srcDir, d))
+      const reloadDirs = ['components', 'composables'].map(d => resolve(currentNuxt.options.srcDir, d))
 
       if (isDirChange) {
         if (reloadDirs.includes(file)) {
-          dLoad(true, `Directory \`${relativePath}/\` ${event === 'addDir' ? 'created' : 'removed'}`)
+          return dLoad(true, `Directory \`${relativePath}/\` ${event === 'addDir' ? 'created' : 'removed'}`)
         }
-      } else if (isFileChange) {
+      }
+
+      if (isFileChange) {
         if (file.match(/(app|error|app\.config)\.(js|ts|mjs|jsx|tsx|vue)$/)) {
-          dLoad(true, `\`${relativePath}\` ${event === 'add' ? 'created' : 'removed'}`)
+          return dLoad(true, `\`${relativePath}\` ${event === 'add' ? 'created' : 'removed'}`)
+        }
+      }
+
+      if (file.startsWith(pagesDir)) {
+        const hasPages = existsSync(pagesDir) ? readdirSync(pagesDir).length > 0 : false
+        if (currentNuxt && !currentNuxt.options.pages && hasPages) {
+          return dLoad(true, 'Pages enabled')
+        }
+        if (currentNuxt && currentNuxt.options.pages && !hasPages) {
+          return dLoad(true, 'Pages disabled')
         }
       }
     })

packages/nuxt/src/pages/module.ts

@@ -1,4 +1,4 @@
-import { existsSync } from 'node:fs'
+import { existsSync, readdirSync } from 'node:fs'
 import { defineNuxtModule, addTemplate, addPlugin, addVitePlugin, addWebpackPlugin, findPath, addComponent, updateTemplates } from '@nuxt/kit'
 import { relative, resolve } from 'pathe'
 import { genString, genImport, genObjectFromRawEntries } from 'knitwork'
@@ -18,16 +18,32 @@ export default defineNuxtModule({
       layer => resolve(layer.config.srcDir, layer.config.dir?.pages || 'pages')
     )
 
-    const isRouterOptionsPresent = nuxt.options._layers.some(layer => existsSync(resolve(layer.config.srcDir, 'app/router.options.ts')))
-
     // Disable module (and use universal router) if pages dir do not exists or user has disabled it
-    if ((nuxt.options.pages === false || (nuxt.options.pages !== true && !pagesDirs.some(dir => existsSync(dir)))) && !isRouterOptionsPresent) {
+    const isNonEmptyDir = (dir: string) => existsSync(dir) && readdirSync(dir).length
+    const isPagesEnabled = () => {
+      if (typeof nuxt.options.pages === 'boolean') {
+        return nuxt.options.pages
+      }
+      if (nuxt.options._layers.some(layer => existsSync(resolve(layer.config.srcDir, 'app/router.options.ts')))) {
+        return true
+      }
+      if (pagesDirs.some(dir => isNonEmptyDir(dir))) {
+        return true
+      }
+      return false
+    }
+    nuxt.options.pages = isPagesEnabled()
+
+    if (!nuxt.options.pages) {
       addPlugin(resolve(distDir, 'app/plugins/router'))
-      // Add vue-router import for `<NuxtLayout>` integration
       addTemplate({
         filename: 'pages.mjs',
         getContents: () => 'export { useRoute } from \'#app\''
       })
+      addComponent({
+        name: 'NuxtPage',
+        filePath: resolve(distDir, 'pages/runtime/page-placeholder')
+      })
       return
     }
 

packages/nuxt/src/pages/runtime/page-placeholder.ts

@@ -0,0 +1,11 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'NuxtPage',
+  setup (_, props) {
+    if (process.dev) {
+      console.warn('Create a Vue component in the `pages/` directory to enable `<NuxtPage>`')
+    }
+    return () => props.slots.default?.()
+  }
+})