Working with Vue.js after React and Angular

I wanted to work with Vue.js on a “real” project for quite some time. Last night, I decided to migrate a very small portion of a larger project to Vue. In the next week or so, I plan on publishing a small series of articles about this experience.

Setup

Very quick setup, no headaches. The guide is straightforward and the fact that they also offer a CLI makes the experience more enjoyable for command-line junkies like myself.

I wanted to use Webpack and was surprised to see that they had that option built in. Here’s a list of available **official **templates:

List of official vue-cli application templates

So, what I ended up doing was to issue a the command below and after answering a couple of questions, I got a neatly organized Vue.js project, with Webpack and all the bells and whistles — ESLint , AirBnB’s JavaScript style guide.

Initialize a new Vue.js project using vue-cli

Development

While I was working for a company, on large e-commerce websites, I used Backbone.js extensively. For this particular reason, Vue.js feels rather familiar. The way you structure your components is very similar to the way you would declare your Models, Views or Collections in Backbone.js.

I was expecting some Webpack issues while starting the development server but there were no such issues. I did have some trouble making TinyMCE work with Webpack but the mistake was mine.

TinyMCE sets itself as a global variable, and the holy Internet suggested a way to use imports-loader and exports-loader to make it work properly. The only problem was that I had some errors I could not work around.

After wasting 1.5 hours trying to debug this, I finally decided to read TinyMCE’s documentation properly. It worked flawlessly without any loaders.

Links

Future topics

Making REST API calls in Vue 2.0
Asynchronous computed properties
Splitting a Vue app in feature folders

Photo credits:

Vue Logo