@ihooman/vue-chat

Vue 3 components and composables for the Ihooman Chat Widget. Provides native Vue integration with proper lifecycle management and Nuxt 3 compatibility.

Installation

npm install @ihooman/vue-chat
# or
yarn add @ihooman/vue-chat
# or
pnpm add @ihooman/vue-chat

Requirements

• Vue 3.0.0 or higher
• A valid Widget ID from your Ihooman Dashboard

Quick Start

Basic Usage

<template>
  <ChatWidget
    widget-id="wgt_abc123def456"
    position="bottom-right"
    @ready="onWidgetReady"
  />
</template>

<script setup>
import { ChatWidget } from '@ihooman/vue-chat';

function onWidgetReady() {
  console.log('Widget ready!');
}
</script>

With Composable

For programmatic control over the widget from any component:

<template>
  <ChatWidget widget-id="wgt_abc123def456" />
  <button @click="open" :disabled="!isReady">
    Need Help?
  </button>
</template>

<script setup>
import { ChatWidget, useChatWidget } from '@ihooman/vue-chat';

const { open, isReady } = useChatWidget();
</script>

Global Plugin Registration

Register the component globally for use anywhere in your app:

// main.ts
import { createApp } from 'vue';
import { IhoomanChatPlugin } from '@ihooman/vue-chat';
import App from './App.vue';

const app = createApp(App);
app.use(IhoomanChatPlugin);
app.mount('#app');

Then use it in any component without importing:

<template>
  <ChatWidget widget-id="wgt_abc123def456" />
</template>

Components

<ChatWidget />

The main component that renders the chat widget.

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | widget-id | string | Yes | Your Widget ID from the Ihooman dashboard | | server-url | string | No | Custom server URL (defaults to production) | | theme | 'light' \| 'dark' | No | Color theme | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | No | Widget position | | start-open | boolean | No | Start with widget open | | user | { name?: string; email?: string; metadata?: Record<string, string> } | No | User information |

See the full props documentation for all available options.

Events

| Event | Payload | Description | |-------|---------|-------------| | @ready | - | Emitted when widget is ready | | @open | - | Emitted when widget opens | | @close | - | Emitted when widget closes | | @message | Message | Emitted on new messages | | @error | Error | Emitted on errors |

Composables

useChatWidget()

Composable for controlling the widget from any component.

<script setup>
import { useChatWidget } from '@ihooman/vue-chat';

const {
  isOpen,      // Ref<boolean> - Whether widget is open
  isReady,     // Ref<boolean> - Whether widget is initialized
  isConnected, // Ref<boolean> - Whether connected to server
  open,        // () => void - Open the widget
  close,       // () => void - Close the widget
  toggle,      // () => void - Toggle open/closed
  sendMessage, // (content: string) => void - Send a message
  setUser,     // (user: UserInfo) => void - Set user info
  clearHistory,// () => void - Clear chat history
  messages,    // Ref<Message[]> - Current messages
  unreadCount, // Ref<number> - Unread message count
} = useChatWidget();
</script>

Examples

With User Information

<template>
  <ChatWidget
    widget-id="wgt_abc123def456"
    :user="{
      name: 'John Doe',
      email: '[email protected]',
      metadata: {
        plan: 'premium',
        customerId: 'cust_123'
      }
    }"
  />
</template>

Custom Styling

<template>
  <ChatWidget
    widget-id="wgt_abc123def456"
    primary-color="#6366f1"
    gradient-from="#6366f1"
    gradient-to="#8b5cf6"
    :border-radius="16"
    font-family="Inter, sans-serif"
  />
</template>

Programmatic Messages

<template>
  <div>
    <button 
      @click="sendMessage('I need help with my order')"
      :disabled="!isReady"
    >
      Order Help
    </button>
    <button 
      @click="sendMessage('How do I reset my password?')"
      :disabled="!isReady"
    >
      Password Help
    </button>
  </div>
</template>

<script setup>
import { useChatWidget } from '@ihooman/vue-chat';

const { sendMessage, isReady } = useChatWidget();
</script>

Nuxt 3

The component is SSR-compatible and defers initialization to the client:

<!-- app.vue or layouts/default.vue -->
<template>
  <div>
    <NuxtPage />
    <ClientOnly>
      <ChatWidget widget-id="wgt_abc123def456" />
    </ClientOnly>
  </div>
</template>

<script setup>
import { ChatWidget } from '@ihooman/vue-chat';
</script>

Or create a Nuxt plugin for global registration:

// plugins/ihooman-chat.client.ts
import { IhoomanChatPlugin } from '@ihooman/vue-chat';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(IhoomanChatPlugin);
});

Reactive User Updates

<template>
  <ChatWidget 
    widget-id="wgt_abc123def456" 
    :user="currentUser"
  />
</template>

<script setup>
import { ref, computed } from 'vue';
import { ChatWidget } from '@ihooman/vue-chat';

const user = ref({
  name: 'Guest',
  email: ''
});

// User info updates automatically when ref changes
function login(name: string, email: string) {
  user.value = { name, email };
}
</script>

TypeScript

Full TypeScript support is included. Import types as needed:

import type { 
  ChatWidgetProps, 
  UseChatWidgetReturn,
  Message,
  UserInfo 
} from '@ihooman/vue-chat';

Framework Compatibility

• ✅ Vue 3.0+
• ✅ Vue 3.4+ (latest)
• ✅ Nuxt 3
• ✅ Vite
• ✅ Vue CLI
• ✅ Quasar

License

MIT © Ihooman AI