Upgrading a Vue.js app from 1.0 to 2.0

Vue.js intro

Vue.js is a rising Javascript frontend framework field that has been gaining in popularity recently. I’ve been developing frontend apps with Angular for the past three years, and while Angular has worked well for me for building large-scale apps, I’ve been on the lookout for a framework that might work better for small to medium sized apps.

To test out Vue, I built a small test app in Vue 1.0. Recently Vue released version 2.0 and I set about upgrading the small app. Upgrading a full version can be a big chunk of work in some frameworks, but from the docs it looked like the Vue API was relatively stable between versions.

Migration to 2.0

The Vue team created a couple handy resources to help ease the migration from 1.0 to 2.0. First off, they created a thorough migration guide in the docs. They also made a script to check your app code for deprecated or changed coding patterns. When I ran that script on my small app it didn’t find any issues, but the authors do warn that it won’t find every possible area in the code that needs to be changed.

One change the script missed in my app was that now component templates now can only have one root element. That is - you can only have one top-level element under the template tag. This change isn’t a big deal - it exposed that one of my components was probably too big anyway - and it was trivial to refactor that component into two smaller components.

When I originally created my app I used the Vue command line tool to create a scaffolded Vue app with Webpack. To make sure I had updated versions of Node modules and Vue scripts, I created a fresh app using the Vue 2.0 template. Then I used a folder diff tool to quickly find the package.json and script differences between the two. Thankfully, there were almost no changes in the script and build files and only a few module and version changes in package.json to make.

Last but not least, I ran the unit and functional tests in may app to verify the app functionality held up during the upgrade and they passed with flying colors. Overall I really appreciate the work the Vue authors put into keeping the framework very stable across releases and creating thorough migration documentation and handy tooling!

Code

The app code is in this Github repo under the src/app folder. And in case it is helpful, here is the commit where I upgraded from 1.0 to 2.0.