Getting Started with Vue.js

[ddraper]

This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.

At the end of my last post I had got my Node.js server setup so that I could authenticate against a local Alfresco Repository such that it would act as a proxy for making REST API calls. I also had webpack configured to handle building my application code with hot-reloading (using Babel to transpile my JavaScript).

You can view the project code at the time of this blog post by checking out this tag.

I now wanted to start building out some client-side code. My initial plan is to test out lots of currently available UI frameworks (React, Aurelia, Ember, etc) to see how they compare... but I've become increasingly interested in Vue.js so wanted to initially start with that.

I installed Vue.js using yarn, but the the first gotcha I encountered was the issue with standalone vs runtime only versions which just goes to show that it pays to properly read the documentation! This was quick to resolve with the suggested approach of adding an alias - however this will mean that should I wish to ever deploy the application that I would almost certainly need a separate webpack configuration file for production deployment.

The next issue was an absence of source maps which meant it was harder to debug my code. This was quickly solved following the documentation here and here. Essentially it was just a case of updating my webpack.config.js file to include:

...
devtool: 'source-map',‍
...‍‍‍‍‍‍‍‍‍

...although there are other source map values that can be used.

Once I had Vue installed it was relatively simple to just build a simple component to list the contents of Company Home:

import Vue from 'vue';
import axios from 'axios';

Vue.component('alf-list', {
   template: `<ul id="example-1">
      <li v-for="item in items">
       {{ item.node.properties["cm:name"] }}
     </li>
   </ul>`,
   data: () => ({
      items: [],
   }),
   beforeMount() {
      axios.get('/proxy/alfresco/slingshot/doclib2/doclist/all/node/alfresco/company/home')
         .then(response => {
            this.items = response.data.items;
         });
   }
});

var vm = new Vue({
   el: '#app'
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This code fragment defines a new component that before being "mounted" (see the life-cycle) uses axios to request the data from the Repository (going via the proxy set up in a previous post). When it mounts it then iterates over the items loaded from the repository and renders the name of each of them as an individual element in a list.

At the moment this obviously doesn't handle any kind of browsing of the data and it is not sensibly split out into separate files for the components - however, the essential building blocks are now in place - the ability to retrieve and render data.