feat(nuxt): warn when page uses a layout without `<NuxtLayout>` (#24116)

packages/nuxt/src/app/components/nuxt-layout.ts

@@ -57,6 +57,10 @@ export default defineComponent({
 
     const done = nuxtApp.deferHydration()
 
+    if (import.meta.dev) {
+      nuxtApp._isNuxtLayoutUsed = true
+    }
+
     return () => {
       const hasLayout = layout.value && layout.value in layouts
       if (import.meta.dev && layout.value && !hasLayout && layout.value !== 'default') {

packages/nuxt/src/app/plugins/check-if-layout-used.ts

@@ -0,0 +1,21 @@
+import { defineNuxtPlugin } from '../nuxt'
+import { onNuxtReady } from '../composables/ready'
+
+// @ts-expect-error virtual file
+import layouts from '#build/layouts'
+
+export default defineNuxtPlugin({
+  name: 'nuxt:checkIfLayoutUsed',
+  setup (nuxtApp) {
+    function checkIfLayoutUsed () {
+      if (!nuxtApp._isNuxtLayoutUsed && Object.keys(layouts).length > 0) {
+        console.warn('[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.')
+      }
+    }
+    if (import.meta.server) {
+      nuxtApp.hook('app:rendered', checkIfLayoutUsed)
+    } else {
+      onNuxtReady(checkIfLayoutUsed)
+    }
+  }
+})

packages/nuxt/src/core/nuxt.ts

@@ -159,6 +159,11 @@ async function initNuxt (nuxt: Nuxt) {
     addWebpackPlugin(() => DevOnlyPlugin.webpack({ sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client }))
   }
 
+  if (nuxt.options.dev) {
+    // Add plugin to check if layouts are defined without NuxtLayout being instantiated
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/check-if-layout-used'))
+  }
+
   // Transform initial composable call within `<script setup>` to preserve context
   if (nuxt.options.experimental.asyncContext) {
     addBuildPlugin(AsyncContextInjectionPlugin(nuxt))