0.3.0 • Published 7 years ago
vue-components-autodetect-webpack v0.3.0
Vue components autodetect Webpack loader
Inject Vue components into your webpack bundle based on folder structure and filename. So you save a file to edit for every new component.
index.vue -> <index></index>
page/index.vue -> <page-index></page-index>
post/button/delete.vue -> <post-button-delete></post-button-delete>
folder/folder/file.vue -> <folder-folder-file></folder-folder-file>
Usage
In your JS file
this comment gets expanded into Vue Component list
// {{ inject-vue-components }}
so it will look like this
Vue.component('folder-file', require('folder/file.vue'));
or if you are using import
import vuecomp0 from 'folder/file.vue';
Vue.component('folder-file', vuecomp0);
Configuration
Name | Type | Description | Default |
---|---|---|---|
path | {String} | The path to the folder where your vue components are | 'resources/assets/vue' |
separator | {String} | The separator in the Vue component name | '-' |
injectComment | {StringǀRegex} | The comment where the components will be injected (string adds // before) | /(\/\/\s{{\sinject-vue-components\s*}}\n?)/ig |
exclude | {Array} | An array of paths/files to exclude, using path as base | [] |
type | {String} | The type of loading that should be used (require or import) | 'require' |
In Webpack
module: {
rules: [
{
test: /\.js$/,
use: [
// ... other loaders
{
loader: 'vue-components-autodetect-webpack',
options: {
path: 'resources/assets/vue',
separator: '-',
injectComment: /(\/\/\s*{{\s*inject-vue-components\s*}}\n?)/ig,
exclude: ['page'],
type: 'require'
}
},
// ... other loaders
]
},
]
}
Installation
npm install --save vue-components-autodetect-webpack
yarn add vue-components-autodetect-webpack