Référence

Référence : @zean-chat/vue

Le plugin createZean et le composable useZean, pour Nuxt et Vue.

Mis à jour le 18 octobre 2026

Les exemples affichent app_your_app_key. Ouvrez ce guide depuis Paramètres de l’App > Développeurs > Démarrage pour y voir la clé de votre App.

Installez le paquet, puis ajoutez le plugin là où l’app est créée. Voir Installer le chat sur un site Vue.

Terminal

npm install @zean-chat/vue

Exports

Nom	Type	Description
`createZean()`	`(options: ZeanOptions) => Plugin`	Le plugin qui affiche le chat : `app.use(createZean({ appKey }))`. Il ne fait rien côté serveur.
`useZean()`	`() => ZeanControls`	Ouvre et ferme le chat, et suit le nombre de réponses non lues. Marche dans n’importe quel composant, avant le chargement du chat.
`ZeanOptions`	`interface`	Les options de `createZean()`.
`ZeanControls`	`interface`	Ce que renvoie `useZean()`.
`ZeanUser`	`interface`	La personne connectée, plus bas.
`ZeanAttributes`	`Record<string, ZeanAttributeValue>`	Les attributs du Contact : `{ city: "Douala", orders: 12 }`.
`ZeanLocale`	`'fr' \| 'en'`	Une langue du chat.

Options de createZean()

Nom	Type	Description
`appKey`	`string`	Obligatoire. La clé publique de l’App, dans Paramètres de l’App > Développeurs > Démarrage.
`user`	`ZeanUser`	Facultatif. La personne connectée, `{ id, name, email }`. Comme appeler `identify()` une fois le chat chargé. Voir Identifier vos Contacts.
`locale`	`'fr' \| 'en'`	Facultatif. La langue du chat. Sans elle : celle du navigateur si le chat la parle, sinon la langue par défaut de l’App. Lue au chargement de la page.
`tabAlert`	`boolean`	Facultatif. L’alerte d’onglet : tant que le Contact a des réponses à lire, le titre de votre onglet commence par leur nombre et son icône prend un point rouge. Active par défaut ; `false` la désactive. Voir Afficher le nombre de messages non lus.

src/main.ts

import { createApp } from "vue";import { createZean } from "@zean-chat/vue";import App from "./App.vue";// Une seule fois, là où l’app est crééecreateApp(App).use(createZean({ appKey: "app_your_app_key", locale: "fr" })).mount("#app");

useZean()

Nom	Type	Description
`open()`	`() => void`	Ouvre le chat.
`close()`	`() => void`	Ferme le chat.
`toggle()`	`() => void`	Ouvre le chat s’il est fermé, le ferme sinon.
`identify()`	`(user: ZeanUser) => void`	La personne s’est connectée. Le premier appareil qui donne son ID rejoint sa Conversation tout de suite ; un autre lui demande d’abord un code envoyé par email. Voir Identifier vos Contacts.
`signOut()`	`() => void`	La personne s’est déconnectée : le chat repart de zéro, anonyme.
`setAttributes()`	`(attributes: ZeanAttributes) => void`	Ajoute ces attributs à ceux déjà envoyés. Les valeurs refusées sont signalées dans la console. Voir Attributs personnalisés.
`unreadCount`	`Readonly<Ref<number>>`	Le nombre de réponses que le Contact n’a pas lues, mis à jour à chaque changement. 0 côté serveur et jusqu’au montage du composant.

Vue

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

ZeanUser

Nom	Type	Description
`id`	`string \| number`	Obligatoire. Votre propre ID pour la personne, en texte ou en nombre, 200 caractères au plus. Le même ID sur votre site et dans votre application mobile donne une seule personne.
`name`	`string`	Facultatif. Son nom, sur sa fiche Contact.
`email`	`string`	Facultatif. Le code qui ajoute un autre appareil part à cette adresse : sans elle, un deuxième appareil ne peut jamais rejoindre le Contact.
`phone`	`string`	Facultatif. Son téléphone, sur sa fiche Contact.
`language`	`string`	Facultatif. Sa langue, n’importe laquelle, en code comme `pt` ou `pt-BR`. Sans elle, celle de son appareil est gardée. Elle ne change pas la langue du chat.

createZean() ne prend pas d’attributs : envoyez-les avec setAttributes() de useZean().