fix: allow single name file under prefixed components folder, fix #419

Author: antfu

eslint.config.js

@@ -11,6 +11,9 @@ export default createConfigForNuxt({
       'playground',
       'docs',
     ],
+    componentsPrefixed: [
+      'playground/components-prefixed',
+    ],
   },
 })
   .append(

packages/eslint-config/src/flat/configs/disables.ts

@@ -9,7 +9,7 @@ export default function disables(options: NuxtESLintConfigOptions): Linter.FlatC
   const dirs = resolved.dirs
   const nestedGlobPattern = `**/*.${GLOB_EXTS}`
 
-  const fileRoutes = [
+  const fileRoutes = [...new Set([
     // These files must have one-word names as they have a special meaning in Nuxt.
     ...dirs.src.flatMap(layersDir => [
       join(layersDir, `app.${GLOB_EXTS}`),
@@ -22,7 +22,9 @@ export default function disables(options: NuxtESLintConfigOptions): Linter.FlatC
 
     // These files should have multiple words in their names as they are within subdirectories.
     ...(dirs.components.map(componentsDir => join(componentsDir, '*', nestedGlobPattern)) || []),
-  ]
+    // Prefixed components can have one-word names in file
+    ...(dirs.componentsPrefixed.map(componentsDir => join(componentsDir, nestedGlobPattern)) || []),
+  ])]
 
   const configs: Linter.FlatConfig[] = []
 

packages/eslint-config/src/flat/types.ts

@@ -70,6 +70,12 @@ export interface NuxtESLintConfigOptions {
      */
     components?: string[]
 
+    /**
+     * Directory for components with prefix
+     * Ignore `vue/multi-word-component-names`
+     */
+    componentsPrefixed?: string[]
+
     /**
      * Directory for composobles
      */

packages/eslint-config/src/flat/utils.ts

@@ -25,6 +25,7 @@ export function resolveOptions(
   dirs.modules ||= dirs.src.map(src => `${src}/modules`)
   dirs.middleware ||= dirs.src.map(src => `${src}/middleware`)
   dirs.servers ||= dirs.src.map(src => `${src}/servers`)
+  dirs.componentsPrefixed ||= []
 
   const resolved: NuxtESLintConfigOptionsResolved = {
     features: {

packages/module/src/modules/config/utils.ts

@@ -7,6 +7,7 @@ export function getDirs(nuxt: Nuxt): NuxtESLintConfigOptions['dirs'] {
     pages: [],
     composables: [],
     components: [],
+    componentsPrefixed: [],
     layouts: [],
     plugins: [],
     middleware: [],
@@ -17,7 +18,7 @@ export function getDirs(nuxt: Nuxt): NuxtESLintConfigOptions['dirs'] {
   }
 
   for (const layer of nuxt.options._layers) {
-    const r = (t: string) => relative(nuxt.options.rootDir, resolve(layer.config.srcDir, t))
+    const r = (t: string) => relative(nuxt.options.rootDir, resolve(layer.config.srcDir, t.replace(/^~[/\\]/, '')))
 
     dirs.src.push(r(''))
     dirs.pages.push(r(nuxt.options.dir.pages || 'pages'))
@@ -33,14 +34,17 @@ export function getDirs(nuxt: Nuxt): NuxtESLintConfigOptions['dirs'] {
         dirs.composables.push(r(dir))
     }
 
-    if (layer.config.components) {
-      const options = layer.config.components || {}
-      if (options !== true && 'dirs' in options) {
-        for (const dir of options.dirs || []) {
-          if (typeof dir === 'string')
-            dirs.components.push(r(dir))
-          else if (dir && 'path' in dir && typeof dir.path === 'string')
-            dirs.components.push(r(dir.path))
+    if (layer.config.components && layer.config.components !== true) {
+      const options = Array.isArray(layer.config.components)
+        ? { dirs: layer.config.components }
+        : layer.config.components
+      for (const dir of options.dirs || []) {
+        if (typeof dir === 'string')
+          dirs.components.push(r(dir))
+        else if (dir && 'path' in dir && typeof dir.path === 'string') {
+          dirs.components.push(r(dir.path))
+          if (dir.prefix)
+            dirs.componentsPrefixed.push(r(dir.path))
         }
       }
     }

playground/components-prefixed/A.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

playground/components/TheB.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div>
+    <slot />
+  </div>
+</template>

playground/nuxt.config.ts

@@ -5,6 +5,10 @@ export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
+  components: [
+    '~/components',
+    { path: '~/components-prefixed', prefix: 'Prefix' },
+  ],
   eslint: {
     config: {
       stylistic: true,