vue-separate-webpack-plugin
Are you a Vue.js fan?
Do you believe in separation of concerns AND files?
Do you use webpack?
…
You probably need this plugin… 😎
Description
vue-separate-webpack-plugin is a webpack resolver plugin that allows you to write Vue.js components into separate files while using vue-loader, HRM and without creating any physical or temporary .vue
file.
Install
npm i -D vue-separate-webpack-plugin
or
yarn add -D vue-separate-webpack-plugin
Getting started
// webpack.config.js const VueSeparatePlugin = moduleexports = resolve: plugins:
With @vue/cli
// vue.config.js const VueSeparatePlugin = moduleexports = { // prettier-ignore config resolve }
Option
Passed as regular Object
.
Property | Type | Default | Description |
---|---|---|---|
root | string |
'src' |
Root/src folder where your components are located |
How it works
Simply create your separated files side by side:
Component.vue.html
(pug|jade
)Component.vue.css
(scss|sass|less|styl|stylus
)Component.vue.js
(ts|coffee
)
Then, import your component:
That's it!
Scoped CSS
Component.vue.scoped.css
(scss|sass|less|styl|stylus
)
Works alongside with
Component.vue.css
Functional components
Component.vue.functional.html
(pug|jade
)
Custom blocks
Component.vue.custom
Inspiration
Inspired by vuemaker-webpack-plugin and vue-separate-files-webpack-loader Thanks to webpack-virtual-modules
How to contribute
If you want to report a bug or if you just want to request for a new feature/improvement, please follow those instructions before.
Thanks for taking time to contribute to vue-separate-webpack-plugin
👍