Getting Started
Usage
Understanding how the module works and accessing runtime configuration.
Automatic Injection
Once the module is registered in nuxt.config.ts, it automatically handles the injection of the Tawk.to widget script.
- Client-Side Only: The widget is only loaded on the client side to prevent hydration mismatches.
- Auto Start: By default, the widget will appear immediately when the page loads.
No extra component imports or plugin registrations are required in your Vue files. It just works!
Accessing Runtime Config
The module exposes your configuration options through Nuxt's public runtime config. This is useful if you need to access your propertyId or widgetId programmatically within your components or composables.
app.vue
<script setup lang="ts">
const config = useRuntimeConfig()
// Access Tawk.to configuration
console.log('Tawk Property ID:', config.public.tawkTo.propertyId)
console.log('Tawk Widget ID:', config.public.tawkTo.widgetId)
</script>
Type Safety
Since the module provides TypeScript support, config.public.tawkTo will be fully typed, offering autocomplete for all available options.