how can i use in nuxt3 with provide function

[kpouters]

how can i use in nuxt3 with provide function to set visitor

[chrisspiegl]

This would be a great addition. But judging by the engagement on this repo, I don't see that happening any time soon?

Also, the injections are wildly crazy in the way they just overwrite words without any namespacing.

[Harm-Nullix]

Just use window.Tawk_API after load These guys are not going to fix this for you is my guess

[chrisspiegl]

That's how I ended up doing it. Sadly, I think you are right @Harm-Nullix, this vue3 component does not appear to be very high on the list for Tawk. We've started thinking about an alternative provider because of the dev api/docs/utilities.

In the mean time, maybe my implementation can help someone to implement their solution with Nuxt3:

I built this plugin / provider:

import TawkMessengerVue from '@tawk.to/tawk-messenger-vue-3'
import { consola } from 'consola'

export default defineNuxtPlugin((nuxtApp) => {
  const logger = consola.withTag('Plugin/TawkWidget.Client')
  logger.debug('🛠️ Setup')

  logger.debug('Loading Tawk')
  nuxtApp.vueApp.use(TawkMessengerVue, {
    propertyId: useRuntimeConfig().public.tawkto.idProperty,
    widgetId: useRuntimeConfig().public.tawkto.idWidget,
  })

  return {
    provide: {
      tawk: window.Tawk_API,
    },
  }
})

Which then lets me do things like this:

try {
  const { $tawk } = useNuxtApp()
  const tawkOnLoad = inject('onLoad')
  tawkOnLoad(() => {
    logger.debug('🦜 Tawk finished loading?', $tawk)
    watchImmediate(route, (route) => {
      const options = {
        route: route.path,
      }
      try {
        $tawk.setAttributes(options, result => logger.debug('🦜 Tawk set attributes', options, result))
      }
      catch (error) {
        logger.warn('Tawk Error while setAttributes', error)
      }
    })
    watchImmediate(userCurrent, (user) => {
      const options = {
        name: user?.displayName,
        email: user?.email,
        userId: user?.uid,
        subscription: userCurrentClaims.value?.stripe?.status || 'none',
        status: user ? 'registered' : 'anonymous',
      }
      try {
        $tawk.setAttributes(options, result => logger.debug('🦜 Tawk set attributes', options, result))
      }
      catch (error) {
        logger.warn('Tawk Error while setAttributes', error)
      }
    })
  })
}
catch (error) {
  logger.warn('Tawk Loading Error', error)
}