Subchapter 82.61

Vue Js

references/vue-js.mdMarkdown12 KBView on GitHub

AI agents: this is one page from PostHog’s docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt (opens in a new tab)

Vue.js

Vue Js · Instrument Product Analytics · PostHog/skills · Skills Docs

If your site sets a Content-Security-Policy, it needs to allow PostHog. This applies to the snippet and to package installs alike: the SDK lazy-loads extra bundles (session replay, surveys) from PostHog’s CDN, and sends events to the ingestion host. PostHog serves from subdomains of posthog.com that change over time, so allow the wildcard:
script-src 'self' https://*.posthog.com;
connect-src 'self' https://*.posthog.com;
worker-src 'self' blob: data:;
script-src covers the snippet and the lazy-loaded bundles, connect-src covers event ingestion and feature flags, and worker-src covers session replay. The toolbar needs a few more (opens in a new tab), or use a reverse proxy (opens in a new tab) so everything is first-party. Failing to do so causes silent failures where capture and identify calls never send, so the integration looks complete while zero events arrive. Remember connect-src falls back to default-src, so default-src 'self' blocks event delivery even when the script itself is bundled.

// src/main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import posthog from "posthog-js";

const app = createApp(App);

posthog.init(import.meta.env.VITE_POSTHOG_PROJECT_TOKEN || '<ph_project_token>', {
  api_host: import.meta.env.VITE_POSTHOG_HOST || 'https://us.i.posthog.com',
  defaults: '2026-05-30',
});

app.use(createPinia())
app.use(router)

app.config.errorHandler = (err, instance, info) => {
  posthog.captureException(err)
}

app.mount('#app')

// src/plugins/posthog.js
import posthog from 'posthog-js'

export default {
  install(Vue) {
    posthog.init('<ph_project_token>', {
      api_host: 'https://us.i.posthog.com',
      defaults: '2026-05-30'
    })

    Vue.prototype.$posthog = posthog
  }
}

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import PosthogPlugin from './plugins/posthog'

Vue.config.productionTip = false
Vue.use(PosthogPlugin)

new Vue({
  render: h => h(App),
}).$mount('#app')

// src/App.vue
<script setup>
import { RouterView } from 'vue-router'
import { usePostHog } from './composables/usePostHog'

const { posthog } = usePostHog()

const handleClick = () => {
  posthog.capture('button_clicked', { location: 'homepage' })
}
</script>

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

  <RouterView />
</template>

// src/composables/usePostHogFeatureFlag.ts
import { ref, type Ref } from 'vue'
import { usePostHog } from './usePostHog'

export function usePostHogFeatureFlag(
  feature: string,
): Ref<string | boolean | undefined> {
  const { posthog } = usePostHog()
  const flag = ref(posthog.getFeatureFlag(feature))

  posthog.onFeatureFlags(() => {
    flag.value = posthog.getFeatureFlag(feature)
  })

  return flag
}

// src/App.vue
<script setup>
import { RouterView } from 'vue-router'
import { usePostHog } from './composables/usePostHog'
import { usePostHogFeatureFlag } from './composables/usePostHogFeatureFlag'

const { posthog } = usePostHog()
const isFeatureEnabled = usePostHogFeatureFlag('test-flag')

const handleClick = () => {
  posthog.capture('button_clicked', { location: 'homepage' })
}
</script>

<template>
  <div>
    <button @click="handleClick">Click me!</button>
    <p>Is feature flag enabled? {{ isFeatureEnabled ? 'Yes' : 'No' }}</p>
  </div>

  <RouterView />
</template>

// src/components/AboutPage.vue
<template>
  <div class="about">
    <h1>About Page</h1>
    <button @click="handleClick">Test PostHog</button>
    <router-link to="/">Go to Home</router-link>
    <p>Feature enabled? {{ isFeatureEnabled ? 'Yes' : 'No' }}</p>
  </div>
</template>

<script>
export default {
  name: 'AboutPage',
  data() {
    return {
      isFeatureEnabled: false
    }
  },
  created() {
    this.isFeatureEnabled = this.$posthog.isFeatureEnabled('test-flag')
  },
  methods: {
    handleClick() {
      this.$posthog.capture('button_clicked')
    }
  }
}
</script>

Vue Js

Vue.js

Vue Js

Vue.js

Prerequisites

Setting up PostHog

npm

Yarn

pnpm

Bun

Vue 3: Composition API

Vue 2: Plugins

Identifying users

Capturing custom events, using feature flags, and more

Vue 3: Composition API

Feature flags with reactive updates

Vue 2: Plugins

Next steps

Still have questions?

Was this page useful?