Vue

<!-- paste the tag from the console in place of the next line -->
<!-- tracker -->

<script defer src="https://in.analytics.example/v/1.1.0/sdk.js" integrity="sha384-lxlitLtIMAeT/K3ieev+MeMGxZe7oceuWLOy8GZAjK7TMKS2Uh9UPmfGLBczUPsq" crossorigin="anonymous" data-website-id="3f6a0c2e-9b1d-4e7a-8c5f-1d2e3f4a5b6c"></script>

import { createApp } from "vue";
import { createRouter, createWebHistory } from "vue-router";
import App from "./App.vue";
import Doc from "./pages/Doc.vue";
import Home from "./pages/Home.vue";
import Pricing from "./pages/Pricing.vue";

// vue router changes the url with history.pushState, which the tracker
// observes, so each route change is one pageview without any router hook
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home },
    { path: "/pricing", component: Pricing },
    { path: "/docs/:slug", component: Doc },
  ],
});

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

<button type="button" id="signup" data-umami-event="signup-click" data-umami-event-plan="free">
  Sign up
</button>

// the tracker may be blocked by the visitor, so the call is optional
function manualCall() {
  void window.umami?.track("manual-call", { source: "vue-spa" });
}

// window.umami as sdk.js installs it; optional because a visitor may block it
interface Window {
  umami?: {
    track: (name: string, data?: Record<string, string | number | boolean>) => Promise<void>;
  };
}