Integration Nuxt 3 6
PostHogOfficialCreated by PostHog
- Skill
- Tool integration
- Software development
- MIT
- No issues found
AutoGineer summary
Written by AutoGineer from the skill’s own files, not by the author
This skill provides a step-by-step procedure for adding PostHog analytics to Nuxt 3.6 projects. Because Nuxt 3.0-3.6 does not support the standard @posthog/nuxt package, this workflow guides developers through manual implementation using posthog-js and posthog-node. It covers client-side initialization, server-side tracking, user identification, and error tracking to ensure a complete analytics setup.
What it does
- Guides the manual installation of PostHog packages for Nuxt 3.6
- Provides a structured 4-step integration workflow
- Demonstrates client-side plugin configuration for Nuxt
- Outlines patterns for server-side event tracking in API routes
- Explains how to identify users and maintain session correlation
- Includes instructions for implementing error tracking
When to use it
- When you need to add PostHog analytics to a Nuxt 3.0 through 3.6 application
- When you require both client-side and server-side event tracking
- When you need to implement user identification and error tracking in a Nuxt 3 environment
- When you want to follow established patterns for environment variable management and API integration
Advantages
- Provides a clear, sequential path for integration
- Ensures consistent implementation of server-side and client-side tracking
- Promotes best practices like using environment variables for sensitive keys
- Offers a reference project to verify implementation patterns
Usage examples
- “How do I start integrating PostHog into my Nuxt 3.6 project?”
- The agent will initiate the workflow, starting with the setup phase and guiding you through the required file analysis and dependency verification.
- “How should I handle user identification in Nuxt 3.6 with PostHog?”
- The agent will direct you to the identification patterns, explaining how to use client-side login events and pass session headers to the backend.
Install
Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/posthog/integration-nuxt-3-6/downloadUnzip it into the cross-client skills folder of your project:
mkdir -p .agents/skills && unzip integration-nuxt-3-6.zip -d .agents/skills
Documentation by PostHog
PostHog integration for Nuxt 3.6
This skill helps you add PostHog analytics to Nuxt 3.6 applications.
Workflow
Follow these steps in order to complete the integration:
basic-integration-1.0-begin.md- PostHog Setup - Begin ← Start herebasic-integration-1.1-edit.md- PostHog Setup - Editbasic-integration-1.2-revise.md- PostHog Setup - Revisebasic-integration-1.3-conclude.md- PostHog Setup - Conclusion
Reference files
references/EXAMPLE.md- Nuxt 3.6 example project codereferences/nuxt-js-3-6.md- Nuxt.js (v3.0 to v3.6) - docsreferences/identify-users.md- Identify users - docsreferences/basic-integration-1.0-begin.md- PostHog setup - beginreferences/basic-integration-1.1-edit.md- PostHog setup - editreferences/basic-integration-1.2-revise.md- PostHog setup - revisereferences/basic-integration-1.3-conclude.md- PostHog setup - conclusion
The example project shows the target implementation pattern. Consult the documentation for API details.
Key principles
Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
Match the example: Your implementation should follow the example project's patterns as closely as possible.
Framework guidelines
No specific framework guidelines.
Identifying users
Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to maintain correlation.
Error tracking
Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.
Files
- ATTRIBUTION.mdAdded by AutoGineer960 B
- LICENSELicence file added by AutoGineer1.0 KiB
- SKILL.md2.0 KiB
- references/EXAMPLE.md22.1 KiB
- references/basic-integration-1.0-begin.md2.1 KiB
- references/basic-integration-1.1-edit.md2.5 KiB
- references/basic-integration-1.2-revise.md937 B
- references/basic-integration-1.3-conclude.md1.6 KiB
- references/identify-users.md8.1 KiB
- references/nuxt-js-3-6.md6.6 KiB
references/EXAMPLE.md
PostHog Nuxt 3.6 Example Project
Repository: https://github.com/PostHog/context-mill Path: basics/nuxt-3.6
README.md
PostHog Nuxt 3.6 example
This is a Nuxt 3.6 example demonstrating PostHog integration with product analytics, session replay, feature flags, and error tracking.
Nuxt 3.0 - 3.6 does not support the @posthog/nuxt package. You must use the posthog-js and posthog-node packages directly instead. This example also does not cover automatic source map uploads, only available through the @posthog/nuxt package.
Nuxt 2.x is also distinctly different, follow this guide instead.
Features
Product Analytics: Track user events and behaviors
Session Replay: Record and replay user sessions
Error Tracking: Capture and track errors
User Authentication: Demo login system with PostHog user identification
Server-side & Client-side Tracking: Examples of both tracking methods
SSR Support: Server-side rendering with Nuxt 3.6
Getting Started
1. Install Dependencies
npm install
# or
pnpm install2. Configure Environment Variables
Create a .env file in the root directory:
NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN=your_posthog_project_token
NUXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.comGet your PostHog project token from your PostHog project settings.
3. Run the Development Server
npm run dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the app.
Project Structure
├── assets/
│ └── css/
│ └── main.css # Global styles
├── components/
│ └── Header.vue # Navigation header with auth state
├── composables/
│ └── useAuth.ts # Authentication composable
├── pages/
│ ├── index.vue # Home/Login page
│ ├── burrito.vue # Demo feature page with event tracking
│ └── profile.vue # User profile with error tracking demo
├── plugins/
│ └── posthog.client.ts # Client-side PostHog plugin
├── server/
│ ├── api/
│ │ ├── auth/
│ │ │ └── login.post.ts # Login API with server-side tracking
│ │ └── burrito/
│ │ └── consider.post.ts # Burrito API with server-side tracking
│ └── utils/
│ └── users.ts # In-memory user storage utilities
├── types/
│ └── nuxt-app.d.ts # TypeScript declarations for PostHog
├── app.vue # Root component with error handling
└── nuxt.config.ts # Nuxt configurationKey Integration Points
Client-side initialization (plugins/posthog.client.ts)
import posthog from 'posthog-js'
import type { PostHog, PostHogInterface } from 'posthog-js'
export default defineNuxtPlugin((nuxtApp) => {
const runtimeConfig = useRuntimeConfig()
const posthogClient = posthog.init(runtimeConfig.public.posthog.publicKey, {
api_host: runtimeConfig.public.posthog.host,
defaults: runtimeConfig.public.posthog.posthogDefaults as any,
loaded: (posthog: PostHogInterface) => {
if (import.meta.env.MODE === 'development') posthog.debug()
},
})
nuxtApp.hook('vue:error', (error) => {
posthogClient.captureException(error)
})
return {
provide: {
posthog: posthogClient as PostHog,
},
}
})The session and distinct ID are automatically passed to the backend via the X-POSTHOG-SESSION-ID and X-POSTHOG-DISTINCT-ID headers when __add_tracing_headers is configured in the PostHog initialization.
Important: do not identify users on the server-side.
User identification (pages/index.vue)
The user is identified when the user logs in on the client-side.
const { $posthog: posthog } = useNuxtApp()
const handleSubmit = async () => {
const success = await auth.login(username.value, password.value)
if (success) {
// Identifying the user once on login/sign up is enough.
posthog?.identify(username.value)
// Capture login event
posthog?.capture('user_logged_in')
}
}The session and distinct ID are automatically passed to the backend via the X-POSTHOG-SESSION-ID and X-POSTHOG-DISTINCT-ID headers because we set the __add_tracing_headers option in the PostHog initialization.
Important: do not identify users on the server-side.
Server-side API routes (server/api/auth/login.post.ts, server/api/burrito/consider.post.ts)
Server-side API routes create a PostHog Node client for each request and extract session and user context from request headers:
import { PostHog } from 'posthog-node'
import { getHeader } from 'h3'
export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig()
// Relies on __add_tracing_headers being set in the client-side SDK
const sessionId = getHeader(event, 'x-posthog-session-id')
const distinctId = getHeader(event, 'x-posthog-distinct-id')
const posthog = new PostHog(
runtimeConfig.public.posthog.publicKey,
{
host: runtimeConfig.public.posthog.host,
}
)
await posthog.withContext(
{ sessionId: sessionId ?? undefined, distinctId: distinctId ?? undefined },
async () => {
posthog.capture({
event: 'server_login',
distinctId: distinctId ?? username,
})
}
)
// Always shutdown to ensure all events are flushed
await posthog.shutdown()
})Key Points:
Creates a new PostHog Node client for each request
Extracts
sessionIdanddistinctIdfrom request headers usinggetHeader()fromh3Uses
withContext()to associate server-side events with the correct session/userProperly shuts down the client after each request to ensure events are flushed
Event tracking (pages/burrito.vue)
const { $posthog: posthog } = useNuxtApp()
const handleConsideration = () => {
if (user.value) {
auth.incrementBurritoConsiderations()
posthog?.capture('burrito_considered', {
total_considerations: user.value?.burritoConsiderations + 1,
username: user.value?.username,
})
}
}Error tracking (app.vue, plugins/posthog.client.ts, pages/profile.vue)
Errors are captured in three ways:
Vue error hook - The
vue:errorhook inplugins/posthog.client.tsautomatically captures Vue errors:
nuxtApp.hook('vue:error', (error) => {
posthogClient.captureException(error)
})Error boundary - The
onErrorCapturedinapp.vuecaptures component errors:
onErrorCaptured((error) => {
posthog?.captureException(error)
return false // Let the error propagate
})Manual error capture in components (pages/profile.vue):
const triggerTestError = () => {
try {
throw new Error('Test error for PostHog error tracking')
} catch (err) {
posthog?.captureException(err as Error)
}
}Server-side tracking (server/api/auth/login.post.ts, server/api/burrito/consider.post.ts)
Server-side events use a PostHog Node client created per request:
const posthog = new PostHog(
runtimeConfig.public.posthog.publicKey,
{
host: runtimeConfig.public.posthog.host,
}
)
await posthog.withContext(
{ sessionId: sessionId ?? undefined, distinctId: distinctId ?? undefined },
async () => {
posthog.capture({
event: 'server_login',
distinctId: distinctId ?? username,
})
}
)
await posthog.shutdown()Key Points:
The PostHog Node client is created per request in each API route
Events are automatically associated with the correct user/session via
withContext()The
distinctIdandsessionIdare extracted from request headers and used to maintain context between client and serverAlways call
shutdown()to ensure events are flushed
Accessing PostHog in components
PostHog is accessed via useNuxtApp():
const { $posthog: posthog } = useNuxtApp()
posthog?.capture('event_name', { property: 'value' })TypeScript types are provided via types/nuxt-app.d.ts:
import type { PostHog } from 'posthog-js'
declare module '#app' {
interface NuxtApp {
$posthog: PostHog
}
}Learn More
.env.example
NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN=
NUXT_PUBLIC_POSTHOG_HOST=app.vue
<template>
<div>
<NuxtRouteAnnouncer />
<Header />
<main>
<NuxtPage />
</main>
</div>
</template>
components/Header.vue
<template>
<header class="header">
<div class="header-container">
<nav>
<NuxtLink to="/">Home</NuxtLink>
<template v-if="user">
<NuxtLink to="/burrito">Burrito Consideration</NuxtLink>
<NuxtLink to="/profile">Profile</NuxtLink>
</template>
</nav>
<div class="user-section">
<template v-if="user">
<span>Welcome, {{ user.username }}!</span>
<button @click="handleLogout" class="btn-logout">
Logout
</button>
</template>
<template v-else>
<span>Not logged in</span>
</template>
</div>
</div>
</header>
</template>
<script setup lang="ts">
const auth = useAuth()
const user = computed(() => auth.user.value)
const { $posthog: posthog } = useNuxtApp()
const handleLogout = () => {
posthog?.capture('user_logged_out')
posthog?.reset()
auth.logout()
}
</script>
composables/useAuth.ts
interface User {
username: string
burritoConsiderations: number
}
const users = new Map<string, User>()
export const useAuth = () => {
const user = useState<User | null>('auth-user', () => {
if (typeof window !== 'undefined') {
const storedUsername = localStorage.getItem('currentUser')
if (storedUsername) {
const existingUser = users.get(storedUsername)
if (existingUser) {
return existingUser
}
}
}
return null
})
const login = async (username: string, password: string): Promise<boolean> => {
if (!username || !password) {
return false
}
try {
const response = await $fetch('/api/auth/login', {
method: 'POST',
body: { username, password },
})
if (response.success && response.user) {
// Update client-side state
user.value = response.user
users.set(username, response.user)
if (typeof window !== 'undefined') {
localStorage.setItem('currentUser', username)
}
return true
}
return false
} catch (err) {
console.error('Login error:', err)
return false
}
}
const logout = () => {
user.value = null
if (typeof window !== 'undefined') {
localStorage.removeItem('currentUser')
}
}
const setUser = (newUser: User) => {
user.value = newUser
users.set(newUser.username, newUser)
}
const incrementBurritoConsiderations = () => {
if (user.value) {
user.value.burritoConsiderations++
users.set(user.value.username, user.value)
// Trigger reactivity by creating a new object
user.value = { ...user.value }
}
}
return {
user,
login,
logout,
setUser,
incrementBurritoConsiderations
}
}
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
runtimeConfig: {
public: {
posthog: {
publicKey: process.env.NUXT_PUBLIC_POSTHOG_PROJECT_TOKEN,
host: process.env.NUXT_PUBLIC_POSTHOG_HOST,
posthogDefaults: '2026-01-30',
},
},
},
})
pages/burrito.vue
<template>
<div class="container">
<h1>Burrito consideration zone</h1>
<p>Take a moment to truly consider the potential of burritos.</p>
<div style="text-align: center">
<button
@click="handleConsideration"
class="btn-burrito"
>
I have considered the burrito potential
</button>
<p v-if="hasConsidered" class="success">
Thank you for your consideration! Count: {{ user?.burritoConsiderations }}
</p>
</div>
<div class="stats">
<h3>Consideration stats</h3>
<p>Total considerations: {{ user?.burritoConsiderations }}</p>
</div>
</div>
</template>
<script setup lang="ts">
const auth = useAuth()
const user = computed(() => auth.user.value)
const router = useRouter()
const hasConsidered = ref(false)
const { $posthog } = useNuxtApp()
// Redirect to home if not logged in
watchEffect(() => {
if (!user.value) {
router.push('/')
}
})
const handleConsideration = async () => {
if (!user.value) return
try {
const response = await $fetch('/api/burrito/consider', {
method: 'POST',
body: { username: user.value.username },
})
if (response.success && response.user) {
auth.setUser(response.user)
hasConsidered.value = true
// Client-side tracking (in addition to server-side tracking)
$posthog?.capture('burrito_considered', {
total_considerations: response.user.burritoConsiderations,
username: response.user.username,
})
setTimeout(() => {
hasConsidered.value = false
}, 2000)
}
} catch (err) {
console.error('Error considering burrito:', err)
}
}
</script>
pages/index.vue
<template>
<div class="container">
<template v-if="user">
<h1>Welcome back, {{ user.username }}!</h1>
<p>You are now logged in. Feel free to explore:</p>
<ul>
<li>Consider the potential of burritos</li>
<li>View your profile and statistics</li>
</ul>
</template>
<template v-else>
<h1>Welcome to Burrito Consideration App</h1>
<p>Please sign in to begin your burrito journey</p>
<form @submit.prevent="handleSubmit" class="form">
<div class="form-group">
<label for="username">Username:</label>
<input
type="text"
id="username"
v-model="username"
placeholder="Enter any username"
/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input
type="password"
id="password"
v-model="password"
placeholder="Enter any password"
/>
</div>
<p v-if="error" class="error">{{ error }}</p>
<button type="submit" class="btn-primary">Sign In</button>
</form>
<p class="note">
Note: This is a demo app. Use any username and password to sign in.
</p>
</template>
</div>
</template>
<script setup lang="ts">
const auth = useAuth()
const user = computed(() => auth.user.value)
const username = ref('')
const password = ref('')
const error = ref('')
const { $posthog: posthog } = useNuxtApp()
const handleSubmit = async () => {
error.value = ''
const success = await auth.login(username.value, password.value)
if (success) {
// Identifying the user once on login/sign up is enough.
posthog?.identify(username.value)
// Capture login event
posthog?.capture('user_logged_in')
username.value = ''
password.value = ''
} else {
error.value = 'Please provide both username and password'
}
}
</script>
pages/profile.vue
<template>
<div class="container">
<h1>User Profile</h1>
<div class="stats">
<h2>Your Information</h2>
<p><strong>Username:</strong> {{ user?.username }}</p>
<p><strong>Burrito Considerations:</strong> {{ user?.burritoConsiderations }}</p>
</div>
<div style="margin-top: 2rem">
<button @click="triggerTestError" class="btn-primary" style="background-color: #dc3545">
Trigger Test Error (for PostHog)
</button>
</div>
<div style="margin-top: 2rem">
<h3>Your Burrito Journey</h3>
<template v-if="user">
<p v-if="user.burritoConsiderations === 0">
You haven't considered any burritos yet. Visit the Burrito Consideration page to start!
</p>
<p v-else-if="user.burritoConsiderations === 1">
You've considered the burrito potential once. Keep going!
</p>
<p v-else-if="user.burritoConsiderations < 5">
You're getting the hang of burrito consideration!
</p>
<p v-else-if="user.burritoConsiderations < 10">
You're becoming a burrito consideration expert!
</p>
<p v-else>
You are a true burrito consideration master! 🌯
</p>
</template>
</div>
</div>
</template>
<script setup lang="ts">
const auth = useAuth()
const user = computed(() => auth.user.value)
const router = useRouter()
const { $posthog: posthog } = useNuxtApp()
// Redirect to home if not logged in
watchEffect(() => {
if (!user.value) {
router.push('/')
}
})
const triggerTestError = () => {
try {
throw new Error('Test error for PostHog error tracking')
} catch (err) {
console.error('Captured error:', err)
posthog?.captureException(err as Error)
}
}
</script>
plugins/posthog.client.ts
import { defineNuxtPlugin, useRuntimeConfig } from '#imports'
import posthog from 'posthog-js'
import type { PostHog, PostHogInterface } from 'posthog-js'
export default defineNuxtPlugin((nuxtApp) => {
const runtimeConfig = useRuntimeConfig()
const posthogClient = posthog.init(runtimeConfig.public.posthog.publicKey, {
api_host: runtimeConfig.public.posthog.host,
defaults: runtimeConfig.public.posthog.posthogDefaults as any,
loaded: (posthog: PostHogInterface) => {
if (import.meta.env.MODE === 'development') posthog.debug()
},
})
nuxtApp.hook('vue:error', (error) => {
posthogClient.captureException(error)
})
return {
provide: {
posthog: posthogClient as PostHog,
},
}
})
public/robots.txt
User-Agent: *
Disallow:
server/api/auth/login.post.ts
import { getOrCreateUser } from '~/server/utils/users'
import { PostHog } from 'posthog-node'
import { useRuntimeConfig } from '#imports'
import { getHeader } from 'h3'
export default defineEventHandler(async (event) => {
if (event.node.req.method !== 'POST') {
throw createError({
statusCode: 405,
statusMessage: 'Method Not Allowed'
})
}
const body = await readBody(event)
const { username, password } = body
if (!username || !password) {
throw createError({
statusCode: 400,
statusMessage: 'Username and password required'
})
}
// Fake auth - just get or create user
const user = getOrCreateUser(username)
const runtimeConfig = useRuntimeConfig()
// Relies on __add_tracing_headers being set in the client-side SDK
const sessionId = getHeader(event, 'x-posthog-session-id')
const distinctId = getHeader(event, 'x-posthog-distinct-id')
const posthog = new PostHog(
runtimeConfig.public.posthog.publicKey,
{
host: runtimeConfig.public.posthog.host,
}
)
await posthog.withContext(
{ sessionId: sessionId ?? undefined, distinctId: distinctId ?? undefined },
async () => {
posthog.capture({
event: 'server_login',
distinctId: distinctId ?? username,
})
}
)
// Always shutdown to ensure all events are flushed
await posthog.shutdown()
return {
success: true,
user: { ...user }
}
})
server/api/burrito/consider.post.ts
import { users, incrementBurritoConsiderations } from '~/server/utils/users'
import { PostHog } from 'posthog-node'
import { useRuntimeConfig } from '#imports'
import { getHeader } from 'h3'
export default defineEventHandler(async (event) => {
if (event.node.req.method !== 'POST') {
throw createError({
statusCode: 405,
statusMessage: 'Method Not Allowed'
})
}
const body = await readBody(event)
const { username } = body
if (!username) {
throw createError({
statusCode: 400,
statusMessage: 'Username required'
})
}
if (!users.has(username)) {
throw createError({
statusCode: 404,
statusMessage: 'User not found'
})
}
// Increment burrito considerations (fake, in-memory)
const user = incrementBurritoConsiderations(username)
const runtimeConfig = useRuntimeConfig()
// Relies on __add_tracing_headers being set in the client-side SDK
const sessionId = getHeader(event, 'x-posthog-session-id')
const distinctId = getHeader(event, 'x-posthog-distinct-id')
const posthog = new PostHog(
runtimeConfig.public.posthog.publicKey,
{
host: runtimeConfig.public.posthog.host,
}
)
await posthog.withContext(
{ sessionId: sessionId ?? undefined, distinctId: distinctId ?? undefined },
async () => {
posthog.capture({
event: 'burrito_considered',
distinctId: distinctId ?? username,
})
}
)
// Always shutdown to ensure all events are flushed
await posthog.shutdown()
return {
success: true,
user: { ...user }
}
})
server/utils/users.ts
interface User {
username: string
burritoConsiderations: number
}
// Shared in-memory storage for users (fake, no database)
export const users = new Map<string, User>()
export function getOrCreateUser(username: string): User {
let user = users.get(username)
if (!user) {
user = {
username,
burritoConsiderations: 0
}
users.set(username, user)
}
return user
}
export function incrementBurritoConsiderations(username: string): User {
const user = users.get(username)
if (!user) {
throw new Error('User not found')
}
user.burritoConsiderations++
users.set(username, user)
return { ...user }
}
types/nuxt-app.d.ts
import type { PostHog } from 'posthog-js'
declare module '#app' {
interface NuxtApp {
$posthog: PostHog
}
}
export {}
Requirements and compatibility
Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta
“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.
Security
No issues found by our static scan· No issues found
A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.
Attribution and licence
- Created by
- PostHog
- Publisher
- PostHog (Official)
- Source
- PostHog/skills · skills/posthog/integration/skills/nuxt-3.6 · commit a5d30e7
- Licence
- MIT License (redistribution allowed)
- LICENSE (added by AutoGineer from LICENSE)
- ATTRIBUTION.md (written by AutoGineer)
- Synced
- Also distributed in
- PostHog/skills
AutoGineer is not affiliated with or endorsed by PostHog.
Download ZIP
The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download integration-nuxt-3-6.zip