Smart Store app Vue.js

The Smart Store app Vue.js is a Vue.js sample application, demonstrating the usage of the UI5 Web Components. You can find a step by step tutorial below on how to build the app by yourself. You don't have to clone the repo, the app will be built from scratch.

Note: no previous experience with UI5 Web Components is required. To take the most of the tutorial, a basic knowledge with Vue.js is desirable.

Prerequisites

• Node.js - version 8.10 or later (check the version with node -v)
• npm - version 6 or later (check the version with npm -v)
• Vue CLI - 🛠️ Standard Tooling for Vue.js Development

Short story

The Smart Store app enables a store manager to control his/her multiple stores. It provides the most important information and status of the stores and urgent tasks that should be addressed by the store manager.

Getting started

1. Bootstrap the app with Create Vue.js App executing the following commands in your terminal.

   vue create smart-store-app
   cd smart-store-app

2. Install the UI5 Web Components.

   npm install @ui5/webcomponents

3. Consume the UI5 Web Components.

   All the components can be imported from "@ui5/webcomponents/dist/<component_name>"; Import one of the available components in the src/App.vue.

   import "@ui5/webcomponents/dist/Button"; // loads ui5-button

   Then, you can add the ui5-button in src/App.vue and that`s it!

   export default {
   	name: "app",
   	template: `<ui5-button>Hello world!</ui5-button>`,
   	data: function() {}
   };

4. Launch the app and you should see the ui5-button rendered on the screen.

   npm run serve

Build the Smart Store app

Step #1 - The App Bar

Step #2 - The Home Component

Step #3 - The Routing

Step #4 - The Profile Area

Step #5 - Detail Page

Step #6 - Detail Page Header

Step #7 - Detail Page Filter Bar

Step #8 - Detail Page Create Item Dialog

Resources

Sources of Smart Store App Vue.js

Smart Store app React (original)

List of all available UI5 Web Components