Here’s how to add Vue.js support to your Sage 9 project. 1. Add dependencies yarn add vue yarn add --dev babel-core babel-eslint babel-loader \ babel-plugin-transform-runtime babel-preset-env \ babel-preset-stage-2 babel-register \ vue-loader vue-style-loader vue-template-compiler 2. Add a .…

Bravo, bravo :clap: :clap: :clap:

Or just use laravel mix and be done with it. [image] JeffreyWay/laravel-mix laravel-mix - An elegant wrapper around Webpack for the 80% use case.

I really like the way Laravel Mix allows you to work with VueJS. However to integrate Laravel Mix into sage without compromising the way sage handles js/webpack is something I haven’t been able to accomplish yet. So the way I make Vue possible within sage allows me to work with vue files quite simi…

Updated instructions for buble instead of babel Sage 9 is now packaged with buble, so a few tweaks are needed. Also, vue-loader is now setup differently, so we need to update that too. So here’s an updated setup (assuming you’re starting from scratch with a new Sage 9 install): Caveat: vue-style…

[image] pascallaliberte: Hope this helps, and please share your suggestion for vue-style-loader integration I am using this at the moment: { test: /\.css$/, exclude: config.paths.assets, use: [ { loader: 'vue-style-loader' }, { loader: 'css-loader' }, ], }, pla…

Yeah, I think that’s how far I got too and reverted course. It looks like it’s because of babel’s own loader sequence, mixed in with sage is configured to pull all scss back into style sheets, and because of how vue-style-loader is setup. Some digging to do.

I’ve got around this now by setting output.pathinfo to false in the resources/assets/build/webpack.config.watch.js file. My knowledge of webpack isn’t great, but it just seems like it adds in those comments for debugging help during development. I haven’t faced any side effects whilst using sage th…

Is Sage not considering at any point adding an option at install for Vue / Angular / React such as it is with style frameworks (bootstrap etc.)? Would that be possible? Or is it not viable at all and why not?

Yeah, maybe like an extra question in the sage-installer script, or as an installer script or preset in sage directly. For that we’d need to split out the webpack configs into different presets (default, vue, react, etc). Either that or maybe there’s a library that exists to upgrade webpack configs…

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…

Roots Discourse

Adding Vue.js to Sage 9: Dependencies and Approach

sage

nathanielks May 19, 2017, 9:51pm 2

Bravo, bravo