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