Skip to main content

UI5 Web Components & Vue.js

In this tutorial you will learn how to add UI5 Web Components to your application. You can add UI5 Web Components both to new Vue.js applications and to already existing ones.

Setting up a Vite and Vue.js project with UI5 Web Components​

Step 1. Setup a Vue project with Vite.​

To initialize a Vue project based on Vite, please follow the instructions provided in the official Vue documentation.

Step 2. Add UI5 Web Components​

npm install @ui5/webcomponents

Step 3. Instruct the compiler to treat UI5 Web Components as custom elements.​

To avoid issues, 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- as custom elements
          isCustomElement: tag => tag.includes('ui5-')
        }
      }
    })
  ]
})

Step 4. Import the components that you are going to use.​

import "@ui5/webcomponents/dist/Button.js";

Step 5. Use the imported elements in your application.​

<ui5-button>Hello world!</ui5-button>

Step 6. Launch the application​

npm run dev

Setting up a Nuxt project with UI5 Web Components​

Nuxt is a popular JavaScript framework built on Vue.js, designed to create server-rendered, single-page, and statically generated applications. It simplifies the development process by offering features like routing, state management, and an extensive plugin ecosystem.

Step 1. Setup a Nuxt project​

To initialize a Nuxt project, please follow the instructions provided in the official Nuxt documentation.

Step 2. Add UI5 Web Components​

npm install @ui5/webcomponents

Step 3. Configure the Nuxt application​

To avoid Vue's compiler treating UI5 Web Components as standard Vue components, you need to configure compilerOptions.isCustomElement in your nuxt.config.

Here's an example:

// nuxt.config.ts

// https://nuxt.com/docs/api/nuxt-config
export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag.startsWith("ui5-"),
    },
  },
})

Step 4. Import the components that you are going to use​

In Nuxt, auto-import functionality does not work for UI5 Web Components. You must explicitly import each component you plan to use.

<script setup lang="ts">
import "@ui5/webcomponents/dist/Button.js";
</script>

Step 5. Use the imported elements in your application​

<template>
  <ui5-button>Hello world!</ui5-button>
</template>

Step 6. Launch the application​

npm run dev

Two-Way Data Binding​

In order to use two-way data binding, use v-model as follows:

<ui5-input v-model="inputValue"></ui5-input>

For the CheckBox and RadioButton web components, you need to include an additional type attribute. This informs the Vue compiler that these components use the checked property (unlike most input-type components that use the value property).

<ui5-radio-button type="radio" v-model="rbValue"></ui5-radio-button>
<ui5-checkbox type="checkbox" v-model="cbValue"></ui5-checkbox>