If you are looking for a faster way to build your next Vue project, you have landed in the right post. This post walks you through installing the Fundamental Library Styles into your Vue Project and using its components. The source code is provided in this post as well.

What is Vue?

Vue is a JavaScript framework for building user interfaces. It provides a declarative and component-based programming model that helps you develop simple and complex user interfaces efficiently using HTML, CSS, and JavaScript.

The structure of a .vue page:

What is Fundamental Library Styles?

Fundamental Library Styles is part of the Fundamental Library. It is a lightweight presentation layer that helps build consistent SAP Fiori apps in any web-based technology; Angular, Vue, React, etc. The library consists of already designed and built components, so they can be easy to implement and work with. Another benefit of using the Fundamental Library Styles is the fact that it is an open-source and community-driven library. Everyone outside of the core team can contribute to the code or share ideas with the team. The library’s mission is to deliver a harmonized and accessible user experience for a wide and inclusive audience.

Get Started

1. Install Node.js

Most of the JavaScript libraries or frameworks would need Node.js to be installed on your computer. Whether you are using npm or yarn, they both require Node.js. In this demo, we will use NPM to install our frameworks and libraries. npm is the package manager for the Node JavaScript platform. It puts modules in place so that nodes can find them, and manages dependency conflicts intelligently.

Make sure you have an up-to-date version of Node.js installed. To install or update the latest Node.js version, navigate to the Node.js website and click on the latest stable version or the newest current release (with the latest features).

2. Install Vue

Up until this stage, our OS system knows what a Node is and therefore knows what an NPM package is. To make sure you have installed the node correctly double-check the node and npm version in your CMD or terminal:

node -v

npm -v

The next step is to install the Vue command so you can later create a Vue project through the vue command.

npm install vue

or

npm i vue

NPM is the recommended installation method when building large-scale applications with Vue. This will ensure you have the latest Vue installation.

3. Initiate the Vue project

We will get started with a single-page project in Vue in this demo. A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.

Use your terminal to navigate to the path you want your project to be saved and use:

vue create name_of_the_project

Make sure you pick Vue3 for your demo as it is the latest release.

Wait a couple of minutes for the project to be fully completed and then enter the project through cd new_vueproject and run your Vue project using npm run serve.

Congratulations 🎉! You’ve just created your Vue Project.

The project should look like the Screenshot above. Go ahead and delete all the info from the HelloWorld.vue so we can start building our own.

4. Install Fundamental Library Styles

Referring to the previous blog post on “How to install the Fundamental Library Styles” , you can use npm install fundamental-styles --save to install the library in your project. The full components list will be installed and ready to use.

Next, make sure you install the theming so you can use any of the themes available in the library:

npm install @sap-theming/theming-base-content

For this demo project, we will be using the newest SAP Horizon theme. Make sure you include the following <link> in the index.html file in your project.

<link href=’https://unpkg.com/fundamental-styles@latest/dist/fundamental-styles.css' rel=’stylesheet’>

<link href=’https://unpkg.com/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css' rel=’stylesheet’>

<link href=’https://unpkg.com/fundamental-styles@{versionNumber}/dist/theming/sap_horizon.css' rel=’stylesheet’>

Add the SAP 72 font family in the App.vue so you can use the same font family across the project.

@font-face {
    font-family: "72";
    src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Bold-full.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "72";
    src: url("~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Light-full.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "SAP-icons";
    src: url("~@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/SAP-icons.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BusinessSuiteInAppSymbols';
    src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/BusinessSuiteInAppSymbols.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SAP-icons-TNT';
    src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons-TNT.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 16px;
}

Congratulations 🎉! You have fully installed Fundamental Library Styles in your Vue Project.

Bonus

To check if you have successfully installed the project, you can go to the Fundamental Library Styles Documentation and pick any component offered in the library. Copy and paste the code into your project and see if the component is displayed as in the documentation.

To test it, I picked fd-wizard and the result is as shown in the screenshot below.

Conclusion

In this blog post, we walked through adding the Fundamental Library Styles in a Vue project from scratch. In the next post, we are going to build a small project using Fundamental Library Styles and Vue. If you would like to skip these steps, you can start your project with this demo app. The source code of the demo app can be found here.

Happy Coding!