How to use Vue.js hooks within exo portlet

In my previous post, I detailed some techniques for bringing up a few reactive concepts for eXo. This post is sort of part 1.1; it’s a continuation on the subject of View.js’s hooks and methods handling. All of the source code discussed in this article is located here.

More Advanced Concept

In the previous example, we had a simple form with two radio options for choosing which GitHub branches we want to display commits for. However, it is common for forms to have multiple buttons performing different actions but sharing some input fields. Now let’s try to improve the form with a field that lets you indicate the name of the git branch you want to inspect and a button that loads the commits of this branch from your GitHub project.

Working with methods

In any web application we need to output data based on certain rules or logic; thus, it might be handy to have a function in which we can embed JavaScript logic. Or perhaps we want to fetch data from a remote service or something similar.

Within Vue.js, functions have to be added under the methods property. I see you’ve noticed the term “property”; well, in Vue.js, JavaScript functions are called in the context of an object that can operate on the data contained within the object. The object itself is the Vue instance.

The following snippet illustrates how methods in Vue.js is used :

1

2

3

4

5

6

7

8

9

newVue({

el:'#app',

data:{

currentBranch:'master'

},

methods:{

}

});

Methods can be used for various things, but for now I want the method to build the full URL to my GitHub project when I select a branch:

1

2

3

4

5

6

7

8

9

10

11

12

newVue({

el:'#app',

data:{

currentBranch:'master',

repositoryUrl:'https://github.com/blogs/vuejs'

},

methods:{

buildCurrentBranch:function(){

returnthis.repositoryUrl+' '+this.currentBranch;

}

}

});

So by writing this.repositoryUrl, we can access the repositoryUrl property within the data object. Note that this is required. Technically speaking, this concept is called proxying.

We could access other methods from within our buildCurrentBranch method by using the same approach, except with a parenthetical at the end to make it a method invocation.

Alright, so now that we have implemented our method, let’s use it from within our template. This is as easy as you would expect it to be – simply call your method within a button component or use the mustache pattern as usual:

This summarizes the basics of using methods within the Vue instance and how to invoke them from an HTML template.

Now let’s see how we can combine methods and hooks, but first of all, what’s a hook?

What are Vues.js hooks ?

Hooks are an important part of any serious component framework. You often need to know when your component is created, added to the DOM, updated, or destroyed.

Vue.js comes up with a set of built-in hooks that developers can use in their components:

BeforeCreated

Created

BeforeMount

Mounted

BeforeUpdate

Updated

BeforeDestroy

Destroyed

Below we will discuss only Created and Destroyed hooks.

Created hook

With the created hook, you will be able to access reactive data . The Virtual DOM has not yet been mounted or rendered. As a developer, this is a good place to implement your business logic layer, such as loading data or initializing fields.

1

2

3

created:function(){

this.fetchCommits()

}

Destroyed hook

This hook allows you to perform actions when your component has been destroyed, such as cleanup or analytics sending. They fire when your component is being torn down and removed from the DOM.

As a developer, you can think of this hook as a tool to do any last-minute cleanup or inform a remote server that the component was destroyed. Typically, I use such a hook to add some traces in the logs.

1

2

3

4

5

destroyed:function(){

this.branches:null,

this.currentBranch:null,

this.commits:null

}

Conclusion

Day after day, Vue.js is continuing to prove that building end-user interfaces is no longer a complicated task for web and back-end developers. This framework brings forth native concepts that have emerged with HTML5, such as components, shadow DOM, etc.

With Vue.js, front-end developers can build their own components and reuse them in various applications.

In recent blog posts, I have already covered some basic concepts such as two-way binding, hooks, and lifecycles. But there are still other key notions to explore, like mixins, server-side rendering, bootstrap-vue integration, and others.

It has not been our goal in these articles to provide a comprehensive guide. For that, I advise you to take a look at the official documentation available on the Vue.js website (including samples and resources), or check out the excellent courses on egghead.io and udemy.

I hope these posts have conveyed why I am personally so excited about Vue.js and that they have helped you get up and running with this framework, so that you can try out some of the supplied material within your own eXo Platform instance.

In the following blog post, I will dig into how we can use Vue.js with webpack to build and package your web application.