@relcom-developers/support-chat-vue

Vue 3 wrapper around the @relcom-developers/support-chat widget. Same API, native Vue 3 component — works in Vite, Nuxt 3, or any Vue 3 app.

Installation

npm install @relcom-developers/support-chat-vue firebase
# or
pnpm add @relcom-developers/support-chat-vue firebase

Only two peer deps: vue >= 3.3 and firebase >= 10. React ships bundled inside the package — you do not need to install it.

Import styles once

Add this to your entry file (e.g. main.ts):

import '@relcom-developers/support-chat-vue/style.css';

Usage — Composition API

<script setup lang="ts">
import { SupportChatWidget } from '@relcom-developers/support-chat-vue';

const currentUser = {
  id: 'user-123',
  name: 'Jane Doe',
  email: '[email protected]',
};

function handleError(err: Error) {
  console.error('[SupportChat]', err);
}
</script>

<template>
  <SupportChatWidget
    :firebase-config="{
      apiKey: 'AIzaSy...',
      authDomain: 'your-project.firebaseapp.com',
      databaseURL: 'https://api.relcom.support?ns=your-tenant-id',
      projectId: 'your-project',
      storageBucket: 'your-project.firebasestorage.app',
      messagingSenderId: '1234567890',
      appId: '1:1234567890:web:abc',
    }"
    project-id="your-tenant-id"
    :user="currentUser"
    :theme="{ primaryColor: '#6366f1', position: 'bottom-right' }"
    locale="ru"
    :on-error="handleError"
  />
</template>

Usage — Options API

<script lang="ts">
import { defineComponent } from 'vue';
import { SupportChatWidget } from '@relcom-developers/support-chat-vue';

export default defineComponent({
  components: { SupportChatWidget },
  data() {
    return {
      firebaseConfig: {
        apiKey: 'AIzaSy...',
        authDomain: 'your-project.firebaseapp.com',
        databaseURL: 'https://api.relcom.support?ns=your-tenant-id',
        projectId: 'your-project',
        storageBucket: 'your-project.firebasestorage.app',
        messagingSenderId: '1234567890',
        appId: '1:1234567890:web:abc',
      },
      user: { id: 'user-123', name: 'Jane', email: '[email protected]' },
    };
  },
  methods: {
    handleError(err: Error) {
      console.error('[SupportChat]', err);
    },
  },
});
</script>

<template>
  <SupportChatWidget
    :firebase-config="firebaseConfig"
    project-id="your-tenant-id"
    :user="user"
    :on-error="handleError"
  />
</template>

Usage — Nuxt 3

Because the widget touches window and Firebase during mount, wrap it in <ClientOnly>:

<template>
  <ClientOnly>
    <SupportChatWidget
      :firebase-config="firebaseConfig"
      project-id="your-tenant-id"
      :user="user"
    />
  </ClientOnly>
</template>

<script setup lang="ts">
import { SupportChatWidget } from '@relcom-developers/support-chat-vue';
// ... same setup as above
</script>

You may also want to import the stylesheet in nuxt.config.ts:

export default defineNuxtConfig({
  css: ['@relcom-developers/support-chat-vue/style.css'],
});

Props

Identical to the React version — all names are converted to kebab-case in templates automatically:

| Prop | Vue template syntax | Type | Required | |---|---|---|---| | firebaseConfig | :firebase-config | FirebaseOptions | ✓ | | projectId | project-id | string | ✓ | | user | :user | { id, name?, email?, customAttributes? } | ✓ | | theme | :theme | { primaryColor?, position?, zIndex? } | — | | branding | :branding | { name?, logoUrl?, welcomeTitle?, replyTimeText?, ... } | — | | locale | locale | 'ru' \| 'en' | — | | onError | :on-error | (error: Error) => void | — |

Pass firebaseConfig, user, theme, and branding with : because they are objects. Pass the callback with :on-error (kebab-case) — it's a prop, not a Vue event.

How it works

Under the hood we use veaury to embed a small React root inside your Vue component tree. The widget's business logic (Firebase, hooks, message rendering) is reused unchanged — you just get a native Vue 3 API on top.

• Vue reactivity works normally on props — updating user.name re-renders the widget
• The widget mounts a single React tree; it does not pollute your app with a global React context
• SSR-safe: the wrapper skips rendering on the server (typeof window === 'undefined')