Vue Integration

In Vue 3, you can use the onMounted and onUnmounted lifecycle hooks to manage the widget instance.

NOTE: targetElement is optional. If not provided, a floating widget will appear by default in the bottom-right corner.

vue

<template>
    <div id="verba-chat-container" class="chat-widget-container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { VerbaChat } from '@verba-ai/chat-sdk'

const props = defineProps({
    token: { type: String, default: '' },
})

const tagId = import.meta.env.VITE_EMBED
let chat = null

onMounted(() => {
    // 1. Initialize the widget
    chat = new VerbaChat({
        tagId,
        token: props.token,
        targetElement: '#verba-chat-container',
        theme: 'light',
        withThreadList: true,
    })

    // 2. Mount the widget
    chat.init()
})

onUnmounted(() => {
    // 3. Clean up the widget on unmount
    if (chat) {
        chat.destroy()
        chat = null
    }
})
</script>

<style scoped>
.chat-widget-container {
    width: 100%;
    height: 600px;
    border: 1px solid #eee;
    border-radius: 8px;
}
</style>