Add Datrika to Vue

In a Vite project, paste the script into index.html.

Replace YOUR_SITE_ID with your site ID in Datrika. Copy the script with the ID filled in from your site settings, on the General tab.

Add the script

Paste the script into the <head> of index.html in your project root.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Vue app</title>
    <script defer
      src="https://cdn.datrika.app/da.js"
      data-datrika
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Datrika tracks regular page changes in your app on its own. It misses only router.replace navigations, which replace the address instead of adding one, and hash-based routing with # in the URL.

Done? Open your site in a browser - the setup guide in Datrika picks up the first visit and takes you to your dashboard.