👨‍🏫 The Mastering Nuxt 3 course is now completed!

Discover the course

Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website

alt text

Chatwoot Vue 3 && Nuxt 3

Version Downloads License Github Stars

This module productdevbook team created.

ChatWoot integration for Vue and Nuxt.


  • Zero-config required
  • isOpen support


pnpm add @productdevbook/chatwoot
yarn add @productdevbook/chatwoot
npm add @productdevbook/chatwoot

Vue 3 Setup

add Main.ts

import { createChatWoot } from '@productdevbook/chatwoot/vue'
const chatwoot = createChatWoot({
init: {
websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'
settings: {
locale: 'en',
position: 'left',
launcherTitle: 'Hello Chat'
partytown: false,

Nuxt 3 Setup

export default defineNuxtConfig({
modules: [
chatwoot: {
init: {
websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'
settings: {
locale: 'en',
position: 'left',
launcherTitle: 'Hello Chat',
// ... and more settings
// If this is loaded you can make it true, https://github.com/nuxt-modules/partytown
partytown: false,


Add app.vue or add wherever you want.

<script setup lang="ts">
const { isModalVisible, toggle, toggleBubbleVisibility, popoutChatWindow } = useChatWoot()
<div class="flex space-x-3">
<div>{{ isModalVisible }}</div>
<button @click="toggle('open')">
<button @click="toggle('close')">
<div class="flex space-x-3">
<button @click="toggleBubbleVisibility('hide')">
<button @click="toggleBubbleVisibility('show')">
<button @click="popoutChatWindow()">
open popup

Init Default

websiteTokenstringThe token given to you when you create a chat widget.
baseUrlboolYour site's domain, as declared by you in Chatwoot's settingshttps://app.chatwoot.com


useChatWoot() accepts some

isModalVisiblebooleanThis chat will show you its open status.
toggle'open' or 'close' - Function You can open and close the chat
setUserkey: string, args: ChatwootSetUserProps - FunctionYou can send user information to chatwoot panel.
setCustomAttributesattributes: { [key: string]: string } - FunctionYou can send custom attributes to chatwoot panel.
deleteCustomAttributekey: string - FunctionYou can delete custom attributes to chatwoot panel.
setLocalelocal: string - FunctionChange widget locale
setLabellabel: string - FunctionYou can send label to chatwoot panel.
removeLabellabel: string - FunctionYou can delete label to chatwoot panel.
resetFunctionYou can reset all settings.
toggleBubbleVisibility'hide' or 'show' - FunctionYou can set the speech bubble's hide state.
popoutChatWindowYou can open the conversation as a popup.

💻 Development

  • Clone this repository
  • Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
  • Install dependencies using pnpm install
  • Stub module with pnpm dev:prepare
  • Run pnpm dev to start playground in development mode


Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.


MIT License © 2022-PRESENT productdevbook