> ## Documentation Index
> Fetch the complete documentation index at: https://tinyanalytics.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue Analytics Integration

> Add tinyanalytics to index.html so one script covers the Vue app and tracks client-side navigation through Vue Router automatically.

To add tinyanalytics to a **Vue** app, paste the tracking snippet into your `index.html` so it loads once for the whole app. Client-side navigation with Vue Router is tracked automatically, so you don't need to hook into the router.

## Before you start

* A tinyanalytics site. If you don't have one yet, follow the [Quickstart](/docs/tinyanalytics-quickstart).
* Your site's numeric **site ID**, from **Settings → Tracking** in your dashboard.

## Add the snippet to `index.html`

A Vue project created with Vite has a single `index.html` at the project root. Add the snippet inside its `<head>`:

```html index.html theme={null}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Vue App</title>
    <script defer src="https://dash.tinyanalytics.io/script.js"
      data-site-id="YOUR_SITE_ID"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

<Tip>
  Replace `YOUR_SITE_ID` with your real site ID, and copy the full snippet from **Settings → Tracking** if you've toggled any options.
</Tip>

## Client-side navigation is tracked automatically

Vue Router renders route changes on the client, and tinyanalytics records each one as a new pageview by default (`data-track-spa`). You don't need to watch the route or call anything on navigation. See [Track single-page apps](/docs/configure-tinyanalytics-tracking-script#track-single-page-apps) to change this behavior.

## Verify

Run or deploy your app, open it in a browser, then check **Realtime** in your dashboard for your visit. See [Verify your setup](/docs/verify-tinyanalytics-installation) for the full check.

<Check>
  Your install is working when your own visit appears in **Realtime** in your dashboard.
</Check>

## Related

<Columns cols={2}>
  <Card title="Install on Nuxt" icon="code" href="/docs/integrations/nuxt-analytics">
    A Nuxt (server-rendered Vue) app instead.
  </Card>

  <Card title="Configure the tracking script" icon="sliders" href="/docs/configure-tinyanalytics-tracking-script">
    Every `data-*` option you can set.
  </Card>

  <Card title="Track custom events" icon="hand-pointer" href="/docs/custom-event-tracking">
    Send events from your components.
  </Card>

  <Card title="Verify your setup" icon="circle-check" href="/docs/verify-tinyanalytics-installation">
    Confirm tracking works.
  </Card>
</Columns>


## Related topics

- [Nuxt Analytics Integration](/docs/integrations/nuxt-analytics.md)
- [Angular Analytics Integration](/docs/integrations/angular-analytics.md)
- [Gatsby Analytics Integration](/docs/integrations/gatsby-analytics.md)
