I hope if you reached this story you’re already interested in Vue, so that I don’t need to tell you my about it. “Point of Vue” As usual, I just want to make sure you are aware of the awesome stuff out there you might be missing, hoping to serve you a great Brunch with an awesome Vue. As much as I consider Vue one of the best, if not THE best UI framework out there for developing web applications, I also believe today’s web development tasks need a solid build system that does the job well, and does not require us to do a lot of work for it to actually perform. When using Vue for a whole app, you need building… and even when not… if you want your code to be optimal, you need building. When I was getting into the work of building modern web applications I stumbled upon this problem, and found some interesting solutions like , some more complete stuff like and I said… ok, this works for everyone, let’s go with it. But no matter how much I read about it, how much I used the pre-built examples for almost anything, it just felt weird the whole time. GULP Webpack Enter Brunch Out of nowhere, the name of appeared and I can’t even remember how, or what was I searching for. What I can tell you for sure is the sky cleared up for me that day. Brunch Brunch defines itself as an “Ultra-fast HTML5 Build ”, and while that is true, it does not make justice to its power. With just a small config, you can basically satisfy any of your needs, since there are plugins for most commonly used stuff such as Babel, UglifyJS, Pug, HTML Templates, Handlebars, JS, CSS, Images and what-not… It’s so that you can even use it for Node applications as well as client side apps. Tool automation Brunch’s presentation video — Taken from Brunch’s website Brunch is easy to learn, you can get it working without almost any work on your end for most plugins, it delivers its promise of being ultra-fast… It makes you wonder why so many people still uses webpack, Gulp or even worse, Grunt. Vue and Brunch? Why not? Nathaniel Blackburn built a simple, yet awesome plugin that lets you build VueJS-based applications with brunch, so easily you would be amazed. It’s called and it works just fine! vue-brunch Vue’s Cli tool is great, but it uses webpack and is quite slower than Brunch, has a ton of config files (obviously not meant for editing unless absolutely necessary and while the rails sensation is fine for me… I feel it comes at a high price. That’s why I thought I’d give it a shot with Brunch and Vue-Brunch Brunch with Vuety Yeah… word games again… I know, but bear with me for a while. I wanted to create an updated Brunch Skeleton that would use the Vue2 stack (including the new router and Vuex), and did so in an opinionated way so that users don’t need to think too hard to get started. I took inspiration on Nathaniel Blackburn’s Skeleton and did a few updates and tweaks, and so was born. brunch-with-vue brunch-with-vuety _brunch-with-vuety - An opinionated Brunch skeleton for using Vue2, Vuex and VueRouter. Comes packed with axios and…_github.com GitHub - srodriki/brunch-with-vuety: An opinionated Brunch skeleton for using Vue2, Vuex and… Take a look at it, it’s simple to use and understand and can get you up and running with something similar as the vue-cli does, but using Brunch instead of webpack. For me, it’s the marriage between two pieces of technology that actually deserve way more attention that they have had so far: and are excellent. VueJS Brunch Honestly speaking… take a look at Vue-cli’s Webpack build scripts and take a look at brunch-with-vuety’s one: module.exports = {files: {javascripts: {joinTo: {'vendor.js': /^(?!app)/, // Files that are not in `app` dir.'app.js': /^app/}},templates: {joinTo: 'app.js'}},plugins: {babel: {presets: ['latest', 'stage-3']},vue: {extractCSS: true}}} That’s the difference between Brunch’s Convention model and Webpack’s. Much simpler, isn’t it? I will be creating more skeletons and templates as time passes, and hope to deliver a few more complete ones. If you have any suggestions, please don’t hesitate to open an issue or comment here.
