Getting Started

Installation

Learn how to install and configure nuxt-tawk-to v2 in your Nuxt application with npm, pnpm, or yarn.

Add Dependency

Run one of the following commands to add the module to your project:

npm install nuxt-tawk-to

pnpm add nuxt-tawk-to

yarn add nuxt-tawk-to

bun add nuxt-tawk-to

Register Module

Add nuxt-tawk-to to the modules array in your nuxt.config.ts and provide your Tawk.to credentials:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-tawk-to'],

  tawkTo: {
    propertyId: 'your-tawk-property-id',
    widgetId: 'your-widget-id'
  }
})

That's it. The Tawk.to widget will load automatically on the client side.

You can find your Property ID and Widget ID in the Tawk.to Dashboard under Administration → Channels → Chat Widget.

Module Options

The tawkTo config key accepts the following options:

Option	Type	Required	Description
`propertyId`	`string`	✅	Your Tawk.to property ID.
`widgetId`	`string`	✅	Your Tawk.to widget ID.

If either propertyId or widgetId is missing, the module will print a warning and skip widget injection.

What Happens After Install

Once registered, the module automatically:

Injects the window.Tawk_API initializer script in your app's <head>.
Loads the Tawk.to embed script asynchronously from embed.tawk.to.
Registers a client-only plugin to wire up reactive state.
Auto-imports the useTawk() composable across your entire app.

Introduction

nuxt-tawk-to is a lightweight Nuxt module that adds the Tawk.to live chat widget to your app with zero configuration. Works with Nuxt 3 and Nuxt 4.

Usage

Use the auto-imported useTawk() composable to control the Tawk.to widget with reactive state, actions, and event listeners.