|

Upgrading VueJS

upgrade vuejs

In this post we’ll take a look at upgrading VueJS. We have a cool tutorial about Vue.js but alas, JavaScript moves in Internet time – which means some of the information has become dated already. Well fear not! The tutorial is getting updated, and this post is a chronicle of what you might encounter when completing your own migration path from an earlier version to 1.0.0 or a release candidate of 1.0.0. We will be using 1.0.0-rc2.


Creating A View Instance

The first thing we did was to create a view instance. Testing out the code from the tutorial with our new build of Vue appears to work just fine. No warnings, and a fresh Vue instance in the browser as we see here, so nothing to change or worry about.
create vue instance


Two Way Data Binding

Next up on the agenda was to create some two way data bindings. On updating the source code to a release candidate of 1.0.0, we encountered a clean slate in the console window and no errors. Testing out the two way data binding in the browser was working just fine, so no need to make any changes.
two way data binding


Displaying Lists

We now take a look at displaying lists with Vue using the latest build and we encounter our first few errors. Let’s see.
vue repeat now for

We have some very helpful warnings in the console that will guide us on how to resolve our issues.

  • [Vue warn]: Failed to resolve directive: repeat

Let’s update our code to fix the problems. The syntax for v-repeat has changed to v-for. In order to get our code work properly, we need to make this change.

Old

New

With that quick update, everything is now working again.
vue repeat refactored

Moving further along we had added some functionality to add or delete a JavaScript Library. It looks like this one does cause some errors.
invalid expression

  • [Vue warn]: Invalid expression. Generated function body: scope.click:scope.addLibrary
  • TypeError: expParser.parse(…) is undefined
    var fn = expParser.parse(expression).get
  • [Vue warn]: You are setting a non-existent path “newlibrary” on a vm instance. Consider pre-initializing the property with the “data” option for more reliable reactivity and better performance.

Lets see if we can figure out how to fix these… (hacking in the sandbox) … turns out this is a pretty easy fix.

Old

New

This is another welcome change. It does in fact appear much more readable to me. Now we can see that the event action is moved out of the attribute value and attached to the v-on directive. With regard to that third error listed above, we simply add the newlibrary property to the data object like the warning asked and it did in fact make the error go away.


Updating Event System Syntax

With our new found knowledge from the prior step, we can now update the parts of the tutorial that deal with events.


Filtering

On testing the filtering with VueJs portion of the tutorial, it does appear we are getting some warnings.
vue filtering errors

We have already seen these however so they should be easy to fix.

Old


html

js


New


html

js


With the updated code, all errors are gone and the test subject is functional again. Do the old “stare and compare” of the old versus new code above to see if you can spot what changed. Then read up on filterBy and orderBy and you’ll be good to go.


Custom Filters

The code which was used for the custom filters section of the tutorial seems to be working just fine with no errors. A quick scan seems to indicate these work as they did before, but it’s worth reading up of course on the latest docs.


Components

The Components code is working on the latest build of Vue.js, so that is good.


Component Props

Component Props also seem to be working nicely with no modifications to the original markup.


Custom Directives

Lastly, Custom Directives do appear to work just fine as well with the latest VueJS code.

Upgrading VueJS Summary

In this post we went through our original snippets and tutorials about Vue.js and updated some of the syntax to be compatible with the very latest versions of Vue.js. It really wasn’t that painful, and the changes that I found seemed to be well worth it in terms of better readability of the code. We found that v-repeat is now v-for, the events system changed a little bit, and a few other minor things. Of course this is only scratching the surface, but you can check the release notes and github to stay current with all that is new. Another great feature built into Vue.js is that you can simply download the development version that includes full warnings and debug mode and apply it to your existing markup in a test environment. Once you become satisfied that you have updated everything you need to, and warnings go away, you can probably move to production as well.