Creates .vue
single file components on fly, allowing you to have clean separated components files and still enjoy advantages of vue-loader.
- Handles files by their names (instead loading of all files in folder) and creates
.vue
file on fly (instead creating physical one) - Allows to add custom attributes through
options.global
,options[FILE_TYPE]
andoptions[TAG_NAME]
- Allows to handle vue custom blocks
- Allows to have
scoped
style by component
Based on these ideas vue-builder-webpack-plugin and vue-separate-files-loader.
See this repository.
npm i -D vue-separate-files-webpack-loader
or
yarn add -D vue-separate-files-webpack-loader
Loader must have precedence before vue-loader
.
rules: [
{
// notice modified file test
test: /\.vue\./,
use: [
{
loader: 'vue-loader',
options: {/* usual vue-loader options */}
},
{
loader: 'vue-separate-files-webpack-loader',
options: {
global: {
// all files will have these
attr: 'value'
},
sass: {
// only SASS files will have these
attr: 'value'
},
style: {
// only style files will have these
attr: 'value'
}
}
}
]
}
]
These file types are supported and automatically assigned to proper tag type.
html
,jade
,pug
js
,jsx
,coffee
,ts
,tsx
css
,sass
,scss
,styl
,less
Loader check files with .vue.
within the name and creates actual .vue
file structure on fly
Taken this component structure
Component.vue.js
Component.vue.scoped.scss
Component.vue.pug
Generated structure
<template src="Component.vue.pug" lang="pug"></template>
<style src="Component.vue.scss" lang="scss" scoped></style>
<script src="Component.vue.js"></script>
Loader allows to use vue custom blocks
.
Simply define file with proper extension and it will be used as tag name.
Component file
Component.vue.docs
Generated structure
<docs src="Component.vue.docs"></docs>