diff --git a/README.md b/README.md index 530735d..718439c 100755 --- a/README.md +++ b/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` +- 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' } + ] } ``` diff --git a/src/index.ts b/src/index.ts index 57f2f91..c616d27 100644 --- a/src/index.ts +++ b/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 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) } diff --git a/test/fixture/components/multifile/ComponentC/ComponentC.vue b/test/fixture/components/multifile/ComponentC/ComponentC.vue new file mode 100644 index 0000000..e69de29 diff --git a/test/fixture/components/multifile/ComponentC/index.js b/test/fixture/components/multifile/ComponentC/index.js new file mode 100644 index 0000000..e69de29 diff --git a/test/fixture/nuxt.config.ts b/test/fixture/nuxt.config.ts index b3a45b4..03dc7e2 100644 --- a/test/fixture/nuxt.config.ts +++ b/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 */ } diff --git a/test/unit/scanner.test.ts b/test/unit/scanner.test.ts index c1bcbd3..0f28a73 100644 --- a/test/unit/scanner.test.ts +++ b/test/unit/scanner.test.ts @@ -5,6 +5,7 @@ test('scanner', async () => { const expectedComponents = [ 'BaseButton', + 'ComponentC', 'BaseSecondButton', 'IconHome', 'Bar',