feat: support dir.extensions

README.md

@@ -127,10 +127,7 @@ If you want to keep the filename as `Bar.vue`, consider using the `prefix` optio
 ```js
 components: [
     '~/components/',
-    {
-      path: '~/components/foo/',
-      prefix: 'foo'
-    }
+    { path: '~/components/foo/', prefix: 'foo' }
 ]
 ```
 
@@ -163,12 +160,39 @@ Path (absolute or relative) to the directory containing your components.
 
 You can use nuxt aliases (`~` or `@`) to refer to directories inside project or directly use a npm package path similar to require.
 
+#### extensions
+
+- Type: `Array<string>`
+- Default:
+  - Extensions supported by nuxt builder (`builder.supportedExtensions`)
+  - Default supported extensions `['vue', 'js']` or `['vue', 'js', 'ts', 'tsx']` depending on your environment
+
+**Example:** Support multi-file component structure
+
+If you prefer to split your SFCs into `.js`, `.vue` and `.css`, you can only enable `.vue` files to be scanned:
+
+```
+├── src
+│   └── components
+│         └── componentC
+│           └── componentC.vue
+│           └── componentC.js
+│           └── componentC.scss
+```
+
+```js
+// nuxt.config.js
+export default {
+  components: [
+    { path: '~/components', extensions: ['vue'] }
+  ]
+}
+```
+
 #### pattern
 
 - Type: `string` ([glob pattern]( https://github.com/isaacs/node-glob#glob-primer))
 - Default: `**/*.${extensions.join(',')}`
-  - `extensions` being Nuxt `builder.supportedExtensions`
-  - Resulting in `**/*.{vue,js}` or `**/*.{vue,js,ts,tsx}` depending on your environment
 
 Accept Pattern that will be run against specified `path`.
 
@@ -192,15 +216,10 @@ Example below adds `awesome-`/`Awesome` prefix to the name of components in `awe
 ```js
 // nuxt.config.js
 export default {
-  components: {
-    dirs: [
+  components: [
       '~/components',
-      {
-        path: '~/components/awesome/',
-        prefix: 'awesome'
-      }
-    ]
-  }
+      { path: '~/components/awesome/', prefix: 'awesome' }
+  ]
 }
 ```
 

src/index.ts

@@ -25,6 +25,7 @@ declare module '@nuxt/types/config/hooks' {
 
 export interface ComponentsDir extends ScanDir {
   watch?: boolean
+  extensions?: string[]
   transpile?: 'auto' | boolean
 }
 
@@ -64,11 +65,14 @@ export default <Module> function () {
         console.warn('Components directory not found: `' + dirPath + '`')
       }
 
+      const extensions = dirOptions.extensions || builder.supportedExtensions
+
       return {
         ...dirOptions,
         enabled,
         path: dirPath,
-        pattern: dirOptions.pattern || `**/*.{${builder.supportedExtensions.join(',')}}`,
+        extensions,
+        pattern: dirOptions.pattern || `**/*.{${extensions.join(',')},}`,
         ignore: nuxtIgnorePatterns.concat(dirOptions.ignore || []),
         transpile: (transpile === 'auto' ? dirPath.includes('node_modules') : transpile)
       }

test/fixture/nuxt.config.ts

@@ -12,6 +12,7 @@ const config: Configuration = {
   components: {
     dirs: [
       '~/components',
+      { path: '~/components/multifile', extensions: ['vue'] },
       '~/non-existent',
       { path: '@/components/base', prefix: 'Base' },
       { path: '@/components/icons', prefix: 'Icon', transpile: true /* Only for coverage purpose */ }

test/unit/scanner.test.ts

@@ -5,6 +5,7 @@ test('scanner', async () => {
 
   const expectedComponents = [
     'BaseButton',
+    'ComponentC',
     'BaseSecondButton',
     'IconHome',
     'Bar',