---
title: "Configuration"
description: "Set tokens and SDK options for the browser and server."
canonical_url: "https://mixpanel-nuxt.vercel.app/get-started/configuration"
---
# Configuration

> Set tokens and SDK options for the browser and server.

Configure the module under the `mixpanel` key in `nuxt.config.ts`. Browser settings live under `client`; Nitro settings live under `server`.

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['mixpanel-nuxt'],
  mixpanel: {
    client: {
      token: 'your-project-token',
      config: {
        track_pageview: 'url-with-path',
      },
    },
  },
})
```

This records browser pageviews when the path changes. Browser and server tracking are enabled by default. See [Nitro](https://mixpanel-nuxt.vercel.app/integration/nitro) to send events from Nitro.

## Project tokens

Set `client.token` for the browser and `server.token` for Nitro. Each client uses its own token; an omitted token is never taken from the other client.

You can also supply tokens through environment variables:

```bash [Environment variables]
NUXT_PUBLIC_MIXPANEL_CLIENT_TOKEN=your-project-token
NUXT_MIXPANEL_SERVER_TOKEN=your-server-token
```

The module declares the runtime config keys these variables override. You do not need to declare them again in `runtimeConfig`.

Browser settings are part of public runtime config. Server settings remain private.

## SDK options

Pass [browser SDK options](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript) through `client.config` and [Node SDK options](https://docs.mixpanel.com/docs/tracking-methods/sdks/nodejs) through `server.config`:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['mixpanel-nuxt'],
  mixpanel: {
    client: {
      token: 'your-project-token',
      config: {
        track_pageview: 'url-with-path',
        autocapture: false,
      },
    },
    server: {
      token: 'your-server-token',
      config: {
        geolocate: false,
        debug: true,
      },
    },
  },
})
```

<note>

`server.config.debug: true` uses the module's `mixpanel-nuxt` logger unless you supply a custom SDK logger. Use a [server configuration file](#configuration-files) for a custom logger.

</note>

The module leaves pageviews, autocapture and session recording disabled unless you enable them through the SDK options.

Inline `config` values must be JSON-compatible. Use a configuration file for functions, regular expressions or other values that cannot be serialized.

## Configuration files

Create `mixpanel.client.config.ts` or `mixpanel.server.config.ts` in the Nuxt project root. The module discovers these files automatically.

```ts [mixpanel.client.config.ts]
import { defineMixpanelClientConfig } from 'mixpanel-nuxt/config'

export default defineMixpanelClientConfig({
  track_pageview: 'url-with-path',
  record_block_class: /private/,
  loaded() {
    console.info('Mixpanel initialized')
  },
})
```

Keep the token in `nuxt.config.ts` or an environment variable. The file contains the SDK options for that client:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['mixpanel-nuxt'],
  mixpanel: {
    client: {
      token: 'your-project-token',
    },
  },
})
```

For Nitro, use the server helper:

```ts [mixpanel.server.config.ts]
import { defineMixpanelServerConfig } from 'mixpanel-nuxt/config'

export default defineMixpanelServerConfig({
  geolocate: false,
  debug: true,
})
```

The helpers [defineMixpanelClientConfig](https://mixpanel-nuxt.vercel.app/api/utils/define-mixpanel-client-config) and [defineMixpanelServerConfig](https://mixpanel-nuxt.vercel.app/api/utils/define-mixpanel-server-config) provide SDK types without initializing either client. Export a plain object from each file.

Use `configFile` for a different location. Paths are relative to the Nuxt project root:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['mixpanel-nuxt'],
  mixpanel: {
    client: {
      token: 'your-project-token',
      configFile: './config/analytics.client.ts',
    },
  },
})
```

<warning>

Choose inline `config` or a file for each client. They cannot be combined, including files discovered automatically and inline options supplied through runtime config.

</warning>

## Runtime overrides

Nuxt runtime config can override the module options. Explicit runtime config values take precedence over module defaults.

For example, disable browser tracking through public runtime config:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: ['mixpanel-nuxt'],
  runtimeConfig: {
    public: {
      mixpanel: {
        client: {
          enabled: false,
        },
      },
    },
  },
})
```

Tokens and other runtime settings can change between deployments. Configuration file paths are resolved at build time.

See [Module options](https://mixpanel-nuxt.vercel.app/api/options#runtime-config) for the complete mapping of options, runtime keys and environment variables.


## Sitemap

See the full [sitemap](https://mixpanel-nuxt.vercel.app/sitemap.md) for all pages.