Updated instructions for buble instead of babel, with vue-style-loader working
The previous solution above was missing vue-style-loader integration, and this one fixes that problem, permitting <style> sections in .vue single-file components.
Thanks to @kellymears for having published https://github.com/pixelcollective/SageJS, which includes these fixes.
Known issue:
In the final main.css, the styles from .vue components are included before the normal scss styles. Now sure how to fix that yet.
1. Add dependencies
yarn add vue
yarn add --dev vue-loader vue-template-compiler eslint-plugin-vue vue-style-loader
2. Add stuff to webpack.config.js
To your webpack.config.js file (found in resources/assets/build/ ), include vue-loader :
const { VueLoaderPlugin } = require('vue-loader')
Add this to module.rules :
{
test: /\.vue$/,
loader: 'vue-loader',
},
And also insert this in module.rules, right before the other test: /\.css$/ entry, not replacing it:
{
test: /\.css$/,
exclude: config.paths.assets,
use: [
{ loader: 'vue-style-loader' },
{ loader: 'css-loader' },
],
},
And to force the runtime to include the full compiler (only needed if you want your root Vue element to be parsed as a Vue template), add this under resolve :
alias: {
'vue$': 'vue/dist/vue.esm.js'
Now register VueLoaderPlugin under plugins .
new VueLoaderPlugin(),
I placed mine after the debug watcher plugin (does it even matter?):
new webpack.LoaderOptionsPlugin({
minimize: config.enabled.optimize,
debug: config.enabled.watcher,
stats: { colors: true },
}),
new VueLoaderPlugin(), //here
3. Modify webpack.config.watch.js
Set pathinfo to false to fix “Unexpected token ‘*’” errors while running yarn start
output: {
pathinfo: false, // set to false
publicPath: config.proxyUrl + config.publicPath,
},
4. Lint .vue files properly
In .eslintrc.js , replace the extends property with:
"extends": [
"eslint:recommended",
"plugin:vue/essential",
],
5. Setup a directory for your .vue components
resources/assets/scripts/vue/ seems like a good spot for those .vue components.
See example reference above in the original post.
6. Add the new directory to your watch list in resources/assets/config.json:
Under watch:, add:
"resources/assets/scripts/vue/**/*.vue"
