Vue.js

Last updated:

|Edit this page

PostHog makes it easy to get data about usage of your Vue.js app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more.

This guide walks you through integrating PostHog into your app for both Vue.js major versions 2 and 3. We'll use the JavaScript SDK.

For integrating PostHog into a Nuxt.js app, see our Nuxt guide.

Prerequisites

To follow this guide along, you need:

  1. a PostHog account (either Cloud or self-hosted)
  2. a running Vue.js application

Setting up PostHog

  1. Install posthog-js using your package manager:
Terminal
yarn add posthog-js
# or
npm install --save posthog-js

Initializing PostHog

We will cover three different methods for initializing PostHog:

  1. Plugins
  2. Provide/inject
  3. Vue.prototype

Choose what is best for you, considering your Vue version and your codebase’s stylistic choices.

Method 1: Create a Plugin

Note: For both Vue 3.x and Vue 2.x users

First, create a new file posthog.js in your plugins directory.

Terminal
mkdir plugins #skip if you already have one
cd plugins
touch posthog.js

Next, create a plugin and assign PostHog to Vue’s global properties. The code will differ depending on your version of Vue.

Vue 3.x:

JavaScript
//./plugins/posthog.js
import posthog from "posthog-js";
export default {
install(app) {
app.config.globalProperties.$posthog = posthog.init(
"<ph_project_api_key>",
{
api_host: "<ph_instance_address>",
}
);
},
};

Vue 2.x:

JavaScript
//./plugins/posthog.js
import posthog from "posthog-js";
export default {
install(Vue, options) {
Vue.prototype.$posthog = posthog.init(
"<ph_project_api_key>",
{
api_host: "<ph_instance_address>"
}
);
}
};

Finally, activate your plugin in the file where you initialize your app. For Vue 3.x, it will likely be your index.js file. For Vue 2.x, it will be your main.js file.

Vue 3.x:

JavaScript
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import posthogPlugin from "./plugins/posthog"; //import the plugin.
const app = createApp(App);
app.use(posthogPlugin); //install the plugin
app.mount('#app')

Vue 2.x:

JavaScript
//main.js
import posthogPlugin from "./plugins/posthog"; // import the plugin
Vue.use(posthogPlugin); // install the plugin, before new Vue()

You can now use PostHog throughout your Vue app using this.$posthog. For example:

JavaScript
//component.vue
<script>
export default {
data() {
return {
foo: "bar!",
};
},
watch: {
// whenever question changes, this function will run
foo(newFoo, oldFoo) {
this.$posthog.capture("Foo Changed", {foo: newFoo});
},
},
created() {
console.log("Created", this.$posthog); //posthog accessible anywhere!
},
};
</script>

Method 2: Use provide / inject

Note: For Vue 3.x users only

With Vue 3.x, developers can use provide() and inject() to pipe global values into any component without prop drilling. And if you don’t know what prop drilling is, good for you.

While this method is more declarative — as you need to inject PostHog into every component — it avoids “polluting” globals (like method 1 does). Some engineers prefer this approach, while others include PostHog in globals since it doesn’t need to be reactive and will be called throughout your application.

Step 1: Initialize Vue

Prior to mounting the app, you must:

  1. Import PostHog
  2. Initialize it
  3. Provide it to your app.

This must be done before you mount my app. If I provide PostHog after mounting it, PostHog will not be predictably available.

JavaScript
//app.js
import posthog from "posthog-js";
const app = createApp(App);
posthog.init("<ph_project_api_key>", {
api_host: "<ph_instance_addressT>",
});
app.provide("posthog", posthog);

Step 2: Inject into any Vue file

JavaScript
//component.vue
export default {
data() {
return {
greeting: "How are you!",
};
},
inject: ["posthog"], //grab the injection from app-wide provider
created() {
console.log("Created", this.posthog); //posthog accessible!
},
};

Method 3: Use Vue.prototype

Note: For Vue 2.x users only

While Vue 3.x dramatically clamped down on global variables, in Vue 2.x, you can initialize PostHog by using Object.defineProperty and Vue.prototype.

Anywhere, declare:

JavaScript
import posthog from "posthog-js";
Object.defineProperty(Vue.prototype, '$posthog', { value: posthog });

Then, access PostHog by calling this.$posthog.

JavaScript
//component.vue
export default {
created() {
this.$posthog.capture("App Created!");
}
}

Capturing page views

While PostHog will automatically capture paths, you can optionally bind it to Vue’s built-in router using the afterEach function. Additionally, you can mount PostHog inside nextTick so that the capture event fires after the page is mounted.

Vue 3.x:

JavaScript
//router.js #might be in your app.js
router.afterEach((to) => {
nextTick(() => {
posthog.capture("$pageview", {
$current_url: to.fullPath,
});
});
});

Vue 2.x:

JavaScript
export default new Router({
/*
*
*
*/
afterEach: to => {
nextTick(() => {
posthog.capture("$pageview", {
$current_url: to.fullPath
});
});
}
});

Capturing events

Here’s a simple example of using PostHog to capture a barebones login button.

JavaScript
//component.vue
<script>
export default {
data(props) {
return {
user: props.user,
};
},
created() {
console.log("Created", this.$posthog); //posthog accessible anywhere!
},
methods: {
login() {
this.$posthog.capture("User logged in");
//should be this.posthog if you used method 2!
}
}
};
</script>
<template>
<button @click="login">Login!</button>
</template>

See the JavaScript SDK docs for all usable functions, such as:

You can the access the project used in this tutorial on GitHub.

Questions?

Was this page useful?

Next article

WordPress

Getting analytics about your WordPress site is simple with PostHog. Get data about traffic, usage, and user behavior with our free, open-source analytics platform. Once you have that data, you can discover insights and build dashboards with our suite of analytics tools. In this guide, we'll walk you through how to set up PostHog on your WordPress site. You can do this by adding our JavaScript snippet to the header of your WordPress site directly, or by using a third-party plugin to insert the…

Read next article