Skip to main content
Use the <stackone-hub> custom element from @stackone/hub in any Vue 3 template.
1

Install the package

npm install @stackone/hub
2

Tell Vue that stackone-hub is a custom element

Vue’s template compiler treats unknown tags as Vue components by default. Mark stackone-hub as a custom element so it falls through to the DOM:
// 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',
        },
      },
    }),
  ],
});
3

Register the element at app entry

The import is side-effecting — it registers <stackone-hub> on customElements.
// src/main.ts
import '@stackone/hub/webcomponent';
import { createApp } from 'vue';
import App from './App.vue';

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

Get a session token from your backend

5

Add the element and listen for events

<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>

​
Attribute reference

Vue passes :prop="value" bindings through as HTML attributes when the tag is registered as a custom element. All scalar StackOneHub props map to kebab-case attributes — see the vanilla guide for the full table.

​
Events

Native DOM CustomEvents on the element:
Eventevent.detail
success{ id: string; provider: string }
closeundefined
Vue’s @event shorthand does not fire on native DOM CustomEvents — Vue’s template handlers assume Vue-emitted events. Subscribe with addEventListener via a ref instead.

​
Next steps

Backend setup

Generate session tokens from your backend.

Filter connectors

Restrict the Hub to a single provider or category.