chore(nuxt): warn if NuxtPage is not used when pages enabled (#25490)

packages/nuxt/src/pages/module.ts

@@ -70,6 +70,11 @@ export default defineNuxtModule({
     }
     nuxt.options.pages = await isPagesEnabled()
 
+    if (nuxt.options.dev && nuxt.options.pages) {
+      // Add plugin to check if pages are enabled without NuxtPage being instantiated
+      addPlugin(resolve(runtimeDir, 'plugins/check-if-page-unused'))
+    }
+
     nuxt.hook('app:templates', async (app) => {
       app.pages = await resolvePagesRoutes()
       await nuxt.callHook('pages:extend', app.pages)

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

@@ -63,6 +63,10 @@ export default defineComponent({
       })
     }
 
+    if (import.meta.dev) {
+      nuxtApp._isNuxtPageUsed = true
+    }
+
     return () => {
       return h(RouterView, { name: props.name, route: props.route, ...attrs }, {
         default: (routeProps: RouterViewSlotProps) => {

packages/nuxt/src/pages/runtime/plugins/check-if-page-unused.ts

@@ -0,0 +1,30 @@
+import { nextTick } from 'vue'
+import { defineNuxtPlugin } from '#app/nuxt'
+import { onNuxtReady } from '#app/composables/ready'
+import { useError } from '#app/composables/error'
+
+export default defineNuxtPlugin({
+  name: 'nuxt:checkIfPageUnused',
+  setup (nuxtApp) {
+    const error = useError()
+
+    function checkIfPageUnused () {
+      if (!error.value && !nuxtApp._isNuxtPageUsed) {
+        console.warn(
+          '[nuxt] Your project has pages but the `<NuxtPage />` component has not been used.'
+          + ' You might be using the `<RouterView />` component instead, which will not work correctly in Nuxt.'
+          + ' You can set `pages: false` in `nuxt.config` if you do not wish to use the Nuxt `vue-router` integration.'
+        )
+      }
+    }
+
+    if (import.meta.server) {
+      nuxtApp.hook('app:rendered', () => { nextTick(checkIfPageUnused) })
+    } else {
+      onNuxtReady(checkIfPageUnused)
+    }
+  },
+  env: {
+    islands: false
+  }
+})