{"id":15822,"date":"2018-05-08T07:04:21","date_gmt":"2018-05-08T14:04:21","guid":{"rendered":"https:\/\/www.exoplatform.com\/blog\/?p=15822"},"modified":"2023-07-20T13:08:16","modified_gmt":"2023-07-20T11:08:16","slug":"use-vue-js-exo-platform","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/use-vue-js-exo-platform\/","title":{"rendered":"How to use Vue.js in eXo Platform"},"content":{"rendered":"

It\u2019s pretty hard to keep up with all the new JavaScript libraries<\/strong> and frameworks<\/strong>. Three years ago, eXo<\/a> introduced AngularJS<\/strong> to boost front-end development. Now there are add-ons to show how we can use eXo Platform with AngularJS<\/strong>, like the staging extension<\/a>. There has also been an integration with ReactJS<\/a>.<\/p>\n

In this blog post, I\u2019d like to share my experience using VueJS with eXo<\/strong> as a front-end solution. You\u2019ll learn how to build a simple Vue.js portlet with eXo back end<\/strong>.<\/p>\n

You can find the sample code base in GitHub<\/a>. This is a Maven-based project, so it should be easy to import and run as-is.<\/p>\n

Why Vue.js?<\/h2>\n

Well, simply because until now eXo<\/a> hasn\u2019t provided a ready-to-use sample with the current JavaScript<\/strong> trend known as Vue.js<\/strong>.<\/p>\n

No, seriously, of all the frameworks<\/strong> and libraries<\/strong> I\u2019ve worked with over the years, one thing about Vue.js<\/strong> that stands out for me is the documentation. It\u2019s very detailed and easy to follow, covering multiple-use cases and all the various options, where applicable, for each of its built-in methods.<\/p>\n

I decided to dive into Vue.js<\/strong> because a lot of good things are being said about it on the web (perfs, components, productivity, etc.).<\/p>\n

Let\u2019s start with the basics<\/h2>\n

AngularJS<\/strong> developers and ReactJS developers<\/a> will find that Vue.js looks like those frameworks<\/strong> (like AngularJS<\/strong> in terms of data binding and ReactJS <\/strong>in terms of directives, components and props).<\/p>\n

I won\u2019t describe in detail how Vue.js<\/strong> works under the hood \u2013 that\u2019s not the goal here. Instead, I\u2019ll try to give an overview of some basic concepts.<\/p>\n

Vue.js<\/strong> uses a template file containing both the template body (HTML tags) and a script section that acts as a controller. The following example is a simple template to give you an idea of how things are structured.<\/p>\n

<div id=\"app\">\r\n        {{text}}\r\n    <\/div>\r\n    <script>\r\n       var app = new Vue({\r\n            el: '#app',\r\n            data: {\r\n                text: 'Hello eXo'\r\n            },\r\n            created() {\r\n                 \/\/ API\/Service calls would go here\r\n                return {\r\n                             data: [\r\n                              {},\r\n                              {}\r\n                            ],\r\n                };\r\n         },\r\n          methods: {\r\n                  search() {\r\n                \/\/ Search method written here\r\n                },\r\n        }\r\n        })\r\n    <\/script>\r\n<\/pre>\n
The data()<\/strong> function is used to set up default data for the initial rendering of the component, and data binding within the View side is provided by the mustache pattern : {{}}<\/strong> or property v-html<\/strong>.<\/p>\n
The created()<\/strong> function is similar to Reacts componentWillMount<\/strong> life cycle method and is the best place to perform the init process before the rendering phase.<\/p>\n
The methods()<\/strong> function is where you define functions that will be used next in the View side, following the pattern @{DomEvent}=”youMethod”<\/strong>.<\/p>\n
This is just a taste of what\u2019s possible with Vue.js. You can see more examples in the Vue.js documentation<\/a>.<\/p>\n
Vue.js app within eXo Platform<\/h2>\n
To show you how to integrate Vue.js into the eXo stack<\/strong>, I decided to develop a small eXo add-on<\/strong> (a web app) to list all commits performed within a GitHub project.<\/p>\n
Before we can start building our app based on Vue.js<\/strong>, we need to set up a few things:<\/p>\n