Installation

Install Bantico on Vue.js

For Vue.js applications, you can add Bantico in a few different ways depending on your setup. Pass your project token through data-token. These examples also set window.__BANTICO_TOKEN__ as a safe fallback.

Replace YOUR_PROJECT_TOKEN with your Bantico project token.

Simplest approach

The simplest approach is to load the Bantico script directly in your main HTML entry file.

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_PROJECT_TOKEN";    </script>     <script src="https://app.bantico.com/bantico.js" data-token="YOUR_PROJECT_TOKEN" defer></script>  </head>  <body>    <div id="app"></div>  </body></html>

Using Vue Meta

If you use Vue Meta to manage the document head, set window.__BANTICO_TOKEN__ first, then add the Bantico script with data-token.

App.vue

<script>import { defineComponent } from 'vue' export default defineComponent({  name: 'App',  created() {    window.__BANTICO_TOKEN__ = 'YOUR_PROJECT_TOKEN'  },  metaInfo: {    script: [      {        vmid: 'bantico-tracker',        src: 'https://app.bantico.com/bantico.js',        defer: true,        'data-token': 'YOUR_PROJECT_TOKEN'      }    ]  }})</script>

Dynamic loading

For more control, set window.__BANTICO_TOKEN__, then load the Bantico script dynamically and pass the same token through data-token.

App.vue

<script setup>import { onMounted, onUnmounted } from 'vue' let scriptElement = null onMounted(() => {  window.__BANTICO_TOKEN__ = 'YOUR_PROJECT_TOKEN'   const existing = document.querySelector('script[data-bantico="true"]')  if (existing) return   const script = document.createElement('script')  script.src = 'https://app.bantico.com/bantico.js'  script.defer = true  script.setAttribute('data-token', 'YOUR_PROJECT_TOKEN')  script.setAttribute('data-bantico', 'true')  document.head.appendChild(script)  scriptElement = script}) onUnmounted(() => {  if (scriptElement?.parentNode) {    scriptElement.parentNode.removeChild(scriptElement)  }})</script> <template>  <div>    <!-- Your app content -->  </div></template>