Vue.js

Add DataSaaS analytics to your Vue.js application. Works with both Vue 2 and Vue 3.

Method 1: Entry File

Add the script dynamically in your main.js or main.ts entry file:

// main.js
import { createApp } from "vue";
import App from "./App.vue";

const script = document.createElement("script");
script.defer = true;
script.dataset.websiteId = "ds_YOUR_WEBSITE_ID";
script.dataset.domain = "yourdomain.com";
script.src = "https://datasaas.co/js/script.min.js";
document.head.appendChild(script);

createApp(App).mount("#app");

Method 2: HTML File

Add the script directly to your index.html inside the <head> tag:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Vue App</title>

    <!-- DataSaaS Analytics -->
    <script
      defer
      data-website-id="ds_YOUR_WEBSITE_ID"
      data-domain="yourdomain.com"
      src="https://datasaas.co/js/script.min.js"
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
Info

The DataSaaS script automatically detects SPA navigation via the History API. No additional configuration is needed for client-side routing.

Verify

Visit your website, then open the DataSaaS dashboard. You should see your visit appear within a few seconds.