Reference

Reference: @zean-chat/vue

The createZean plugin and the useZean composable, for Nuxt and Vue.

Updated October 18, 2026

The samples show app_your_app_key. Open this guide from App settings > Developers > Getting started to see your App’s key in them.

Install the package, then add the plugin where the app is created. See Install the chat on a Vue site.

Terminal

npm install @zean-chat/vue

Exports

Name	Type	Description
`createZean()`	`(options: ZeanOptions) => Plugin`	The plugin that shows the chat: `app.use(createZean({ appKey }))`. It does nothing on the server.
`useZean()`	`() => ZeanControls`	Opens and closes the chat, and follows the unread count. Works in any component, before the chat has loaded.
`ZeanOptions`	`interface`	The options of `createZean()`.
`ZeanControls`	`interface`	What `useZean()` returns.
`ZeanUser`	`interface`	The signed-in person, below.
`ZeanAttributes`	`Record<string, ZeanAttributeValue>`	The Contact’s attributes: `{ city: "Douala", orders: 12 }`.
`ZeanLocale`	`'fr' \| 'en'`	One of the chat’s languages.

Options of createZean()

Name	Type	Description
`appKey`	`string`	Required. The App’s public key, in App settings > Developers > Getting started.
`user`	`ZeanUser`	Optional. The signed-in person, `{ id, name, email }`. Same as calling `identify()` once the chat has loaded. See Identify your Contacts.
`locale`	`'fr' \| 'en'`	Optional. The chat’s language. Without it: the browser’s, when the chat speaks it, else the App’s default language. Read when the page loads.
`tabAlert`	`boolean`	Optional. The Tab alert: while the Contact has replies to read, your tab’s title starts with their count and its icon gets a red dot. On by default; `false` turns it off. See Show the unread count.

src/main.ts

import { createApp } from "vue";import { createZean } from "@zean-chat/vue";import App from "./App.vue";// Once, where the app is createdcreateApp(App).use(createZean({ appKey: "app_your_app_key", locale: "en" })).mount("#app");

useZean()

Name	Type	Description
`open()`	`() => void`	Opens the chat.
`close()`	`() => void`	Closes the chat.
`toggle()`	`() => void`	Opens the chat when closed, closes it otherwise.
`identify()`	`(user: ZeanUser) => void`	The person signed in. The first device to bring their ID joins their Conversation at once; another one first asks them for a code sent by email. See Identify your Contacts.
`signOut()`	`() => void`	The person signed out: the chat starts over, anonymous.
`setAttributes()`	`(attributes: ZeanAttributes) => void`	Joined to the attributes sent before. Refused values are reported in the console. See Custom attributes.
`unreadCount`	`Readonly<Ref<number>>`	The number of replies the Contact has not read, updated on every change. 0 on the server and until the component mounts.

Vue

<script setup>import { useZean } from "@zean-chat/vue";const { open, unreadCount } = useZean();</script><template>  <button @click="open">Help ({{ unreadCount }})</button></template>

ZeanUser

Name	Type	Description
`id`	`string \| number`	Required. Your own ID for the person, as text or a number, 200 characters at most. The same ID on your website and in your mobile app is one person.
`name`	`string`	Optional. Their name, on their Contact profile.
`email`	`string`	Optional. The code that adds another device goes to this address: without it, a second device can never join the Contact.
`phone`	`string`	Optional. Their phone, on their Contact profile.
`language`	`string`	Optional. Their language, any one, as a tag such as `pt` or `pt-BR`. Without it, their device’s is kept. It does not change the chat’s language.

createZean() takes no attributes: send them with setAttributes() from useZean().