Movatterモバイル変換

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 versions2 and3. We'll use theJavaScript Web SDK for this.

For integrating PostHog into aNuxt.js app, see ourNuxt guide.

Prerequisites

To follow this guide along, you need:

A PostHog account (eitherCloud orself-hosted)
A running Vue.js app

Setting up PostHog

Start by installingposthog-js using your package manager:

npminstall --save posthog-js

Next, depending on your Vue version, we recommend initializing PostHog using the composition API or as a plugin.

We use the Composition API as it provides better accessibility, maintainability, and type safety.

Start by creating acomposables folder as well as ausePosthog.js file to that folder. InusePosthog.js, initialize PostHog as a composable with your project API key and host. You can find these in yourproject settings.

JavaScript

// src/composables/usePostHog.ts
importposthogfrom'posthog-js'
exportfunctionusePostHog(){
  posthog.init('<ph_project_api_key>',{
api_host:'https://us.i.posthog.com',
defaults:'2025-05-24',
})
return{ posthog}
}

Next, inrouter/index.js, import theusePostHog composable and call it.

JavaScript

// src/router/index.js
import{ createRouter, createWebHistory}from'vue-router'
importHomeViewfrom'../views/HomeView.vue'
import{ usePostHog}from'@/composables/usePostHog'
const router=createRouter({
history:createWebHistory(import.meta.env.BASE_URL),
routes:[
{
path:'/',
name:'home',
component:HomeView,
},
{
path:'/about',
name:'about',
component:()=>import('../views/AboutView.vue'),
},
],
})
const{ posthog}=usePostHog()
exportdefault router

Once done, PostHog will beginautocapturing events and pageviews (if enabled) and is ready to use throughout your app.

Capturing custom events, using feature flags, and more

Once you have PostHog initialized, there is a lot more you can do with it beyond autocapture, pageviews, and pageleaves. You can find the full details in ourJavaScript SDK docs, but we'll cover a few examples here.

To capture custom events, evaluate feature flags, and use any of the other PostHog features, you can use theposthog object returned from theusePostHog composable like this:

JavaScript

// src/App.vue
<script setup>
import{RouterView}from'vue-router'
import{ usePostHog}from'./composables/usePostHog'
const{ posthog}=usePostHog()
consthandleClick=()=>{
  posthog.capture('button_clicked',{location:'homepage'})
}
const isFeatureEnabled= posthog.isFeatureEnabled('test-flag')
</script>
<template>
<div>
<button @click="handleClick">Click me!</button>
<p>Is feature flag enabled?{{ isFeatureEnabled?'Yes':'No'}}</p>
</div>
<RouterView/>
</template>

Set up a reverse proxy (recommended)

We recommendsetting up a reverse proxy, so that events are less likely to be intercepted by tracking blockers.

We have ourown managed reverse proxy service included in the platform packages, which routes through our infrastructure and makes setting up your proxy easy.

If you don't want to use our managed service then there are several other options for creating a reverse proxy, including usingCloudflare,AWS Cloudfront, andVercel.

Grouping products in one project (recommended)

If you have multiple customer-facing products (e.g. a marketing website + mobile app + web app), it's best to install PostHog on them all andgroup them in one project.

This makes it possible to track users across their entire journey (e.g. from visiting your marketing website to signing up for your product), or how they use your product across multiple platforms.

Other setup options

With Vue 3, developers can useprovide() andinject() 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 the plugins can do). 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:

Import PostHog
Initialize it
Provide it to your app.

Thismust be donebefore you mount your app. If you provide PostHogafter mounting it, PostHog will not be predictably available.

JavaScript

//app.js
importposthogfrom"posthog-js";
const app=createApp(App);
posthog.init("<ph_project_api_key>",{
api_host:"https://us.i.posthog.com",
defaults:'2025-05-24',
});
app.provide("posthog", posthog);

Step 2: Inject into any Vue file

JavaScript

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

Next steps

For any technical questions for how to integrate specific PostHog features into Vue (such as analytics, feature flags, A/B testing, or surveys), have a look at ourJavaScript Web SDK docs.

Alternatively, the following tutorials can help you get started:

Prerequisites

Setting up PostHog

Capturing custom events, using feature flags, and more

Other setup options

Step 1: Initialize Vue

Step 2: Inject into any Vue file

Next steps

Community questions

Was this page useful?

Movatterモバイル変換

Vue.js

Contents