Vue

Use bootWirefaceChat() from the npm package in a composable that starts the chat when a component mounts and removes it when it unmounts:

npm install @wireface/chat

// useWirefaceChat.ts
import { type BootOptions, type WirefaceChatInstance, bootWirefaceChat } from '@wireface/chat';
import { onBeforeUnmount, onMounted, shallowRef } from 'vue';

export function useWirefaceChat(options: BootOptions & { host: string }) {
  const chat = shallowRef<WirefaceChatInstance | null>(null);
  let gone = false;
  onMounted(async () => {
    const instance = await bootWirefaceChat(options);
    if (gone) void instance.shutdown();
    else chat.value = instance;
  });
  onBeforeUnmount(() => {
    gone = true;
    void chat.value?.shutdown();
  });
  return chat;
}

<!-- App.vue -->
<script setup lang="ts">
import { useWirefaceChat } from './useWirefaceChat';

const chat = useWirefaceChat({ host: 'https://chat.example.com', bot: 'pk_your_bot_id', theme: 'auto' });
</script>

<template>
  <RouterView />
  <button :disabled="!chat" @click="chat?.open()">Ask us</button>
</template>

Call it in your root component (App.vue) so the chat lives as long as the app; Vue Router navigation is followed automatically (see Single-page apps).

Listen to events and register page tools on the instance once it is there:

import { watch } from 'vue';

watch(chat, c => {
  c?.on('lead', lead => console.log('lead', lead.fields));
});

Nuxt

onMounted only runs in the browser, so the composable works as it is in a Nuxt page, layout or app.vue. Pass the host and bot id from runtimeConfig.public.

examples/vue-vite/ in the repo is a runnable app with this composable.