Analytics for Vue

Product analytics for Vue

Capture page views, events, session replay, and heatmaps across your Vue or Nuxt app from a single script tag, with Vue Router navigation tracked automatically.

Start for free Install guide

Why it matters

What Vue teams can finally see

Router views are missed

Vue Router swaps components without a page reload. PulsePanda counts each navigation so your view counts match reality.

No feature-level data

Track custom events to see which features and flows users actually reach inside your app.

Friction is invisible

Heatmaps and session replay show where users hesitate, rage-click, or drop off in your components.

Setup

Add PulsePanda to Vue

Add the snippet to your HTML entry file. For plain Vue use index.html; for Nuxt add it through nuxt.config app head.

Vue — index.html

<!doctype html>
<html lang="en">
  <head>
    <script
      src="https://pulsepanda.dev/sdk.js"
      data-project="YOUR_PROJECT_ID"
      defer></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

On Nuxt, add the same script via app.head.script in nuxt.config.ts so it ships on every server-rendered page.

Workflow

From install to insight

Install the snippet

Add the script once to your Vue project. Web analytics, autocaptured clicks, session replay, and heatmaps start collecting immediately.

Track what matters

Call pulsepanda.track() on key actions and pulsepanda.identify() after login to connect events, sessions, and feedback to each user.

Act on the data

Build funnels, watch the replays behind drop-offs, read heatmaps, and collect in-product feedback — all in one workspace.

What you get

One snippet, the full picture

Analytics layerPage views, custom events, conversion funnels, and retention.

Behavior layerSession replay, click and scroll heatmaps, and error context.

Feedback layerIn-product surveys, feedback widgets, forms, and a feature voting board.

FAQ

Vue questions

Does PulsePanda track Vue Router navigation?

Yes. The SDK hooks History API changes, so every Vue Router or Nuxt route transition is recorded as a page view automatically.

Does it work with Nuxt server-side rendering?

Yes. Add the snippet to the app head in nuxt.config so it loads on every rendered page; tracking runs in the browser after hydration.

Can I track custom events in Vue?

Yes. Call pulsepanda.track("event", { props }) from a method, composable, or event handler anywhere in your components.

Add analytics to your Vue app

Install once and connect analytics, session replay, heatmaps, funnels, and feedback in minutes.

Start for free