·September 5, 2025
Setting up PostHog for Nuxt
How I set up Posthog for Nuxt frontend + Nitro backend
The PostHog docs are great for setting up for Nuxt. This is how I set it up and includes server-side (Nitro) error tracking (not included in the PostHog setup).
PostHog for frontend
1. Install posthog-js :
[@portabletext/vue] Unknown block type "jsPackageInstall", specify a component for it in the `components.types` prop
2. Add your public PostHog key to your runtimeConfig in nuxt.config.ts
[@portabletext/vue] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
3. Create posthog.client.ts in ~/app/plugins (or ~/plugins in Nuxt 3)
[@portabletext/vue] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
PostHog for backend (Nitro)
1. Install posthog-node
[@portabletext/vue] Unknown block type "jsPackageInstall", specify a component for it in the `components.types` prop
2. Create posthog.ts in ~/server/plugins/posthog.ts
[@portabletext/vue] Unknown block type "codeBlock", specify a component for it in the `components.types` prop
Conclusion
This setup will give you PostHog analytics in the frontend + PostHog error tracking in the backend. Happy coding!