nuxt · IonianPlayboy · Mar 15, 2024 · Mar 18, 2024 · Mar 18, 2024 · Mar 18, 2024
diff --git a/packages/nuxt/src/app/components/client-only.ts b/packages/nuxt/src/app/components/client-only.ts
@@ -1,6 +1,5 @@
 import { cloneVNode, createElementBlock, createStaticVNode, defineComponent, getCurrentInstance, h, onMounted, provide, ref } from 'vue'
 import type { ComponentInternalInstance, ComponentOptions, InjectionKey } from 'vue'
-import { useNuxtApp } from '../nuxt'
 import { getFragmentHTML } from './utils'
 
 export const clientOnlySymbol: InjectionKey<boolean> = Symbol.for('nuxt:client-only')
@@ -13,12 +12,6 @@ export default defineComponent({
   setup (_, { slots, attrs }) {
     const mounted = ref(false)
     onMounted(() => { mounted.value = true })
-    // Bail out of checking for pages/layouts as they might be included under `<ClientOnly>` 🤷‍♂️
-    if (import.meta.dev) {
-      const nuxtApp = useNuxtApp()
-      nuxtApp._isNuxtPageUsed = true
-      nuxtApp._isNuxtLayoutUsed = true
-    }
     provide(clientOnlySymbol, true)
     return (props: any) => {
       if (mounted.value) { return slots.default?.() }

diff --git a/packages/nuxt/src/app/components/nuxt-layout.ts b/packages/nuxt/src/app/components/nuxt-layout.ts
@@ -76,10 +76,6 @@ export default defineComponent({
       useRouter().beforeEach(removeErrorHook)
     }
 
-    if (import.meta.dev) {
-      nuxtApp._isNuxtLayoutUsed = true
-    }
-
     return () => {
       const hasLayout = layout.value && layout.value in layouts
       const transitionProps = route.meta.layoutTransition ?? defaultLayoutTransition

diff --git a/packages/nuxt/src/app/plugins/check-component-usage.ts b/packages/nuxt/src/app/plugins/check-component-usage.ts
@@ -0,0 +1,26 @@
+import { defineNuxtPlugin } from '../nuxt'
+// @ts-expect-error virtual file
+import { hasPages, isNuxtLayoutUsed, isNuxtPageUsed } from '#build/detected-component-usage.mjs'
+// @ts-expect-error virtual file
+import layouts from '#build/layouts'
+
+export default defineNuxtPlugin({
+  name: 'nuxt:check-component-usage',
+  setup (nuxtApp) {
+    const cache = new Set<string>()
+
+    nuxtApp.hook('app:mounted', () => {
+      if (Object.keys(layouts).length > 0 && !isNuxtLayoutUsed && !cache.has('NuxtLayout')) {
+        console.warn('[nuxt] Your project has layouts but the `<NuxtLayout />` component has not been used.')
+        cache.add('NuxtLayout')
+      }
+
+      if (hasPages && !isNuxtPageUsed && !cache.has('NuxtPage')) {
+        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.')
+        cache.add('NuxtPage')
+      }
+    })
+  }
+})
diff --git a/packages/nuxt/src/app/plugins/check-if-layout-used.ts b/packages/nuxt/src/app/plugins/check-if-layout-used.ts
diff --git a/packages/nuxt/src/core/nuxt.ts b/packages/nuxt/src/core/nuxt.ts
@@ -1,7 +1,7 @@
 import { dirname, join, normalize, relative, resolve } from 'pathe'
 import { createDebugger, createHooks } from 'hookable'
 import type { LoadNuxtOptions } from '@nuxt/kit'
-import { addBuildPlugin, addComponent, addPlugin, addRouteMiddleware, addServerPlugin, addVitePlugin, addWebpackPlugin, installModule, loadNuxtConfig, logger, nuxtCtx, resolveAlias, resolveFiles, resolvePath, tryResolveModule, useNitro } from '@nuxt/kit'
+import { addBuildPlugin, addComponent, addPlugin, addRouteMiddleware, addServerPlugin, addTemplate, addVitePlugin, addWebpackPlugin, installModule, loadNuxtConfig, logger, nuxtCtx, resolveAlias, resolveFiles, resolvePath, tryResolveModule, useNitro } from '@nuxt/kit'
 import { resolvePath as _resolvePath } from 'mlly'
 import type { Nuxt, NuxtHooks, NuxtOptions } from 'nuxt/schema'
 import type { PackageJson } from 'pkg-types'
@@ -25,6 +25,7 @@ import { UnctxTransformPlugin } from './plugins/unctx'
 import type { TreeShakeComposablesPluginOptions } from './plugins/tree-shake'
 import { TreeShakeComposablesPlugin } from './plugins/tree-shake'
 import { DevOnlyPlugin } from './plugins/dev-only'
+import { DetectComponentUsagePlugin } from './plugins/detect-component-usage'
 import { LayerAliasingPlugin } from './plugins/layer-aliasing'
 import { addModuleTranspiles } from './modules'
 import { initNitro } from './nitro'
@@ -197,8 +198,35 @@ async function initNuxt (nuxt: Nuxt) {
   }
 
   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'))
+    // Add component usage detection
+    const detectedComponents = new Set<string>()
+
+    addBuildPlugin(DetectComponentUsagePlugin({
+      rootDir: nuxt.options.rootDir,
+      exclude: [
+        // Exclude top-level resolutions by plugins
+        join(nuxt.options.rootDir, 'index.html'),
+        // Keep only imports coming from the user's project (inside the rootDir)
+        new RegExp(`^(?!${escapeRE(nuxt.options.rootDir)}/).+[^\n]+$`)
+      ],
+      include: [
+        // Keep the imports coming from the auto-generated runtime app.vue
+        resolve(distDir, 'pages/runtime/app.vue')
+      ],
+      detectedComponents
+    }))
+
+    addTemplate({
+      filename: 'detected-component-usage.mjs',
+      getContents: ({ nuxt }) =>
+        [
+          `export const hasPages = ${nuxt.options.pages}`,
+          `export const isNuxtLayoutUsed = ${detectedComponents.has('NuxtLayout')}`,
+          `export const isNuxtPageUsed = ${detectedComponents.has('NuxtPage')}`
+        ].join('\n')
+    })
+
+    addPlugin(resolve(nuxt.options.appDir, 'plugins/check-component-usage'))
   }
 
   if (nuxt.options.dev && nuxt.options.features.devLogs) {

diff --git a/packages/nuxt/src/core/plugins/detect-component-usage.ts b/packages/nuxt/src/core/plugins/detect-component-usage.ts
@@ -0,0 +1,43 @@
+import { createUnplugin } from 'unplugin'
+import { join, resolve } from 'pathe'
+import { updateTemplates } from '@nuxt/kit'
+import { distDir } from '../../dirs'
+
+interface DetectComponentUsageOptions {
+  rootDir: string
+  exclude?: Array<RegExp | string>
+  include?: Array<RegExp | string>
+  detectedComponents: Set<string>
+}
+
+export const DetectComponentUsagePlugin = (options: DetectComponentUsageOptions) => createUnplugin(() => {
+  const importersToExclude = options?.exclude || []
+  const importersToInclude = options?.include || []
+
+  const detectComponentUsagePatterns: Array<[importPattern: string | RegExp, name: string]> = [
+    [resolve(distDir, 'pages/runtime/page'), 'NuxtPage'],
+    [resolve(distDir, 'app/components/nuxt-layout'), 'NuxtLayout']
+  ]
+
+  return {
+    name: 'nuxt:detect-component-usage',
+    enforce: 'pre',
+    resolveId (id, importer) {
+      if (!importer) { return }
+      if (id[0] === '.') {
+        id = join(importer, '..', id)
+      }
+      const isExcludedImporter = importersToExclude.some(p => typeof p === 'string' ? importer === p : p.test(importer))
+      const isIncludedImporter = importersToInclude.some(p => typeof p === 'string' ? importer === p : p.test(importer))
+      if (isExcludedImporter && !isIncludedImporter) { return }
+
+      for (const [pattern, name] of detectComponentUsagePatterns) {
+        if (pattern instanceof RegExp ? pattern.test(id) : pattern === id) {
+          options.detectedComponents.add(name)
+          updateTemplates({ filter: template => template.filename === 'detected-component-usage.mjs' })
+        }
+      }
+      return null
+    }
+  }
+})
diff --git a/packages/nuxt/src/pages/module.ts b/packages/nuxt/src/pages/module.ts
@@ -71,11 +71,6 @@ 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)

diff --git a/packages/nuxt/src/pages/runtime/page.ts b/packages/nuxt/src/pages/runtime/page.ts
@@ -62,10 +62,6 @@ export default defineComponent({
       })
     }
 
-    if (import.meta.dev) {
-      nuxtApp._isNuxtPageUsed = true
-    }
-
     return () => {
       return h(RouterView, { name: props.name, route: props.route, ...attrs }, {
         default: (routeProps: RouterViewSlotProps) => {

diff --git a/packages/nuxt/src/pages/runtime/plugins/check-if-page-unused.ts b/packages/nuxt/src/pages/runtime/plugins/check-if-page-unused.ts