Install the chat on a Vue site

The web SDK for Vue adds the chat to a Nuxt or Vue site. It loads the same chat as the install code: chat updates arrive without updating the package.

Using an AI assistant in your code editor? In App settings > Developers > Getting started, pick “With your AI assistant” and copy the Setup prompt, also in Documentation > Quick start. It installs the chat for you, then tells you what it did.

1. Open App settings > Developers > Getting started. In the install step, pick “Nuxt” or “Vue” in “Tool”.
2. Install the package, then paste the code shown into the file named above it.
3. Open your site on your computer: the chat button shows at the bottom of the page.
4. Before going live, set your site’s domain in App settings > Developers > Domain, apps and pages. The site moves to Production as soon as the chat shows on that domain: see Development and Production Modes.

1. Install the package

npm install @zean-chat/vue

2. Add the plugin

With Nuxt, create the plugin app/plugins/zean.ts. It does nothing on the server.

import { createZean } from "@zean-chat/vue";export default defineNuxtPlugin(nuxtApp => {  nuxtApp.vueApp.use(createZean({ appKey: "app_your_app_key" }));});

This code is an example: app_your_app_key stands for the real key. The code with your App’s key, for Nuxt or Vue, is in App settings > Developers > Getting started: copy it from there.

While the Contact has replies to read, your site’s tab shows their number in its title and a red dot on its icon. Your developers can turn it off: see Show the unread count.

For your developers

Vue without Nuxt, the button that opens the chat, the unread count, the Contact’s identity and the language: every option is in Documentation > Vue.