feat: document new nuxt module

contents/docs/error-tracking/installation/nuxt-3-6.mdx

@@ -0,0 +1,97 @@
+---
+title: Nuxt error tracking installation (3.6 and below)
+showStepsToc: true
+---
+
+import { Steps, Step } from 'components/Docs/Steps'
+
+import CLIUpload from "../_snippets/cli/upload.mdx"
+import CLIAuthenticate from "../_snippets/cli/authenticate.mdx"
+import CLIDownload from "../_snippets/cli/download.mdx"
+import InstallNuxt from "../../integrate/_snippets/install-nuxt.mdx"
+import StepVerifyErrorTracking from "./_snippets/step-verify-error-tracking.mdx"
+import StepUploadSourceMaps from "./_snippets/step-upload-source-maps.tsx"
+
+For older versions of Nuxt, you'll need to manually set up error tracking and sourcemap uploads.
+
+<Steps>
+<Step title="Installing PostHog SDK" subtitle="Your goal in this step: Install the PostHog SDK." badge="required">
+
+<InstallNuxt />
+
+</Step>
+
+<Step checkpoint title="Verify PostHog is initialized" subtitle="Confirm you can capture events with PostHog">
+
+Before proceeding, confirm that you can [capture events](/docs/libraries/nuxt-js#capture-custom-events) using `posthog.capture('test_event')`.
+
+</Step>
+
+<Step title="Manually capturing exceptions" subtitle="Your goal in this step: Manually capture exceptions in your Nuxt application." badge="required">
+
+To send errors directly using the PostHog client, import it and use the `captureException` method like this:
+
+```vue component.vue
+<script>
+  const { $posthog } = useNuxtApp()
+
+  if ($posthog) {
+    const posthog = $posthog()
+    posthog.captureException(new Error("Important error message"))
+  }
+</script>
+```
+
+On the server side, you can use the `posthog` object directly.
+
+```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, 
+    }
+  );
+
+  try {
+    const results = await DB.query.users.findMany()
+    return results
+  } catch (error) {
+    posthog.captureException(error)
+  }
+})
+```
+
+</Step>
+
+<Step title="Configuring exception autocapture" subtitle="Your goal in this step: Enable automatic exception tracking for your Nuxt application." badge="required">
+
+Update your `posthog.client.js` to add an error hook
+
+```js
+export default defineNuxtPlugin((nuxtApp) => {
+    ...
+    nuxtApp.hook('vue:error', (error) => {
+        posthogClient.captureException(error)
+    })
+    ...
+})
+```
+
+</Step>
+
+<StepVerifyErrorTracking />
+
+
+<Step title="Upload source maps" badge="required">
+
+<StepUploadSourceMaps urlPath="nuxt" framework="Nuxt" />
+
+</Step>
+
+</Steps>

contents/docs/error-tracking/installation/nuxt.mdx

@@ -12,22 +12,83 @@ import InstallNuxt from "../../integrate/_snippets/install-nuxt.mdx"
 import StepVerifyErrorTracking from "./_snippets/step-verify-error-tracking.mdx"
 import StepUploadSourceMaps from "./_snippets/step-upload-source-maps.tsx"
 
+For Nuxt 3.7 and above, we recommend using the official `@posthog/nuxt` module which provides automatic error tracking with built-in sourcemap support. 
+
 <Steps>
-<Step title="Installing PostHog Nuxt SDK" subtitle="Your goal in this step: Install the PostHog Nuxt.js SDK." badge="required">
+<Step title="Install the PostHog Nuxt module" subtitle="Your goal in this step: Install and configure the PostHog Nuxt module." badge="required">
 
-<InstallNuxt />
+1. Install the PostHog Nuxt module using your package manager:
 
-</Step>
+<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
+```
 
-<Step checkpoint title="Verify PostHog is initialized" subtitle="Confirm you can capture events with PostHog">
+</MultiLanguage>
+
+2. Add the module to your `nuxt.config.ts` file:
+
+```typescript file=nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@posthog/nuxt'],
+
+  // Enable sourcemaps generation in both vue and nitro
+  sourcemap: { 
+    client: 'hidden' 
+  },
+  nitro: {
+    rollupConfig: {
+      output: {
+        sourcemapExcludeSources: false,
+      },
+    },
+  },
+
+  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: {
+      capture_exceptions: true, // Enables automatic exception capture on the client-side (Vue)
+    },
+    serverConfig: {
+      enableExceptionAutocapture: true, // Enables automatic exception capture on the server-side (Nitro)
+    },
+    sourcemaps: {
+      enabled: true,
+      envId: '<ph_environment_id>', // Your environment ID from PostHog settings https://app.posthog.com/settings/environment#variables
+      personalApiKey: '<ph_personal_api_key>', // Your personal API key from PostHog settings https://app.posthog.com/settings/user-api-keys
+      project: 'my-application', // Optional: defaults to git repository name
+      version: '1.0.0', // Optional: defaults to current git commit
+    },
+  },
+})
+```
 
-Before proceeding, confirm that you can [capture events](/docs/libraries/nuxt-js#capture-custom-events) using `posthog.capture('test_event')`.
+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 sourcemaps during build
 
 </Step>
 
-<Step title="Manually capturing exceptions" subtitle="Your goal in this step: Manually capture exceptions in your Nuxt application." badge="required">
+<Step title="Manually capturing exceptions" subtitle="Your goal in this step: Manually capture exceptions in your Nuxt application." badge="optional">
 
-To send errors directly using the PostHog client, import it and use the `captureException` method like this:
+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 component.vue
 <script>
@@ -40,7 +101,7 @@ To send errors directly using the PostHog client, import it and use the `capture
 </script>
 ```
 
-On the server side, you can use the `posthog` object directly.
+On the server side instantiate PostHog using:
 
 ```js file=server/api/example.js focusOnLines=4-21
 export default defineEventHandler(async (event) => {
@@ -67,29 +128,30 @@ export default defineEventHandler(async (event) => {
 
 </Step>
 
-<Step title="Configuring exception autocapture" subtitle="Your goal in this step: Enable automatic exception tracking for your Nuxt application." badge="required">
+<Step title="Build your project for production" badge="required">
 
-Update your `posthog.client.js` to add an error hook
+Build your project for production by running the following command:
 
-```js
-export default defineNuxtPlugin((nuxtApp) => {
-    ...
-    nuxtApp.hook('vue:error', (error) => {
-        posthogClient.captureException(error)
-    })
-    ...
-})
+```bash
+nuxt build
 ```
 
+The PostHog module will automatically generate and upload sourcemaps to PostHog during the build process.
+
 </Step>
 
-<StepVerifyErrorTracking />
+<Step checkpoint title="Verify source map upload" subtitle="Confirm sourcemaps are being properly uploaded">
 
+Before proceeding, confirm that sourcemaps are being properly uploaded.
 
-<Step title="Upload source maps" badge="required">
+You can verify the injection is successful by checking your `.mjs.map` source map files for `//# chunkId=` comments. Make sure to serve these injected files in production, PostHog will check for the `//# chunkId` comments to display the correct stack traces.
 
-<StepUploadSourceMaps urlPath="nuxt" framework="Nuxt" />
+<CallToAction type="secondary" className="my-2" size="sm" to="https://app.posthog.com/settings/project-error-tracking#error-tracking-symbol-sets" external={true}>
+    Check symbol sets in PostHog
+</CallToAction>
 
 </Step>
 
-</Steps> 
+<StepVerifyErrorTracking />
+
+</Steps>

contents/docs/error-tracking/upload-source-maps/nuxt.mdx

@@ -7,6 +7,16 @@ import CLIDownload from '../_snippets/cli/download.mdx'
 import CLIAuthenticate from '../_snippets/cli/authenticate.mdx'
 import StepVerifySourceMapUpload from './_snippets/step-verify-source-map-upload.mdx'
 
+## Nuxt 3.7 and above
+
+For Nuxt 3.7 and above, the `@posthog/nuxt` module automatically handles sourcemap generation and upload during the build process. 
+
+No manual configuration is needed - follow the [Nuxt error tracking installation guide](/docs/error-tracking/installation/nuxt) to set up the module, and source maps are automatically generated and uploaded when you build your project.
+
+## Nuxt 3.6 and below
+
+For older versions of Nuxt, you'll need to manually configure sourcemap generation and upload using the PostHog CLI.
+
 <Steps>
 <Step title="Install the PostHog CLI" badge="required">
 <CLIDownload />

contents/docs/libraries/nuxt-js-2.mdx

@@ -0,0 +1,97 @@
+---
+title: Nuxt.js (v2.16 and below)
+icon: >-
+  https://res.cloudinary.com/dmukukwp6/image/upload/posthog.com/contents/images/docs/integrate/frameworks/nuxt.svg
+---
+
+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.
+
+These docs are for Nuxt v2.16 and below.
+
+We are going to implement PostHog as a [Nuxt.js integration](https://nuxtjs.org/docs/2.x/directory-structure/plugins) which gives us the possibility to inject
+the `posthog` object and make it available across our application.
+
+## Installation
+
+The first thing you want to do is to install the [posthog-js library](/docs/integrate/client/js) in your project - so add it using your package manager:
+
+import InstallWebPackageManagers from "../integrate/_snippets/install-web-package-managers.mdx"
+
+<InstallWebPackageManagers />
+
+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: '<ph_client_api_host>',
+    defaults: '<ph_posthog_js_defaults>',
+    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`
+
+```js
+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](https://nuxtjs.org/docs/2.x/directory-structure/plugins#inject-in-root--context) 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:
+
+```js-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](/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)
+