Vue experiments installation

Install the package

Required

Install the PostHog JavaScript library using your package manager:

npm install posthog-js
yarn add posthog-js
pnpm add posthog-js

Vue version

This guide is for Vue 3 and above. For Vue 2.x, see our Vue docs.

Create a composable

Required

Create a new file src/composables/usePostHog.js:

src/composables/usePostHog.js
import posthog from 'posthog-js'

export function usePostHog() {
  posthog.init('<ph_project_token>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2026-01-30'
  })

  return { posthog }
}

Import in your router

Required

In router/index.js, import the usePostHog composable and call it:

router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../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()

export default router

Implement your experiment

Required

Experiments run on top of our feature flags. You can define which version of your code runs based on the return value of the feature flag:

if (posthog.getFeatureFlag('your-experiment-feature-flag') === 'test') {
    // Do something differently for this user
} else {
    // It's a good idea to let control variant always be the default behaviour,
    // so if something goes wrong with flag evaluation, you don't break your app.
}

// Test that it works
posthog.featureFlags.overrideFeatureFlags({ flags: {'your-experiment-feature-flag': 'test'} })

5
Run your experiment
Required
Once you've implemented the feature flag in your code, you'll enable it for a target audience by creating a new experiment in the PostHog dashboard.

Next steps

Recommended

Now that you're running experiments, continue with the resources below to learn what else Experiments enables within the PostHog platform.

Resource	Description
Creating an experiment	How to create an experiment in PostHog
Adding experiment code	How to implement experiments for all platforms
Statistical significance	Understanding when results are meaningful
Experiment insights	How to analyze your experiment data
More tutorials	Other real-world examples and use cases

Vue experiments installation

Install the package

Create a composable

Import in your router

Implement your experiment

Run your experiment

Next steps

Community questions

Was this page useful?