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.
node -v)npm -v)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.
Bootstrap the app with Create Vue.js App executing the following commands in your terminal.
vue create smart-store-app
cd smart-store-appInstall the UI5 Web Components.
npm install @ui5/webcomponentsConsume 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-buttonThen, 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() {}
};Launch the app and you should see the ui5-button rendered on the screen.
npm run serveSources of Smart Store App Vue.js