Skip to content

Define the name of your vue components by your folder structure and let webpack auto inject them.

License

Notifications You must be signed in to change notification settings

olvenmage/vue-components-autodetect-webpack

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Define the name of your vue components by your folder structure and let webpack auto inject them.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%