Essentials

TypeScript

nuxt-tawk-to v2 ships with complete TypeScript definitions. Import all types from the nuxt-tawk-to/types subpath.

Overview

nuxt-tawk-to is written in TypeScript and exports all types from the nuxt-tawk-to/types subpath. The useTawk() composable and all its return values are fully typed with no any.

Importing Types

import type {
  TawkStatus,
  TawkWindowType,
  TawkWidgetPosition,
  TawkVisitor,
  TawkCustomStyle,
  TawkSwitchWidgetData,
  TawkCallback,
  TawkAPI,
  UseTawk
} from 'nuxt-tawk-to/types'

Type Reference

Primitive Types

Type	Definition	Description
`TawkStatus`	`'online' \| 'away' \| 'offline'`	Agent availability status.
`TawkWindowType`	`'inline' \| 'widget'`	How the widget is displayed.
`TawkWidgetPosition`	`'br' \| 'bl' \| 'cr' \| 'cl' \| 'tr' \| 'tl'`	Widget screen position.
`TawkCallback`	`(error: Error \| null) => void`	Callback used in setter methods.

Object Types

`TawkVisitor`

interface TawkVisitor {
  name?: string
  email?: string
  hash?: string  // HMAC-SHA256 hash for Secure Mode
}

`TawkCustomStyle`

interface TawkCustomStyle {
  visibility?: {
    desktop?: {
      xOffset?: string | number
      yOffset?: string | number
      position?: TawkWidgetPosition
    }
    mobile?: {
      xOffset?: string | number
      yOffset?: string | number
      position?: TawkWidgetPosition
    }
  }
  zIndex?: string | number
}

`TawkSwitchWidgetData`

interface TawkSwitchWidgetData {
  propertyId: string
  widgetId: string
}

`TawkAPI`

The full interface for window.Tawk_API is exported for advanced use. It covers all actions, getters, setters, and pre-load config options.

import type { TawkAPI } from 'nuxt-tawk-to/types'

// Type the global window object in your own code
const api: TawkAPI = window.Tawk_API

The global Window interface is also automatically augmented:

// No import needed — available globally in TypeScript
window.Tawk_API   // typed as TawkAPI
window.Tawk_LoadStart  // typed as Date

`UseTawk`

The full return type of the useTawk() composable:

import type { UseTawk } from 'nuxt-tawk-to/types'

// Useful when typing wrapper composables
function useChatControl(): Pick<UseTawk, 'maximize' | 'minimize' | 'toggle'> {
  const { maximize, minimize, toggle } = useTawk()
  return { maximize, minimize, toggle }
}

Module Config Types

The tawkTo config block in nuxt.config.ts is automatically typed via the module's exported ModuleOptions:

nuxt.config.ts

export default defineNuxtConfig({
  tawkTo: {
    propertyId: 'your-property-id', // string — required
    widgetId: 'your-widget-id',     // string — required
  }
})

When using defineNuxtConfig, these types are automatically applied. No manual import is needed.

Setters

Identify visitors, set custom attributes, track events, manage tags, and switch widgets using useTawk() setters.

Examples

Real-world examples using the useTawk() composable — custom chat buttons, visitor identification, multi-widget setups, and more.