Nuxt 3 7

1. 1

   Install the PostHog Nuxt module

   Required

   Install the PostHog Nuxt module using your package manager:

   npm

   bashCopy

   npm install @posthog/nuxt

   yarn

   bashCopy

   yarn add @posthog/nuxt

   pnpm

   bashCopy

   pnpm add @posthog/nuxt

   bun

   bashCopy

   bun add @posthog/nuxt

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

   nuxt.config.ts

   typescriptCopy

   export default defineNuxtConfig({
     modules: ['@posthog/nuxt'],
     // Enable source maps generation in both vue and nitro
     sourcemap: {
       client: 'hidden'
     },
     nitro: {
       rollupConfig: {
         output: {
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Personal API key

   Your personal API key will require organization:read and error_tracking:write scopes.

   The module will automatically:

   • Initialize PostHog on both Vue (client side) and Nitro (server side)
   • Capture exceptions on both client and server
   • Generate and upload source maps during build

2. 2

   Manually capturing exceptions

   Optional

   Our module if set up as shown above already captures both client and server side exceptions automatically.

   To send errors manually on the client side, import it and use the captureException method like this:

   Vue

   htmlCopy

   <script>
     const { $posthog } = useNuxtApp()
     if ($posthog) {
       const posthog = $posthog()
       posthog.captureException
   
   

3. 3

   Build your project for production

   Required

   Build your project for production by running the following command:

   Terminal

   bashCopy

   nuxt build

   The PostHog module will automatically generate and upload source maps to PostHog during the build process.

4. Verify error tracking

   Recommended

   Confirm events are being sent to PostHog

   Before proceeding, let’s make sure exception events are being captured and sent to PostHog. You should see events appear in the activity feed.

   

   Check for exceptions in PostHog (opens in a new tab)

5. 4

   Upload source maps

   Required

   Great, you’re capturing exceptions! If you serve minified bundles, the next step is to upload source maps to generate accurate stack traces.

   Let’s continue to the next section.

   Upload source maps (opens in a new tab)

Still have questions?

Ask PostHog AI

Was this page useful?

HelpfulCould be better

On the server side instantiate PostHog using:

server/api/example.js