Installation

Install Bantico on Nuxt.js

Nuxt.js gives you a few built-in ways to add Bantico. Here are the recommended approaches.

Replace YOUR_TOKEN with your Bantico token.

Using nuxt.config.ts

The cleanest approach is to set window.BANTICO_TOKEN and load the Bantico script in your Nuxt configuration file.

nuxt.config.ts

export default defineNuxtConfig({  app: {    head: {      script: [        {          innerHTML: 'window.BANTICO_TOKEN = "YOUR_TOKEN";',          type: 'text/javascript'        },        {          src: 'https://app.bantico.com/bantico.js',          defer: true        }      ]    }  }})

Using useHead composable

You can also add the Bantico token and script with Nuxt's useHead composable in your app.vue or a layout:

app.vue

<script setup>useHead({  script: [    {      innerHTML: 'window.BANTICO_TOKEN = "YOUR_TOKEN";',      type: 'text/javascript'    },    {      src: 'https://app.bantico.com/bantico.js',      defer: true,      tagPosition: 'head'    }  ]})</script> <template>  <div>    <NuxtPage />  </div></template>

Using Nuxt Script module

If you have @nuxt/scripts installed, set window.BANTICO_TOKEN first and then use it to load the Bantico script:

app.vue

<script setup>window.BANTICO_TOKEN = "YOUR_TOKEN" useScript('https://app.bantico.com/bantico.js', {  defer: true,  trigger: 'onNuxtReady'})</script> <template>  <div>    <NuxtPage />  </div></template>

Plugin approach

Create a plugin if you want more control over when and how the Bantico script loads:

plugins/bantico.client.ts

export default defineNuxtPlugin(() => {  window.BANTICO_TOKEN = "YOUR_TOKEN"  const script = document.createElement('script')  script.src = 'https://app.bantico.com/bantico.js'  script.async = true  script.defer = true  document.head.appendChild(script)})