mirror of
https://github.com/BillyOutlast/posthog.com.git
synced 2026-02-04 03:11:21 +01:00
117 lines
3.5 KiB
Plaintext
117 lines
3.5 KiB
Plaintext
---
|
|
title: Nuxt.js
|
|
icon: >-
|
|
https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/frameworks/nuxt.svg
|
|
---
|
|
|
|
import DetailSetUpReverseProxy from "../integrate/_snippets/details/set-up-reverse-proxy.mdx"
|
|
import DetailGroupProductsInOneProject from "../integrate/_snippets/details/group-products-in-one-project.mdx"
|
|
import DetailPostHogIPs from "../integrate/_snippets/details/posthog-ips.mdx"
|
|
|
|
PostHog makes it easy to get data about usage of your [Nuxt.js](https://nuxt.com/) 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:
|
|
|
|
<MultiLanguage>
|
|
|
|
```bash file=npm
|
|
npm install @posthog/nuxt
|
|
```
|
|
|
|
```bash file=Yarn
|
|
yarn add @posthog/nuxt
|
|
```
|
|
|
|
```bash file=pnpm
|
|
pnpm add @posthog/nuxt
|
|
```
|
|
|
|
```bash file=Bun
|
|
bun add @posthog/nuxt
|
|
```
|
|
|
|
</MultiLanguage>
|
|
|
|
## Configuration
|
|
|
|
Add the module to your `nuxt.config.ts` file:
|
|
|
|
```typescript 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: '<ph_client_api_host>', // 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 filename=index.vue
|
|
<script setup>
|
|
const { $posthog } = useNuxtApp()
|
|
|
|
$posthog().capture('<event_name>')
|
|
</script>
|
|
```
|
|
|
|
## Usage on the server side
|
|
|
|
Instantiate PostHog using:
|
|
|
|
```js file=server/api/example.js focusOnLines=4-21
|
|
export default defineEventHandler(async (event) => {
|
|
const distinctId = getCookie(event, 'distinct_id')
|
|
|
|
const { PostHog } = await import('posthog-node');
|
|
const runtimeConfig = useRuntimeConfig()
|
|
|
|
const posthog = new PostHog(
|
|
runtimeConfig.public.posthogPublicKey,
|
|
{
|
|
host: runtimeConfig.public.posthogHost,
|
|
}
|
|
);
|
|
|
|
posthog.capture('<event-name>')
|
|
})
|
|
```
|
|
|
|
<DetailSetUpReverseProxy />
|
|
|
|
<DetailGroupProductsInOneProject />
|
|
|
|
<DetailPostHogIPs />
|
|
|
|
## Error tracking
|
|
|
|
For a detailed error tracking installation guide, including automatic exception capture and source map configuration, see the [Nuxt error tracking installation docs](/docs/error-tracking/installation/nuxt).
|
|
|
|
## 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](/docs/libraries/js) and [Node](/docs/libraries/node) SDK docs.
|
|
|
|
Alternatively, the following tutorials can help you get started:
|
|
|
|
- [How to set up analytics in Nuxt](/tutorials/nuxt-analytics)
|
|
- [How to set up feature flags in Nuxt](/tutorials/nuxt-feature-flags)
|
|
- [How to set up A/B tests in Nuxt](/tutorials/nuxtjs-ab-tests)
|
|
- [How to set up surveys in Nuxt](/tutorials/nuxt-surveys) |