Beginner Guide to Vue.js With SAP Fiori Fundamental [Step by Step]

[former_member42359]

With more than 233K stars on Github combined, Vue.js is currently the trendiest Javascript front-end framework, beating its largest competitor React and Angular in Github star count.

The model-view-view model (MVVM) Javascript framework, was built to be lightweight and provides great flexibility. Vue.js’s single-file components are loosely coupled, which improves code reuse and decreases development time.

Vue.js is used by many enterprises such as Facebook, Netflix, Adobe, Xiaomi and many more. This bring us to wonder how easy can we start developing in Vuejs with SAP provided pacakges and follow the SAP Fiori design guidelines.

I had tried to create the fiori launchpad page with Vue.js together with Fundamental-Vue (Vue implementation of Fundamental Library Styles).

Fioiri launchpad demo

 

Below are the detailed steps I had done to create such an application.

1. Install vue cli
   

   npm install -g @vue/cli​

   
   


2. You can check the version you have installed
   

   vue --version
   
   @vue/cli 5.0.8​

   
   


3. Create a new Vue.js project
   

   vue create <project_name>​

   
   


4. Lets choose Default ([Vue2] babel, eslint) by pressing the Down arrow key once and then pressing Enter to select:


5. Once the setup is done, Lets serve the project to compile the default code and serve it on http://localhost:8080:
   

   cd <project_name>
   
   npm run serve​

   
   

   

   
   


6. Install fundamental-vue into the project. Detailed explanations are in the 'install section'.
   

   npm install --save fundamental-vue
   
   npm install --save fiori-fundamentals
   
   npm install sass-loader node-sass --save-dev​

   
   


7. Create a new folder <”scss”> in “src” folder. Within this directory, create a main SCSS file (‘main.scss’). Add the following to the main SCSS file.
   

   // If you are targeting IE 11 uncomment the following line.
   
   // $fd-support-css-var-fallback: true;
   
   // should be declared before the scss import
   
   $fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/";
   
   $fd-scss-font-path : "../node_modules/fiori-fundamentals/scss/fonts/";
   
   @import "../node_modules/fiori-fundamentals/scss/all.scss";​

   
   


8. Go to ‘main.js’ add the following:
   

   import FundamentalVue from 'fundamental-vue';
   
   import "./scss/main.scss";
   
   Vue.use(FundamentalVue)​

   
   


9. Go to ‘App.vue’ and add the following code in the template section
   

   <template> 
   
   	<div id="app">
   
   		<fd-alert dismissible> Happy building! </fd-alert>
   
   		... 
   
   	</div>
   
   </template>​

   
   


10. No go back to your browser and you can see that an alert is created.

Till now you had successfully installed fundamental-vue into the project. We can then continue to create the fiori launchpad demo project by referring to the component codes.

Fiori Launchpad Demo code structure:

 

App.vue

<template>

  <div id="app">

    <ShellBar />

    <NavTab />

    <br />

    <PanelGrid />

  </div>

</template>



<script>

import ShellBar from "./components/ShellBar.vue";

import NavTab from "./components/NavTab";

import PanelGrid from "./components/PanelGrid.vue";

export default {

  name: "App",

  components: { ShellBar, PanelGrid, NavTab },

};

</script>

 

ShellBar.vue

<template>

  <fd-shell-bar>

    <fd-shell-bar-group position="start">

      <fd-shell-bar-logo

        alt="SAP"

        src="https://unpkg.com/fiori-fundamentals@1.7.9/dist/images/sap-logo.png"

        width="48"

        height="24"

      />

      <fd-shell-bar-product productTitle="Fiori LaunchPad Demo" />

    </fd-shell-bar-group>

    <fd-shell-bar-group position="end">

      <fd-shell-bar-actions>

        <fd-shell-bar-action>

          <fd-search-input placeholder="Search" />

        </fd-shell-bar-action>

        <fd-shell-bar-action>

          <fd-shell-bar-action-button icon="sys-help" />

        </fd-shell-bar-action>

        <fd-shell-bar-action>

          <fd-shell-bar-action-button icon="settings" />

        </fd-shell-bar-action>

        <fd-shell-bar-action>

          <fd-shell-bar-user-menu>

            <fd-menu>

              <fd-menu-list>

                <fd-menu-item> Settings </fd-menu-item>

                <fd-menu-item> Sign out </fd-menu-item>

              </fd-menu-list>

            </fd-menu>

          </fd-shell-bar-user-menu>

        </fd-shell-bar-action>

      </fd-shell-bar-actions>

    </fd-shell-bar-group>

  </fd-shell-bar>

</template>

 

NavTab.vue

<template>

  <fd-tabs>

    <fd-tab-item label="Me@SAP" name="a" />

    <fd-tab-item label="My Productivity Tools" name="b" />

    <fd-tab-item label="Human Resources" name="c" />

    <fd-tab-item label="IT Services" name="d" />

  </fd-tabs>

</template>

 

PanelGrid.vue

<template>

  <fd-panel-grid :col="6">

    <fd-panel>Ticketing</fd-panel>

    <fd-panel>My Equipment</fd-panel>

    <fd-panel>Panel Body 3</fd-panel>

    <fd-panel>Panel Body 4</fd-panel>

    <fd-panel>Panel Body 5</fd-panel>

    <fd-panel>Panel Body 6</fd-panel>

    <fd-panel>Panel Body 7</fd-panel>

    <fd-panel>Panel Body 8</fd-panel>

    <fd-panel>Panel Body 9</fd-panel>

    <fd-panel>Panel Body 10</fd-panel>

    <fd-panel>Panel Body 11</fd-panel>

    <fd-panel>Panel Body 12</fd-panel>

  </fd-panel-grid>

</template>

 

That is it! Now, you should be able to start and create your own SAP Fiori like application with Vue.js.

 

Please share your feedback or thoughts by commenting below!

You’ll find much more on the community topic page for SAP Fiori

Other helpful links in the SAP Community:

• See all questions and answers about SAP Fiori


• Follow SAP Fiori for more blogs and updates


• Ask a Question about SAP Fiori