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
You might find that the event is not being triggered when using the directive on a custom component. Citing Vue official documentation:

Using custom directives on components is not recommended. Unexpected behaviour may occur when a component has multiple root nodes.

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

Listen to custom events

You can listen to custom events (other than the default click) by passing in the event to the directive as an argument:

app.vue
<template>
  <button v-posthog-capture:auxclick="'aux-clicked'">
    Custom event!
  </button>
</template>

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