Playing with Vue.js

Written by Ben Wendt

A coworker recently filled my ear with praise for vue.js. I’m always eager to try new frameworks, and the benefits over angular (namely performance and simplicity) sound really promising. I haven’t had a chance to develop anything serious with this, but my initial attempt was exhilirating.

I saw a link to the xkcd api in a tweet the other day, and decided to try it out with vue.js. I don’t really enjoy the comic strip, but it’s a publicly availably API that isn’t totally boring. So… what the hell. Why not?

Vue.js template code looks a lot like angular. So here’s my simple template:

    <div id="app">
        <button v-on:click="previous">&lt;</button>
        <button v-on:click="next">&gt;</button>
      <template v-if="data.img">
        <img src="{{ data.img }}">
        <h1> {{ data.safe_title }} </h1>
          {{ data.transcript }}
        <p> {{ number }} / 1600 </p>
        <p> {{ error }}

I’m impressed by how little code gets this running. A good chunk of my code is native run-of-the-mill XMLHttpRequest boilerplate:

      vm = new Vue({
        el: '#app',
        data: {
          number: 400,
          data: {}
        methods: {
          previous: function() {
            this.number --
          next: function() {
            this.number ++
          fetchData: function() {
            var xhr = new XMLHttpRequest()
            var self = this
  'GET', 'xkcdpass.php?n=' + self.number)
            xhr.onload = function() {
     = JSON.parse(xhr.responseText)

You can try it out here.