Vue.js

Add PostMetric to your Vue.js project in minutes.

Installation

Step 1: Add the tracking script

Add the tracking script to your index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://your-domain.com/api/track.js?site=YOUR_TRACKING_CODE"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Or add it in your Vue app:

<script>
export default {
  mounted() {
    const script = document.createElement("script");
    script.src = "https://your-domain.com/api/track.js?site=YOUR_TRACKING_CODE";
    script.async = true;
    document.head.appendChild(script);
  },
};
</script>

Replace YOUR_TRACKING_CODE with your tracking code from the dashboard.

Step 2: Verify installation

Start your development server
Visit your website
Check your PostMetric dashboard - you should see your visit

Track custom goals

Track custom goals in your Vue components:

<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      if (window.postMetric) {
        window.postMetric("track", "goal", {
          event: "button_click",
          value: 0,
        });
      }
    },
  },
};
</script>

User identification

Identify users when they log in:

<template>
  <button @click="handleLogin">Login</button>
</template>

<script>
export default {
  methods: {
    async handleLogin() {
      const user = await this.login();

      if (window.postMetric) {
        window.postMetric("identify", {
          userId: user.id,
          email: user.email,
          name: user.name,
        });
      }
    },
  },
};
</script>

Vue Router integration

The tracking script automatically tracks Vue Router navigation. No additional setup needed!

TypeScript types

Add TypeScript types for better type safety:

// types/PostMetric.d.ts
declare global {
  interface Window {
    PostMetric: (
      method: "track" | "identify",
      type: "pageview" | "goal",
      data?: {
        event?: string;
        value?: number;
        userId?: string;
        email?: string;
        name?: string;
      }
    ) => void;
  }
}

export {};

Next steps

Track custom goals

Learn how to track custom user actions

Get started

Installation guides

Revenue attribution

Proxy guides

Advanced features

Installation

Step 1: Add the tracking script

Step 2: Verify installation

Track custom goals

User identification

Vue Router integration

TypeScript types

Next steps

Track custom goals

​Installation

​Step 1: Add the tracking script

​Step 2: Verify installation

​Track custom goals

​User identification

​Vue Router integration

​TypeScript types

​Next steps

Track custom goals

Installation

Step 1: Add the tracking script

Step 2: Verify installation

Track custom goals

User identification

Vue Router integration

TypeScript types

Next steps