Nuxt.js

Last updated:

|Edit this page

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.

These docs are aimed at Nuxt.js users who run Nuxt in spa or universal mode. You can see a working example of the Nuxt v3.0 integration in our Nuxt.js demo app

Nuxt v3.0 and above

Setting up PostHog on the client side

  1. Install posthog-js using your package manager:
Terminal
yarn add posthog-js
# or
npm install --save posthog-js
  1. Add your PostHog API key and host to your nuxt.config.js file. You can find your project API key in the PostHog app under Project Settings > Project Variables.
nuxt.config.js
export default defineNuxtConfig({
runtimeConfig: {
public: {
posthogPublicKey: '<ph_project_api_key>',
posthogHost: 'https://us.i.posthog.com'
}
}
})
  1. Create a new plugin by creating a new file posthog.client.js in your plugins directory.
plugins/posthog.client.js
import { defineNuxtPlugin } from '#app'
import posthog from 'posthog-js'
export default defineNuxtPlugin(nuxtApp => {
const runtimeConfig = useRuntimeConfig();
const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
api_host: runtimeConfig.public.posthogHost || 'https://us.i.posthog.com',
person_profiles: 'identified_only',
capture_pageview: false, // we add manual pageview capturing below
loaded: (posthog) => {
if (import.meta.env.MODE === 'development') posthog.debug();
}
})
// Make sure that pageviews are captured with each route change
const router = useRouter();
router.afterEach((to) => {
nextTick(() => {
posthog.capture('$pageview', {
current_url: to.fullPath
});
});
});
return {
provide: {
posthog: () => posthogClient
}
}
})

PostHog can then be accessed throughout your Nuxt.js using the provider accessor, for example:

Vue
<script setup>
const { $posthog } = useNuxtApp()
if ($posthog) {
const posthog = $posthog()
posthog.capture('<event_name>')
}
</script>

See the JavaScript SDK docs for all usable functions, such as:

Setting up PostHog on the server side

  1. Install posthog-node using your package manager:
Terminal
yarn add posthog-node
# or
npm install --save posthog-node
  1. Add your PostHog API key and host to your nuxt.config.js file. If you've already done this when adding PostHog to the client side, you can skip this step.
nuxt.config.js
export default defineNuxtConfig({
runtimeConfig: {
public: {
posthogPublicKey: '<ph_project_api_key>',
posthogHost: 'https://us.i.posthog.com'
}
}
})
  1. Initialize the PostHog Node client where you'd like to use it on the server side. For example, in [`useAsyncData(https://nuxt.com/docs/api/composables/use-async-data)]`:
app.vue
<!-- ...rest of code -->
<script setup>
import { useAsyncData, useCookie, useRuntimeConfig } from 'nuxt/app';
import { PostHog } from 'posthog-node';
const { data: someData, error } = await useAsyncData('ctaText', async () => {
const runtimeConfig = useRuntimeConfig();
const posthog = new PostHog(
runtimeConfig.public.posthogPublicKey,
{ host: runtimeConfig.public.posthogHost }
);
const cookies = useCookie(`ph_${runtimeConfig.public.posthogPublicKey}_posthog`);
if (cookies && cookies.value) {
try {
const distinctId = cookies.value.distinct_id; // or you can use your user's email, for example.
posthog.capture({
distinctId: distinctId,
event: 'user_did_something"',
})
await posthog.shutdown()
} catch (error) {
console.log(error);
}
}
return "Some data";
});
</script>

Note: Make sure to always call posthog.shutdown() after capturing events from the server-side. PostHog queues events into larger batches, and this call forces all batched events to be flushed immediately.

See the Node SDK docs for all usable functions, such as:

Nuxt v2.16 and below

We are going to implement PostHog as a Nuxt.js integration which gives us the possibility to inject the posthog object and make it available across our application.

The first thing you want to do is to install the posthog-js library in your project - so add it using your package manager:

Terminal
yarn add posthog-js

or

Terminal
npm install --save posthog-js

After that we want to create a app in plugins/posthog/index.js

JavaScript
import posthog from 'posthog-js'
import Vue from 'vue'
export default function({ app: { router } }, inject) {
// Init PostHog
posthog.init('<ph_project_api_key>', {
api_host: 'https://us.i.posthog.com',
person_profiles: 'identified_only',
capture_pageview: false,
loaded: () => posthog.identify('unique_id') // If you can already identify your user
})
// Inject PostHog into the application and make it available via this.$posthog (or app.$posthog)
inject('posthog', posthog)
// Make sure that pageviews are captured with each route change
router.afterEach(to => {
Vue.nextTick(() => {
/* Note: this might also be a good place to call posthog.register(...) in order to update your properties
on each page view
*/
posthog.capture('$pageview', {
$current_url: to.fullPath
})
})
})
}

Finally, we need to activate it on the client side in our nuxt.config.js

JavaScript
plugins: [
...
{ src: './plugins/posthog', mode: 'client' }
],

Usage

By using the example code above you can now use PostHog across your app with this.$posthog or app.$posthog - depending on the context. Compare with the Nuxt.js docs on further details when to use app.$posthog or this.$posthog.

Let's say for example the user makes a purchase you could track an event like that:

Web
<template>
<button @click="purchase">Buy</button>
</template>
<script>
...
methods: {
purchase() {
this.$posthog.capture('purchase')
}
}
...
</script>

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:

Questions?

Was this page useful?

Next article

n8n

This n8n app enables you to automate PostHog workflows and create workflows using other services, using n8n. Getting started The n8n app is an API integration. You will need a PostHog Personal API key , which must be authenticated with n8n to connect n8n and get started. For more information, please check n8n's integration documentation . Requirements This requires either PostHog Cloud, or a self-hosted PostHog instance running version 1.30.0 or later. Not running 1.30.0? Find out how…

Read next article