Acorel
Gratis demo

Vue.js introduction with UI5 webcomponents

John Lee

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

, Vue.js introduction with UI5 webcomponents, Acorel

 

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

import axios from "axios";

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

export class ApiConnection {
    
    static getCustomers(){
        return axios.get(
        `${url}` + "/Customers"
        )
    }
}

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

<template>
  <div id="app">
    <Customer msg="Welcome to Your Vue.js App"/>
  </div>
</template>
 
import Customer from './components/Customers.vue'

export default {
  name: 'App',
  components: {
    Customer
  }
}
 

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

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;amp;gt; { 
          this.customerData = response.data.value; //set the returned data from the GET into customerData variable 
        });
      },
    },
  };

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

<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>

There’s more you can do than making a table. More features can be found here.
Endresult:

, Vue.js introduction with UI5 webcomponents, Acorel

You can check the source code here.

Conclusion

Vue can be much faster than other frameworks and it really shines on small scale projects.

Community support is a little behind compared to React and Angular.

Vue is still growing and might in the future be a good alternative also in large scale project.

Something to look forward to.

John Lee