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 :
new Vue({
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:
new Vue({
el: '#app',
data: {
currentBranch: 'master',
repositoryUrl: 'https://github.com/blogs/vuejs'
},
methods: {
buildCurrentBranch: function() {
return this.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:
<!-- Button Load-->
<div>
<button type="submit" class="btn btn-primary" v-on:click="buildCurrentBranch();">Load commits</button>
</div>
The controller side looks like this:
<!-- Button buildBranch-->
buildCurrentBranch: function () {
var self = this
$.ajax({
type: 'GET',
url: apiURL.concat(self.currentBranch),
success: function (data) {
console.log(data);
// Reload project tree;
self.commits = data;
},
error: function (xhr) {
if (xhr.status >= 400) {
console.log(xhr.responseText);
} else {
alert('error while loading commits. Please try again.');
}
}
});
},
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.
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.
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.
Brahim Jaouane
I am a Digital Marketing specialist specialized in SEO at eXo Platform. Passionate about new technologies and Digital Marketing. With 10 years' experience, I support companies in their digital communication strategies and implement the tools necessary for their success. My approach combines the use of different traffic acquisition levers and an optimization of the user experience to convert visitors into customers. After various digital experiences in communication agencies as well as in B2B company, I have a wide range of skills and I am able to manage the digital marketing strategy of small and medium-sized companies.