Vue.js & Nuxt

Install tokwork in Vue.js and Nuxt applications.

Install tokwork in Vue.js & Nuxt

Nuxt 3

Option 1: Using app.vue

Add the script in your app.vue:

app.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

<script setup>
useHead({
  script: [
    {
      src: 'https://js.tokwork.com/loader.js',
      async: true,
      'data-website-id': 'YOUR_WEBSITE_ID',
      'data-website-domain': 'yourdomain.com',
    }
  ]
})
</script>

Option 2: Using nuxt.config.ts (Recommended)

Configure globally in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://js.tokwork.com/loader.js',
          async: true,
          'data-website-id': 'YOUR_WEBSITE_ID',
          'data-website-domain': 'yourdomain.com',
        }
      ]
    }
  }
})

Environment-based Configuration

For different environments:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: process.env.NODE_ENV === 'production' 
        ? [
            {
              src: 'https://js.tokwork.com/loader.js',
              async: true,
              'data-website-id': process.env.TOKWORK_WEBSITE_ID,
              'data-website-domain': process.env.TOKWORK_DOMAIN,
            }
          ]
        : []
    }
  }
})

.env

TOKWORK_WEBSITE_ID=your-website-id
TOKWORK_DOMAIN=yourdomain.com

Vue 3 (Vite)

Add to index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    
    <!-- tokwork Widget -->
    <script async src="https://js.tokwork.com/loader.js" 
      data-website-id="YOUR_WEBSITE_ID" 
      data-website-domain="yourdomain.com">
    </script>
  </body>
</html>

Or use a Plugin

Create a plugin to inject the script:

src/plugins/tokwork.js

export default {
  install: (app, options) => {
    if (typeof window !== 'undefined') {
      const script = document.createElement('script')
      script.src = 'https://js.tokwork.com/loader.js'
      script.async = true
      script.setAttribute('data-website-id', options.websiteId)
      script.setAttribute('data-website-domain', options.domain)
      document.body.appendChild(script)
    }
  }
}

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import TokworkPlugin from './plugins/tokwork'

const app = createApp(App)

app.use(TokworkPlugin, {
  websiteId: 'YOUR_WEBSITE_ID',
  domain: 'yourdomain.com'
})

app.mount('#app')

Nuxt 2

Add to nuxt.config.js:

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: 'https://js.tokwork.com/loader.js',
        async: true,
        'data-website-id': 'YOUR_WEBSITE_ID',
        'data-website-domain': 'yourdomain.com',
      }
    ]
  }
}

Verify Installation

Start dev server: npm run dev
Open browser console
Look for: ✅ tokwork Widget loaded successfully
Check for widget popup

SSR Considerations

The tokwork widget automatically handles SSR:

Script only executes in browser
No hydration issues
Safe for server-side rendering

Next Steps

Next.js

Install tokwork in Next.js applications (App Router & Pages Router).

React

Install tokwork in React and React Router applications.