fix(module): scan layers when using component detection

Resolves #5389

Author: benjamincanac

src/templates.ts

@@ -113,8 +113,13 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
     let sources = ''
 
     if (!!nuxt && !!resolve && options.experimental?.componentDetection) {
-      const detectedComponents = await detectUsedComponents(
+      const dirs = [...new Set([
         nuxt.options.rootDir,
+        ...(nuxt.options._layers?.map(layer => layer.config.rootDir).filter(Boolean) || [])
+      ])]
+
+      const detectedComponents = await detectUsedComponents(
+        dirs,
         options.prefix!,
         resolve('./runtime/components'),
         Array.isArray(options.experimental.componentDetection) ? options.experimental.componentDetection : undefined

src/utils/components.ts

@@ -65,7 +65,7 @@ function resolveComponentDependencies(
  * Detect components used in the project by scanning source files
  */
 export async function detectUsedComponents(
-  rootDir: string,
+  dirs: string[],
   prefix: string,
   componentDir: string,
   includeComponents?: string[]
@@ -79,33 +79,35 @@ export async function detectUsedComponents(
     }
   }
 
-  // Scan all source files for component usage
-  const appFiles = globSync(['**/*.{vue,ts,js,tsx,jsx}'], {
-    cwd: rootDir,
-    ignore: ['node_modules/**', '.nuxt/**', 'dist/**']
-  })
-
   // Pattern to match:
   // - <UButton in templates
   // - UButton in script (imports, usage)
   // - <LazyUButton (lazy components)
   // - LazyUButton in script
   const componentPattern = new RegExp(`<(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)|\\b(?:Lazy)?${prefix}([A-Z][a-zA-Z]+)\\b`, 'g')
 
-  for (const file of appFiles) {
-    try {
-      const filePath = join(rootDir, file)
-      const content = await readFile(filePath, 'utf-8')
-      const matches = content.matchAll(componentPattern)
-
-      for (const match of matches) {
-        const componentName = match[1] || match[2]
-        if (componentName) {
-          detectedComponents.add(componentName)
+  // Scan all source files for component usage across all layers
+  for (const dir of dirs) {
+    const appFiles = globSync(['**/*.{vue,ts,js,tsx,jsx}'], {
+      cwd: dir,
+      ignore: ['node_modules/**', '.nuxt/**', 'dist/**']
+    })
+
+    for (const file of appFiles) {
+      try {
+        const filePath = join(dir, file)
+        const content = await readFile(filePath, 'utf-8')
+        const matches = content.matchAll(componentPattern)
+
+        for (const match of matches) {
+          const componentName = match[1] || match[2]
+          if (componentName) {
+            detectedComponents.add(componentName)
+          }
         }
+      } catch {
+        // Ignore files that can't be read
       }
-    } catch {
-      // Ignore files that can't be read
     }
   }