Vue 3

// vite.config.ts
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag === 'stackone-hub',
        },
      },
    }),
  ],
});

// src/main.ts
import '@stackone/hub/webcomponent';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';

const token = ref('');
const hubRef = useTemplateRef<HTMLElement>('hub');

const onSuccess = (event: Event) => {
  const detail = (event as CustomEvent).detail;
  console.log('Connected:', detail.id, detail.provider);
};
const onClose = () => console.log('Closed');

onMounted(async () => {
  token.value = await retrieveConnectSessionToken();
  hubRef.value?.addEventListener('success', onSuccess);
  hubRef.value?.addEventListener('close', onClose);
});

onBeforeUnmount(() => {
  hubRef.value?.removeEventListener('success', onSuccess);
  hubRef.value?.removeEventListener('close', onClose);
});
</script>

<template>
  <stackone-hub
    ref="hub"
    :token="token"
    mode="integration-picker"
    height="600px"
  ></stackone-hub>
</template>