Setting up OpenBridge with Vue

Install

npm install @oicl/openbridge-webcomponents @oicl/openbridge-webcomponents-vue

Global setup

In main.ts:

import '@oicl/openbridge-webcomponents/dist/openbridge.css';

Set theme + size on the root HTML:

<html data-obc-theme="day">
  <body class="obc-component-size-regular">
    <div id="app"></div>
  </body>
</html>

Vite config

Teach Vue's template compiler that obc-* and obi-* tags are custom elements:

// vite.config.ts
export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) =>
            tag.startsWith('obc-') || tag.startsWith('obi-'),
        },
      },
    }),
  ],
});

First render

<script setup lang="ts">
import ObcSlider from '@oicl/openbridge-webcomponents-vue/components/slider/ObcSlider.vue';
</script>

<template>
  <ObcSlider :min="0" :max="100" :value="50" @value="onValue" />
</template>

Event binding

Vue listens with @<event-name>; the CustomEvent detail is on event.detail.

Theme switching

Valid themes: day, dusk, night, bright.

Vue