Installation

Install Bantico on Vue.js

For Vue.js applications, you can add Bantico in a few different ways depending on your setup.

Replace YOUR_TOKEN with your Bantico token.

Simplest approach

The simplest approach is to set window.BANTICO_TOKEN and load the Bantico script directly in your public/index.html file.

public/index.html

<!DOCTYPE html> <html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Vue App</title>    <script>      window.BANTICO_TOKEN = "YOUR_TOKEN";    </script>    <script src="https://app.bantico.com/bantico.js"></script>  </head>  <body>    <div id="app"></div>  </body></html>

Using Vue Meta

If you're using Vue Meta to manage the document head, you can add the Bantico token and script there:

App.vue

<script>import { defineComponent } from 'vue' export default defineComponent({  name: 'App',  metaInfo: {    script: [      {        innerHTML: 'window.BANTICO_TOKEN = "YOUR_TOKEN";',        type: 'text/javascript'      },      {        src: 'https://app.bantico.com/bantico.js',        async: true,        defer: true      }    ],    __dangerouslyDisableSanitizers: ['script']  }})</script>

Dynamic loading

For more control, set window.BANTICO_TOKEN and load the Bantico script dynamically in your main Vue component:

App.vue

<script setup>import { onMounted, onUnmounted } from 'vue' let scriptElement = null onMounted(() => {  window.BANTICO_TOKEN = "YOUR_TOKEN"  const script = document.createElement('script')  script.src = 'https://app.bantico.com/bantico.js'  script.async = true   document.head.appendChild(script)  scriptElement = script}) onUnmounted(() => {  if (scriptElement) {    document.head.removeChild(scriptElement)  }})</script> <template>  <div>    <!-- Your app content -->  </div></template>