Try now Demo en
  • en
  • fr
  • de
  • Product
    • Platform
      • Software TourFeatures & capabilities overview
      • Why eXoeXo Platform key differentiators
      • InternationalisationSupporting multilingual environments
      • MobileResponsive & available on any device
    • Technology
      • No CodeTailor eXo platform to your needs
      • ArchitectureAn overview of eXo Platform technology
      • IntegrationsAvailable connectors & integration capabilities
      • SecurityeXo Platform security measures
      • Open sourceComponents & licensing
  • Solutions
    • Communication
      • Modern IntranetBuild your company culture
      • Knowledge managementCentralize and share your company knowledge
      • Community managementEngage your community
      • ExtranetInvolve your clients and partners
    • Collaboration
      • Social NetworkConnect all your employees
      • Collaboration PlatformEmpower your teams
      • Employee PortalCentralize your work environment
      • Employee EngagementEngage & empower your employees
    • For
      • Public Sector
      • Networks
      • Education
      • Enterprises
  • Pricing
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Migration guide
      • Alternative to Microsoft 365
      • Alternative to Sharepoint
      • Alternative to Workplace from Meta
    • From The Blog
      • eXo Platform 6.5 is released: personalized navigation, multi-sites management and more
      • eXo launches its online community platform – eXo Tribe!
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Community
    • CommunityJoin our online community platform
    • DownloadLaunch eXo platform in your infrastructure
    • Source codeSource code on github
    • FAQsAbout the software, the community and our offers
    • REST APIs & DocumentationAll REST APIs available in eXo Platform
  • Company
    • Customers
    • Partners
    • Services
    • About us
    • Contact us
    • Newsroom
  • Menu mobile
    • Pricing
    • About us
    • Careers
    • Resource center
    • Blog
    • Contact us
    • Try eXo
Platform
  • Software Tour Features & capabilities overview
  • Why eXo eXo Platform key differentiators
  • Internationalisation Supporting multilingual environments
  • Mobile Responsive & available on any device
Technology
  • No Code Tailor eXo platform to your needs
  • Architecture An overview of eXo Platform technology
  • Integrations Available connectors & integration capabilities
  • Security eXo Platform security measures
  • Open source Components & licensing
Communication
  • Modern Intranet Build your company culture
  • Knowledge management Centralize and share your company knowledge
  • Community management Engage your community
  • Extranet Involve your clients and partners
Collaboration
  • Social Network Connect all your employees
  • Collaboration Platform Empower your teams
  • Employee Portal Centralize your work environment
  • Employee Engagement Engage & empower your employees
For
  • Public Sector
  • Networks
  • Education
  • Enterprises
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Migration guide
  • Alternative to Microsoft 365
  • Alternative to Sharepoint
  • Alternative to Workplace from Meta
From The Blog
  • eXo Platform 6.5 is released: personalized navigation, multi-sites management and more
  • eXo launches its online community platform – eXo Tribe!
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
Community Join our online community platform
Download Launch eXo platform in your infrastructure
Source code Source code on github
FAQs About the software, the community and our offers
REST APIs & Documentation All REST APIs available in eXo Platform
Customers
Partners
Services
About us
Contact us
Newsroom
Pricing
About us
Careers
Resource center
Blog
Contact us
Try eXo
  1. Accueil
  2. Tutorial
  3. How to use Vue.js hooks within exo portlet

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.

How to use Vue.js hooks

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.


Join The eXo Tribe

Join The eXo Tribe


Register for our Community to Get updates, tutorials, support, and access to the Platform and add-on downloads. Sign in Now!

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.

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz