Vue / Nuxt

Vue 3

The simplest approach is to add the script directly to your index.html. It will load on every page of your app.

index.html

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>

    <script
      src="https://app.audyr.com/widget/widget.min.js"
      data-token="YOUR_TOKEN">
    </script>
  </body>
</html>

If you need to load the widget programmatically — for example, based on a condition — you can inject it in App.vue using onMounted:

App.vue

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://app.audyr.com/widget/widget.min.js'
  script.setAttribute('data-token', 'YOUR_TOKEN')
  document.body.appendChild(script)
})
</script>

<template>
  <RouterView />
</template>

Nuxt 3

Use useHead in app.vue to inject the script globally across all pages:

app.vue

<script setup>
useHead({
  script: [
    {
      src: 'https://app.audyr.com/widget/widget.min.js',
      'data-token': 'YOUR_TOKEN',
      defer: true,
    },
  ],
})
</script>

<template>
  <NuxtPage />
</template>

Alternatively, configure it in nuxt.config.ts to apply it site-wide without touching app.vue:

nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://app.audyr.com/widget/widget.min.js',
          'data-token': 'YOUR_TOKEN',
          defer: true,
        },
      ],
    },
  },
})

Getting started

Installation

Vue 3

Nuxt 3

​Vue 3

​Nuxt 3

Vue 3

Nuxt 3