feat: components array and simplify usage

README.md

@@ -8,7 +8,7 @@
 [![Codecov][codecov-src]][codecov-href]
 [![License][license-src]][license-href]
 
-> Module to scan and auto import components for Nuxt.js 2.10+
+> Module to scan and auto import components for Nuxt.js 2.13+
 
 - [🎲 Play on CodeSandbox](https://codesandbox.io/s/nuxt-components-cou9k)
 - [🎬 Demonstration video (49s)](https://www.youtube.com/watch?v=lQ8OBrgVVr8)
@@ -34,15 +34,26 @@
 
 ## Usage
 
-Create your components :
+Ensure using nuxt `2.13+` and `components` option is set in `nuxt.config`:
+
+```js
+export default {
+  components: true
+}
+```
+
+**Note:** If using nuxt `2.10...2.13`, you have to also manually install and add `@nuxt/components` to `buildModules` inside `nuxt.config`.
+
+
+**Create your components:**
 
 ```bash
 components/
   ComponentFoo.vue
   ComponentBar.vue
 ```
 
-Use them whenever you want, they will be auto imported in `.vue` files :
+**Use them whenever you want, they will be auto imported in `.vue` files :**
 
 ```html
 <template>
@@ -51,15 +62,15 @@ Use them whenever you want, they will be auto imported in `.vue` files :
 </template>
 ```
 
-No need anymore to manually import them in the `script` section !
+No need anymore to manually import them in the `script` section!
 
 See [live demo](https://codesandbox.io/s/nuxt-components-cou9k).
 
-### Dynamic imports
+### Dynamic Imports
 
 To make a component imported dynamically (lazy loaded), all you need is adding a `Lazy` prefix in your templates.
 
-> If you think this prefix should be customizable, feel free to create a feature issue !
+> If you think this prefix should be customizable, feel free to create a feature request issue!
 
 You are now being able to easily import a component on-demand :
 
@@ -87,7 +98,7 @@ export default {
 </script>
 ```
 
-### Nested components
+### Nested Components
 
 If you have components in nested directories:
 
@@ -111,86 +122,37 @@ components/
     FooBar.vue
 ```
 
-If you want to keep the filename as `Bar.vue`, consider using the `prefix` option:
+If you want to keep the filename as `Bar.vue`, consider using the `prefix` option: (See [directories](#directories) section)
 
 ```js
-components: {
-  dirs: [
+components: [
     '~/components/',
     {
       path: '~/components/foo/',
       prefix: 'foo'
     }
-  ]
-}
-```
-
-## Setup
-
-### Nuxt 2.13+
-
-If you are using [nuxt-edge](https://www.npmjs.com/package/nuxt-edge) or Nuxt `2.13+` (release soon :eyes:) simply set `components: true` in your `nuxt.config.js`:
-
-```js
-export default {
-  components: true
-}
-```
-
-### Nuxt 2.10+
-
-1. Add `@nuxt/components` dependency to your project
-
-```bash
-yarn add --dev @nuxt/components # or npm install --save-dev @nuxt/components
-```
-
-2. Add `@nuxt/components` to the `buildModules` section of `nuxt.config.js`
-
-```js
-export default {
-  buildModules: [
-    // TODO: Remove when upgrading to nuxt 2.13+
-    '@nuxt/components'
-  ]
-}
+]
 ```
 
-### Nuxt < `2.10`
-
-Please upgrade your Nuxt version in order to use this module.
-
-
-## Options
+## Directories
 
-You can define the options of the module in the `components` property of your `nuxt.config.js`:
+By setting `components: true`, default `~/components` directory will be included.
+However you can customize module behaviour by proividing directories to scan:
 
 ```js
 export default {
-  buildModules: [
-    '@nuxt/components',
+  components: [
+    '~/components', // shortcut to { path: '~/components' }
+    { path: '~/components/awesome/', prefix: 'awesome' }
   ],
-  components: {
-    /* module options */
-  }
 }
 ```
 
-### `dirs`
-
-- Type: `Array`
-  - Items: `String` or `Object` (see definition below)
-- Default: `['~/components']`
-
-List of directories to scan, with customizable options when using `Object` syntax.
-
-`String` items are shortcut to `Object` with only `path` provided :
+Each item can be either string or object. String is shortcut to `{ path }`.
 
-```js
-'~/components' === { path: '~/components' }
-```
+**Note:** Don't worry about ordering or overlapping directories! Components module will take care of it. Each file will be only matched once with longest path.
 
-#### `Object` syntax properties
+### Directory Properties
 
 #### path
 
@@ -199,16 +161,11 @@ List of directories to scan, with customizable options when using `Object` synta
 
 Path (absolute or relative) to the directory containing your components.
 
-We highly recommend using Nuxt aliases :
-
-| Alias        | Directory                                               |
-| ------------ | ------------------------------------------------------- |
-| `~` or `@`   | [srcDir](https://nuxtjs.org/api/configuration-srcdir)   |
-| `~~` or `@@` | [rootDir](https://nuxtjs.org/api/configuration-rootdir) |
+You can use nuxt aliases (`~` or `@`) to refer to directories inside project or directly use a npm package path similar to require.
 
 #### pattern
 
-- Type: `String` (must follow glob pattern style : https://github.com/isaacs/node-glob#glob-primer)
+- 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
@@ -218,7 +175,7 @@ Accept Pattern that will be run against specified `path`.
 #### ignore
 
 - Type: `Array`
-- Items: `String` (must follow glob pattern style : https://github.com/isaacs/node-glob#glob-primer)
+- Items: `string` ([glob pattern]( https://github.com/isaacs/node-glob#glob-primer))
 - Default: `[]`
 
 Ignore patterns that will be run against specified `path`.
@@ -228,7 +185,9 @@ Ignore patterns that will be run against specified `path`.
 - Type: `String`
 - Default: `''` (no prefix)
 
-Prefix components for specified `path`.
+Prefix all matched components.
+
+Example below adds `awesome-`/`Awesome` prefix to the name of components in `awesome/` directory.
 
 ```js
 // nuxt.config.js
@@ -275,7 +234,7 @@ Watch specified `path` for changes, including file additions and file deletions.
 
 Transpile specified `path` using [`build.transpile`](https://nuxtjs.org/api/configuration-build#transpile), by default (`'auto'`) it will set `transpile: true` if `node_modules/` is in `path`.
 
-## Library authors
+## Library Authors
 
 Making Vue Component libraries with automatic tree-shaking and component registration is now damn easy ✨
 
@@ -335,7 +294,7 @@ And directly use the module components (prefixed with `awesome-`), our `pages/in
 
 It will automatically import the components only if used and also support HMR when updating your components in `node_modules/awesome-ui/components/`.
 
-Next: publish your `awesome-ui` module to [NPM](https://www.npmjs.com) and share it with the other Nuxters ✨
+Next: publish your `awesome-ui` module to [npm](https://www.npmjs.com) and share it with the other Nuxters ✨
 
 ## License
 

src/index.ts

@@ -38,10 +38,11 @@ const getDir = (p: string) => fs.statSync(p).isDirectory() ? p : path.dirname(p)
 export default <Module> function () {
   requireNuxtVersion.call(this, '2.10')
 
+  const { components } = this.options
+
   const options: Options = {
-    // @ts-ignore This is expected as default dirs will be overriden by user config
-    dirs: ['~/components'],
-    ...this.options.components
+    dirs: components !== undefined ? ['~/components'] : [],
+    ...Array.isArray(components) ? { dirs: components } : components
   }
 
   this.nuxt.hook('build:before', async (builder: any) => {