Version 2 is a breaking change. The old Vue provide/inject pattern has been removed in favour of the new useTawk() composable, which is auto-imported across your entire app.
nuxt.config.ts or to your install command. Only your component code needs updating.| Feature | v1 | v2 |
|---|---|---|
| API access | inject('toggle') | useTawk().toggle |
| Reactive state | ❌ Not available | ✅ isHidden, isMinimized, isMaximized, status, unreadCount |
| Event listeners | ❌ Not available | ✅ onLoad, onStatusChange, onChatStarted… (with cleanup) |
| TypeScript | Partial | Full — all types exported via nuxt-tawk-to/types |
| Auto-import | ❌ | ✅ useTawk() is globally available |
inject callsFind all inject(...) calls and replace them with useTawk():
// ❌ v1 — inject each function manually
import { inject } from 'vue'
const toggle = inject<() => void>('toggle')
const maximize = inject<() => void>('maximize')
const minimize = inject<() => void>('minimize')
const setAttributes = inject<(...args: any[]) => void>('setAttributes')
// ✅ v2 — one destructure, fully typed
const { toggle, maximize, minimize, setAttributes } = useTawk()
Before (v1):
<script setup lang="ts">
import { inject } from 'vue'
const toggle = inject<() => void>('toggle')
const handleChat = () => {
if (toggle) toggle()
}
</script>
<template>
<button @click="handleChat">Chat with us</button>
</template>
After (v2):
<script setup lang="ts">
const { toggle } = useTawk()
</script>
<template>
<button @click="toggle()">Chat with us</button>
</template>
Before (v1):
<script setup lang="ts">
import { inject, onMounted } from 'vue'
const setAttributes = inject<(attrs: object, cb?: () => void) => void>('setAttributes')
onMounted(() => {
if (setAttributes) {
setAttributes({ name: 'John Doe', email: 'john@example.com' })
}
})
</script>
After (v2):
<script setup lang="ts">
const { visitor, setAttributes } = useTawk()
onMounted(() => {
visitor({ name: 'John Doe', email: 'john@example.com' })
setAttributes({ plan: 'Pro' })
})
</script>
v1 had no reactive state — you had to track widget state yourself. v2 provides it out of the box:
<script setup lang="ts">
// ✅ v2 — reactive refs, no manual tracking needed
const { isHidden, unreadCount, status, showWidget } = useTawk()
</script>
<template>
<button v-if="isHidden" @click="showWidget()">
Open Chat
<span v-if="unreadCount > 0">({{ unreadCount }})</span>
</button>
<span>Agent status: {{ status }}</span>
</template>
// ✅ v2 — subscribe to any event with auto-cleanup
const { onLoad, onChatStarted, onStatusChange } = useTawk()
onMounted(() => {
const cleanups = [
onLoad(() => console.log('Loaded')),
onChatStarted(() => console.log('Chat started')),
onStatusChange((status) => console.log('Status:', status))
]
onUnmounted(() => cleanups.forEach(fn => fn()))
})
The following inject keys no longer exist. Use useTawk() instead:
| v1 inject key | v2 equivalent |
|---|---|
inject('toggle') | useTawk().toggle |
inject('maximize') | useTawk().maximize |
inject('minimize') | useTawk().minimize |
inject('hideWidget') | useTawk().hideWidget |
inject('showWidget') | useTawk().showWidget |
inject('setAttributes') | useTawk().setAttributes |
inject('addTags') | useTawk().addTags |
inject('endChat') | useTawk().endChat |