Nuxt.js

PostHog makes it easy to get data about usage of your Nuxt.js app. Integrating PostHog into your app enables analytics about user behavior, custom events capture, session replays, feature flags, and more.

For Nuxt 3.7 and above, we recommend using the official @posthog/nuxt module. This module provides:

Automatic PostHog client initialization for both Vue (client side) and Nitro (server side)
Automatic exception capture for error tracking
Source map configuration and upload for error tracking

Installation

Install the PostHog Nuxt module using your package manager:

npm install @posthog/nuxt

Configuration

Add the module to your nuxt.config.ts file:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@posthog/nuxt'],
  posthogConfig: {
    publicKey: '<ph_project_api_key>', // Find it in project settings https://app.posthog.com/settings/project
    host: 'https://us.i.posthog.com', // Optional: defaults to https://us.i.posthog.com. Use https://eu.i.posthog.com for EU region
    clientConfig: {
      // Optional: PostHog client configuration options
    },
  },
})

Usage on the client side

You can access the PostHog client in your Vue components using:

Vue

<script setup>
const { $posthog } = useNuxtApp()

$posthog().capture('<event_name>')
</script>

Usage on the server side

Instantiate PostHog using:

server/api/example.js


  const runtimeConfig = useRuntimeConfig()

  const posthog = new PostHog(
    runtimeConfig.public.posthogPublicKey,
    { 
      host: runtimeConfig.public.posthogHost, 
    }
  );

  posthog.capture('<event-name>')
})

Set up a reverse proxy (recommended)

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

We have our own 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 using Cloudflare, AWS Cloudfront, and Vercel.

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 and group 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.

Error tracking

For a detailed error tracking installation guide, including automatic exception capture and source map configuration, see the Nuxt error tracking installation docs.

Troubleshooting

TypeScript errors in posthog config: Remove the .nuxt directory and rebuild your project to regenerate config types.

Next steps

For any technical questions for how to integrate specific PostHog features into Nuxt (such as analytics, feature flags, A/B testing, surveys, etc.), have a look at our JavaScript Web and Node SDK docs.

Alternatively, the following tutorials can help you get started:

Community questions

Was this page useful?

Questions about this page? or post a community question.