Once the module is registered in nuxt.config.ts, the Tawk.to widget is automatically injected on the client side only. There is no component to mount or plugin to register — it just works.
The useTawk() composable is auto-imported across your entire Nuxt app. Call it in any <script setup>, composable, or plugin:
const tawk = useTawk()
All methods and reactive refs are available on the returned object.
These reactive refs update automatically as the widget state changes — no manual polling or event wiring required.
const { isHidden, isMinimized, isMaximized, status, unreadCount } = useTawk()
| Property | Type | Description |
|---|---|---|
isHidden | Readonly<Ref<boolean>> | true when the widget bubble is hidden. |
isMinimized | Readonly<Ref<boolean>> | true when the chat window is minimized. |
isMaximized | Readonly<Ref<boolean>> | true when the chat window is open/maximized. |
status | Readonly<Ref<'online' | 'away' | 'offline'>> | Current agent availability status. |
unreadCount | Readonly<Ref<number>> | Number of unread messages from the agent. |
<script setup lang="ts">
const { isHidden, unreadCount, status, showWidget, hideWidget } = useTawk()
</script>
<template>
<button @click="isHidden ? showWidget() : hideWidget()">
Chat
<span v-if="unreadCount > 0">({{ unreadCount }})</span>
</button>
<span>Agent is {{ status }}</span>
</template>
Control the widget window and session:
const {
start, // Start the widget after shutdown
shutdown, // Shut down and remove the widget
maximize, // Open / maximize the chat window
minimize, // Minimize the chat window
toggle, // Toggle between maximized and minimized
popup, // Open chat in a popup window
showWidget, // Show the widget bubble
hideWidget, // Hide the widget bubble
toggleVisibility, // Toggle widget bubble visibility
endChat, // End the current chat session
} = useTawk()
Imperatively query the current widget state:
const {
getWindowType, // () => 'inline' | 'widget'
getStatus, // () => 'online' | 'away' | 'offline'
isChatMaximized, // () => boolean
isChatMinimized, // () => boolean
isChatHidden, // () => boolean
isChatOngoing, // () => boolean
isVisitorEngaged, // () => boolean
onLoaded, // () => 1 | undefined
onBeforeLoaded, // () => 1 | undefined
widgetPosition, // () => 'br' | 'bl' | 'cr' | 'cl' | 'tr' | 'tl'
} = useTawk()