UI5 Web Components Vue Sample Application
This project was bootstrapped with Vue CLI
- Node.js (version 8.5 or higher
git clone https://github.com/SAP/ui5-webcomponents-sample-vue.git cd ui5-webcomponents-sample-vue
Install all dependencies
Start a local server and run the application. (The running application can be found here: http://localhost:8080)
npm run serve
Consume UI5 Web Components
Import the desired component(s) in your app to define the UI5 Web Component.
For example, to use
ui5-button you need to import it:
import "@ui5/webcomponents/dist/Button"; // loads ui5-button
Then, you can use the custom element in an HTML page:
Currently only Chrome, Safari and Firefox support Web Components natively.
If your application should run on browsers without native Web Components support (Edge and/or IE11), import one the following modules before your first Web Component import:
Edge and IE11
Note: Importing the module for IE11 support automatically enables Edge support as well, so there is no need to import them both explicitly.
import "@ui5/webcomponents-base/src/browsersupport/IE11"; // This will enable Edge and IE11 support for all Web Components below import "@ui5/webcomponents/dist/Button"; // loads ui5-button import "@ui5/webcomponents/dist/Label"; // loads ui5-label
Configure Vue to work with Web Components defined outside of it
To use Web Components in Vue Application a configuration option should be provided in the
main.js file to tell the Vue about these components. More can be found in the documentation of Vue.config.ignoredElements:
Vue.config.ignoredElements = [/^ui5-/];
Configure Vue Build
When UI5 Web Components are used they include all of their translation files and CLDR data files in the application bundle. In order to decrease the bundle size of the application a custom Webpack configuration should be provided.
Where is the npm package?
No limitations known.
No major bugs known.
We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the
#webcomponents channel of the OpenUI5 Community Slack.
Contribute to UI5 Web Components
Please check our Contribution Guidelines.
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.