Skip to content

Latest commit

 

History

History
78 lines (63 loc) · 2.42 KB

File metadata and controls

78 lines (63 loc) · 2.42 KB

License: MIT npm npm

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