Vue sample application to demonstrate the usage of the UI5 Web Components. It shows how to bind properties, to subscribe to events, using nested components and the bootstrapped Vue build.
This project was bootstrapped with Vue CLI
- Node.js (version 8.5 or higher
⚠️ )
-
Clone this repository using the GitHub Command line tool and navigate into the downloaded directory.
git clone https://github.com/SAP-samples/ui5-webcomponents-sample-vue.git cd ui5-webcomponents-sample-vue -
Install all dependencies
npm install
-
Start a local server and run the application. (The running application can be found here: http://localhost:5173)
npm run dev
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-buttonThen, you can use the custom element in an HTML page:
<ui5-button>Hello world!</ui5-button>Currently Chrome, Safari, Firefox and Edge (Chromium-based) support Web Components natively.
It is recommended to exclude our custom elements from component resolution by specifying compilerOptions.isCustomElement in our vite.config file.
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
// treat all tags with a "ui5-" prefix as custom elements
isCustomElement: tag => tag.startsWith('ui5-')
}
}
})
]
})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.
Please check our Contribution Guidelines.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent