Features

Nuxt PostHog provides a handful of features to improve DX

$clientPosthog & $serverPosthog

Nuxt PostHog provides two global variables to easily use PostHog's client or server object:

app.vue
<script setup lang="ts">
const { $clientPosthog, $serverPosthog } = useNuxtApp();

if (process.server) {
  $serverPosthog?.capture({ 
    distinctId: '<user-id>',
    event: 'my-server-event',
  });
}

onMounted(() => {
  $clientPosthog?.capture('my-event')
})
</script>
This utility is typed and will provide suggestions while coding once you check that it is not void

Capture events

Nuxt PostHog provides a Vue directive that will automatically capture an event when the HTML element is clicked:

app.vue
<template>
    <button v-posthog-capture="'cta_clicked'">
      Get Started
    </button>
</template>
☝️ Whenever this button is clicked, an event will be sent to PostHog automatically

This directive also accepts an object if you want to provide additional properties to this event:

app.vue
<template>
    <button v-posthog-capture="{
      name: 'event',
      properties: {
        color: 'red',
      },
    }">
      Get Started
    </button>
</template>
This directive is typed and will provide suggestions while coding

Auto-capture page views

By default, this module will capture page views automatically. If not desired, you can change this behavior:

nuxt.config.ts
export default defineNuxtConfig({
  posthog: {
    capturePageViews: false
  }
})

Auto-capture page leaves

By default, this module will capture page leaves automatically. If not desired, you can change this behavior:

nuxt.config.ts
export default defineNuxtConfig({
  posthog: {
    capturePageLeaves: false
  }
})

Feature Flags

Nuxt PostHog provides two ways of working with PostHog's feature flags:

  • usePostHogFeatureFlag composable
  • PostHogFeatureFlag component

usePostHogFeatureFlag composable

This composable provides utilities to work with PostHog's feature flags. It can check the value of a feature flag and get it's properties:

app.vue
<script setup lang="ts">
const { isFeatureEnabled, getFeatureFlag } = usePostHogFeatureFlag();
</script>

<PostHogFeatureFlag> component

This component will allow you to hide content under a feature flag without having to import the usePostHogFeatureFlag composable or use the $clientPosthog or $serverPosthog variables:

app.vue
<template>
  <PostHogFeatureFlag v-slot="{ payload }" name="feature-test" match="variant">
    <div>This content is under a feature flag</div>
    <div>This is the feature flag payload: {{ payload }}</div>
  </PostHogFeatureFlag>
<template>

Configuration

Easily configure this module in Nuxt's config file

Copyright © 2024