# Nuxt web analytics installation - Docs

1.  1

    ## Install the package

    Required

    Install the PostHog JavaScript library using your package manager:

    PostHog AI

    ### npm

    ```bash
    npm install posthog-js
    ```

    ### yarn

    ```bash
    yarn add posthog-js
    ```

    ### pnpm

    ```bash
    pnpm add posthog-js
    ```

    **Nuxt version**

    This guide is for Nuxt v3.0 and above. For Nuxt v2.16 and below, see our [Nuxt docs](/docs/libraries/nuxt-js.md#nuxt-v216-and-below).

2.  2

    ## Add environment variables

    Required

    Add your PostHog project token and host to your `nuxt.config.js` file:

    nuxt.config.js

    PostHog AI

    ```javascript
    export default defineNuxtConfig({
      runtimeConfig: {
        public: {
          posthogPublicKey: '<ph_project_token>',
          posthogHost: 'https://us.i.posthog.com',
          posthogDefaults: '2026-01-30'
        }
      }
    })
    ```

3.  3

    ## Create a plugin

    Required

    Create a new plugin by creating a new file `posthog.client.js` in your plugins directory:

    plugins/posthog.client.js

    PostHog AI

    ```javascript
    import { defineNuxtPlugin } from '#app'
    import posthog from 'posthog-js'
    export default defineNuxtPlugin(nuxtApp => {
      const runtimeConfig = useRuntimeConfig();
      const posthogClient = posthog.init(runtimeConfig.public.posthogPublicKey, {
        api_host: runtimeConfig.public.posthogHost,
        defaults: runtimeConfig.public.posthogDefaults,
        loaded: (posthog) => {
          if (import.meta.env.MODE === 'development') posthog.debug();
        }
      })
      return {
        provide: {
          posthog: () => posthogClient
        }
      }
    })
    ```

4.  4

    ## Server-side setup

    Optional

    To capture events from server routes, install `posthog-node` and instantiate it directly. You can also use it to evaluate feature flags on the server:

    PostHog AI

    ### npm

    ```bash
    npm install posthog-node
    ```

    ### yarn

    ```bash
    yarn add posthog-node
    ```

    ### pnpm

    ```bash
    pnpm add posthog-node
    ```

    server/api/example.js

    PostHog AI

    ```javascript
    import { PostHog } from 'posthog-node'
    export default defineEventHandler(async (event) => {
        const runtimeConfig = useRuntimeConfig()
        const posthog = new PostHog(
            runtimeConfig.public.posthogPublicKey,
            { host: runtimeConfig.public.posthogHost }
        )
        posthog.capture({
            distinctId: 'distinct_id_of_the_user',
            event: 'event_name'
        })
        await posthog.shutdown()
    })
    ```

5.  5

    ## Send events

    Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

    If you'd like, you can also manually capture custom events:

    JavaScript

    PostHog AI

    ```javascript
    posthog.capture('my_custom_event', { property: 'value' })
    ```

6.  6

    ## Next steps

    Recommended

    After installing PostHog and ensuring [autocapture](/docs/data/autocapture.md) is enabled, head to your [web analytics dashboard](/docs/web-analytics/dashboard.md) to see your data. And then check out our [getting started](/docs/web-analytics/getting-started.md) guide.

    > **PostHog tip:** Web analytics works with [anonymous events](/docs/data/anonymous-vs-identified-events.md). This means if you are primarily using PostHog for web analytics, it can be significantly cheaper for you.

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better