A Vuetiful Brunch for Everyone

I hope if you reached this story you’re already interested in Vue, so that I don’t need to tell you my “Point of Vue” about it.

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 GULP, some more complete stuff like Webpack 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.

Enter Brunch

Out of nowhere, the name of Brunch 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 defines itself as an “Ultra-fast HTML5 Build Tool”, 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 automation 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.

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 vue-brunch and it works just fine!

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 brunch-with-vue Skeleton and did a few updates and tweaks, and so brunch-with-vuety was born.

GitHub - srodriki/brunch-with-vuety: An opinionated Brunch skeleton for using Vue2, Vuex and…_brunch-with-vuety - An opinionated Brunch skeleton for using Vue2, Vuex and VueRouter. Comes packed with axios and…_github.com

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: VueJS and Brunch are excellent.

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.