Vue.js introduction with UI5 webcomponents

John Lee, 10 February 2021

When researching what is possible with SAP in front-end development, I came across some articles from my colleagues. Getting started with UI5 Tooling and Using SAP UI5 Web Components with ReactJS. I got past experience with Vue.js so I wanted to know if it is possible to use UI5 with Vue.js. Since Vue is getting more popular these days. I thought it was a nice idea to write an article about it and a small instruction on how you can setup a Vue project with UI5 and Axios connection to an Odata API.

Vue introduction

When building a sustainable website we most likely debate whether to use React or Angular framework for our web application projects. In the recent years another framework is on the rise and its called Vue.js.

What is Vue.JS?

Vue was created by an ex-google developer called Evan You. It is a framework that is used for building web interfaces and one page applications. Besides web interfaces it is can also be used with Electron framework to build desktop applications and mobile apps. Vue.js use the best of Angular, more precisely the databinding, and a virtual DOM like React. The best of both in one framework.
What I noticed when developing Angular applications is that it can be pretty heavy. Vue is more lightweight compared to Angular and React. Currently Vue is more competitive for React than Angular.

Pros

Everyone who knows Javascript can learn Vue rather easily.
Light framework
More flexible
Uses a lot of features from React and Angular
Fast rendering with Virtual-DOM
Supports typescript

Cons

Less popular community but still growing hard
Not much support with large scale projects

Some well known companies that utilize Vue.JS are:
Alibaba, Google, FaceBook, Xiaomi, GitLab, Nintendo, BMW and Apple.

In the top 3 of most loved Webapplication on a 2020 stackoverflow survey

Tutorial

Before you start the project you need to make sure you have Node 12+ installed. I used this tutorial to create a Vue and UI5 project, but slightly different.

Step 1 install vue CLI

Use this command to install vue in your system.

npm install -g @vue/cli

Step 2 create web application

vue create ui5-web-components-application
cd ui5-web-components-application

I chose the newest option Vue 3 when creating a vue project

Step 3 install ui5 web components

npm install @ui5/webcomponents --save

Step 4 install components

npm install

Step 5 installing Axios Http Client

npm install axios

Step 6 Start the server

npm run serve

You now have started a basic vue webapplication. You can view your webapplication on localhost:8080

Step 7 creating axios connection

Go to the directory src and create a “service” directory. After that create the following ApiConnection.js file inside de service directory.

ApiConnection.js

[javascript]
import axios from "axios";

const url = "https://services.odata.org/Northwind/Northwind.svc";

export class ApiConnection {

static getCustomers(){
return axios.get(
`${url}` + "/Customers"
)
}
}
[/javascript]
I used an API call GET connection onto the northwind customer data. Axios will automatically convert it into JSON.

Step 8 modify Helloworld.vue

Change the helloworld.vue into customer.vue

Inside this file you can see a basic vue template with sample of ui5 components. We will change it later.

Step 9 modify Main.js

Main.js

[html]
<template>
<div id="app">
<Customer msg="Welcome to Your Vue.js App"/>
</div>
</template>
[/html]

[javascript]
import Customer from ‘./components/Customers.vue’

export default {
name: ‘App’,
components: {
Customer
}
}
[/javascript]

Step 10 modify Customers.vue

import { ApiConnection } from "../services/ApiConnection";

Import connection class to your customer.vue


    import "@ui5/webcomponents/dist/Table";
    import "@ui5/webcomponents/dist/TableColumn";
    import "@ui5/webcomponents/dist/TableRow";
    import "@ui5/webcomponents/dist/TableCell";
    import "@ui5/webcomponents/dist/Label";

import all webcomponents that is needed to build a ui5 table

[javascript]
export default {
name: "Customers",
data() {
return {
customerData: [], // create a empty array variable
};
},
mounted: function () { //these are the function that will start when you open the page
this.fetchData(); // fetchData function will trigger
},
methods: {
fetchData: function () {
ApiConnection.getCustomers().then((response) =&amp;amp;amp;amp;amp;amp;gt; {
this.customerData = response.data.value; //set the returned data from the GET into customerData variable
});
},
},
};
[/javascript]

UI5 table
Everything inside {{ }} is a vue variable

[html]
<template>
<ui5-table class="demo-table" id="table">
<ui5-table-column popin-text="CustomerID">
<ui5-label> CustomerID</ui5-label>
</ui5-table-column>
<ui5-table-column popin-text="CompanyName">
<ui5-label>CompanyName</ui5-label>
</ui5-table-column>
<ui5-table-column popin-text="City">
<ui5-label>City</ui5-label>
</ui5-table-column>
<ui5-table-column popin-text="ContactTitle">
<ui5-label>ContactTitle</ui5-label>
</ui5-table-column>
<ui5-table-column popin-text="Country">
<ui5-label>Country</ui5-label>
</ui5-table-column>
<ui5-table-row v-for="row in customerData" :key="row.CustomerID"> <!– Each customer will be looped inside this function to fill the table–>
<ui5-table-cell>
<span>{{ row.CustomerID }}</span>
</ui5-table-cell>
<ui5-table-cell>
<span>{{ row.CompanyName }}</span>
</ui5-table-cell>
<ui5-table-cell>
<span>{{ row.City }}</span>
</ui5-table-cell>
<ui5-table-cell>
<span>{{ row.ContactTitle }}</span>
</ui5-table-cell>
<ui5-table-cell>
<span>{{ row.Country }}</span>
</ui5-table-cell>
</ui5-table-row>
</ui5-table>
</template>
[/html]