在 Nuxt/Vue 应用程序中使用 tawk.to

Question

Does anyone know how to use tawk.to in a Nuxt application?

I created a file "tawk.js" on my plugin folder with the following code:

var Tawk_API = Tawk_API || {},
  Tawk_LoadStart = new Date()
  (function () {
    var s1 = document.createElement('script')
    s0 = document.getElementsByTagName('script')[0]
    s1.async = true
    s1.src = 'https://embed.tawk.to/[my_ID_HERE]/default'
    s1.charset = 'UTF-8'
    s1.setAttribute('crossorigin', '*')
    s0.parentNode.insertBefore(s1, s0)
  })()

And I put it on nuxt.config.js as well:

  plugins: [
    { src: '~/plugins/tawk.js', ssr: false }
  ]

It didn't work. It does show some compiled errors:

1:1   error  Split initialized 'var' declarations into multiple statements
1:5   error  Identifier 'Tawk_API' is not in camel case
1:16  error  Identifier 'Tawk_API' is not in camel case
1:16  error  'Tawk_API' was used before it was defined
2:3   error  Identifier 'Tawk_LoadStart' is not in camel case
2:3   error  'Tawk_LoadStart' is assigned a value but never used
2:29  error  Unexpected space between function name and paren
3:3   error  Unexpected newline between function and ( of function call
5:5   error  's0' is not defined
10:5   error  's0' is not defined
10:36  error  's0' is not defined

Answer 1

The best way to integrate tawk.to in nuxt project is to go to nuxt.config.js and add it as a script tag.

// nuxt.config.js
export default {
    // ...
    head: {
        // ...
        script: [
            // ...
            {
                hid: 'tawk.to',
                src:
                    'https://embed.tawk.to/5edf699a9e5f694422903412/default',
                defer: true
            }
        ]
    },
},

Answer 2

You could try to use a vue wrapper for tawk. vue-tawk

import Tawk from 'vue-tawk'

Vue.use(Tawk, {
    tawkSrc: 'https://embed.tawk.to/5d5528ee2xxxxxxxxxxxx/default'
})

Answer 3

This may be late, but for future people who wanted to use tawk in Vue/Nuxt. You can use different version for Vue2/Nuxt2 and Vue3/Nuxt3