UI5 Web Components

The UI5 Web Components project offers a rich set of enterprise-grade, reusable UI elements built on top of the Web Components standards. With UI5 Web Components, developers can leverage a powerful, flexible, and future-proof toolkit to create anything from static web sites to complex web applications.

You can use UI5 Web Components directly inside VuePress using custom components.

To-Do List

Usage inside VitePress

Configure vue custom elements

Add relevant compiler option to config .vitepress/config.ts

import { defineConfig } from "vitepress";
export default defineConfig({
  ...
  vue: {
    template: {
      compilerOptions: {
        // treat all tags with a "ui5-" prefix as custom elements
        isCustomElement: (tag: string) => tag.includes("ui5-")
      }
    }
  },

  // fix build errors for unavailable refs during build time
  ignoreDeadLinks: [
    // ignore all localhost links
    /^https?:\/\/localhost/,
    // ignore all links include "/ui5.sap.com/""
    /\/ui5.sap.com\//,
  ],
  ...
}

Create a custom Single-File Component (SFC)

.vitepress/theme/components/SaaS.vue

<script>
import { defineComponent } from "vue";
// observe VitePress dark mode toggle and auto apply theme using
// setTheme(classList.includes("dark") ? "sap_horizon_dark" : "sap_horizon");
import UI5WebComponentsMixin from "../mixins/UI5WebComponentsMixin";
// import used ui5 web components
import "@ui5/webcomponents/dist/TabContainer";
import "@ui5/webcomponents/dist/Tab";

export default defineComponent({
  name: "SaaS",
  mixins: [UI5WebComponentsMixin],
});
</script>

<template>
  <ui5-tabcontainer fixed="true"
    :class="[$style.tabContainer, 'ui5-content-density-compact']">
    <ui5-tab text="Software-As-A-Service" selected>
      <img src="/images/software_as_a_service.png" alt="SaaS Diagram" />
    </ui5-tab>
    <ui5-tab text="Pizza-As-A-Service">
      <img src="/images/pizza_as_a_service.png" alt="PaaS Diagram" />
    </ui5-tab>
  </ui5-tabcontainer>
</template>

<style module>
  .tabContainer {}
</style>

Avoid style scoped in Markdown

When used in Markdown, <style scoped> requires adding special attributes to every element on the current page, which will significantly bloat the page size. <style module> is preferred when locally-scoped styling is needed in a page.

Use SFC inside markdown

If your SFC is used only on one page, you can import it directly inside your markdown. It is also possible to Register Global Components that can be used inside multiple markdown files directly.

// Libraries that Access Browser API on Import (like UI5WC)
// needs to be dynamically imported!
<script setup>
import { defineClientComponent } from 'vitepress'
const SaaS = defineClientComponent(() => {
  return import('@theme/components/SaaS.vue')
})    
</script>

// Wrap your none SSR-friendly component inside ClientOnly
<ClientOnly>  
  <SaaS/>
</ClientOnly>