Vue.js

Mount the loader once — typically from main.ts or App.vue using onMounted.

onMounted

Vue Router navigation does not reload the page. Load the script once when the app mounts and remove it on teardown if you need a clean slate during HMR.

import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  const script = document.createElement('script')
  script.src = 'https://cdn.jsdelivr.net/gh/webdev-raj/Tourkit@sdk-v11/sdk/dist/tourkit.min.js
'
  script.setAttribute('data-key', 'YOUR_SCRIPT_KEY')
  script.setAttribute('data-api', 'https://tourkit-phi.vercel.app')
  script.async = true
  document.body.appendChild(script)
})

onUnmounted(() => {
  const script = document.querySelector('script[data-key]')
  if (script) script.remove()
})

Single-page apps

Ensure your integration does not append multiple copies of the TourKit script when routes change.