How VueJs helped me fall in love with front-end development again - By Daniel Abbott

With all the bundlers, builders, task runners and transpilers, you’ll be forgiven for longing for the good old days of HTML, CSS and Javascript. Remember when you had an idea and could just start writing code and it would just work. You didn’t have to spend 18 days setting up a project by which point you’re bored of your idea anyway.

Ok so maybe that’s an exaggeration, and things weren’t that amazing back then, but they were certainly simpler. As a front-end developer I find myself spending more time learning the latest compiler or bundler than I do learning code or building cool stuff. Or at least I did until Vue came along.

I’m sure a lot of you have heard of Vue and how it is probably Reacts main competitor along with Angular. Since Vue was released, it has rocketed to around a million downloads a month. The creator, Evan You, previously worked on AngularJS but decided to extract the parts he liked the most and create an even better, faster framework.

Vue is extremely easy to setup and use with exceptional documentation and a massive community of developers. I was lucky enough to change jobs and decide on which framework to use for our new projects and I am so glad we went with Vue. We were debating on going with React or Vue and in the end Vue clinched it due to its easier learning curve and Vue component files.

Each *.vue file is separated into HTML, Javascript and Styles. The HTML contains the template of the component and you can make use of loops and conditionals inside the template (just like Angular). The styles section can either be scoped to the component or global and can be in any preprocessed style language you choose. Simply by adding ‘scoped’ or lang=’scss’ inside your <style> tag you can achieve this. The script section contains all your data and methods with a few Vue lifecycle hooks to help you along the way.

Also in the Vue ecosystem is Vuex, a state management system comparable (and better and more intuitive in my opinion) to redux.

To make things even easier for you, Vue has a CLI called vue-cli to scaffold your project and abstract away all the annoying setup. You can literally have your first production ready Vue application ready in just a few commands.

Vue also has an excellent DevTools extension for Chrome to help debug and step through your application state.

I can honestly say, in the year or so I have been using Vue in a professional environment, I haven’t encountered a single problem or occasion where Vue has hindered me in any way. In fact, I am constantly discovering cool new features added by the community to make my life even easier.

Vue is lightweight, performant, scalable and intuitive, and with the ever increasing number of developers and companies adopting Vue, I’d highly recommend learning and playing with Vue yourself just to see how simple and fun it is.

Thank you Daniel Abbott :-)