---
title: "Browser"
description: "Access the browser SDK in components and plugins, with SSR support."
canonical_url: "https://mixpanel-nuxt.vercel.app/integration/browser"
---
# Browser

> Access the browser SDK in components and plugins, with SSR support.

The module initializes the Mixpanel browser SDK and provides it through `useMixpanel()` and `useNuxtApp().$mixpanel`.

## Accessing the client

Call `useMixpanel()` in component setup and use the returned client in your event handler:

```vue [app/components/DownloadButton.vue]
<script setup lang="ts">
const mixpanel = useMixpanel()

function downloadReport() {
  mixpanel.track('Report downloaded', { format: 'csv' })
}
</script>

<template>
  <button @click="downloadReport">Download report</button>
</template>
```

The returned client exposes the [Mixpanel browser SDK](https://docs.mixpanel.com/docs/tracking-methods/sdks/javascript).

## Nuxt plugins

The module registers a Nuxt plugin named `mixpanel`. Declare `dependsOn: ['mixpanel']` when your plugin accesses the client during setup:

```ts [app/plugins/analytics.client.ts]
export default defineNuxtPlugin({
  dependsOn: ['mixpanel'],
  setup() {
    const mixpanel = useMixpanel()
    mixpanel.register({ app: 'dashboard' })
  },
})
```

Nuxt waits for the `mixpanel` plugin to finish before running this setup function. The client is available through `useMixpanel()` or `useNuxtApp().$mixpanel`.

Registering a `mixpanel:pageview` hook does not require this dependency. See [Pageviews](https://mixpanel-nuxt.vercel.app/integration/pageviews#enriching-pageviews) for hook examples.

## Initialization before the first pageview

With the default Nuxt Router integration, the initial event waits for Nuxt plugin setup, middleware and page setup to finish. Identity and properties set during that work are included on the first pageview.

Identity can be set in a dependent plugin:

```ts [app/plugins/identity.client.ts]
export default defineNuxtPlugin({
  dependsOn: ['mixpanel'],
  async setup() {
    const mixpanel = useMixpanel()
    const user = await $fetch<{ id: string }>('/api/me')
    mixpanel.identify(user.id)
  },
})
```

`/api/me` is an application endpoint that returns the signed-in user's ID.

When `client.pageviewStrategy` is `'native'`, the initial pageview is sent during SDK initialization, before dependent plugins run. See [Pageview strategy](https://mixpanel-nuxt.vercel.app/integration/pageviews#pageview-strategy) for the differences between strategies.

## Server rendering

During SSR, `useMixpanel()` returns an inactive client. Its methods send no events and calls are not queued for the browser. The same behavior applies when `client.enabled` is `false`.

Universal plugins also receive the inactive client during SSR. Use [Nitro](https://mixpanel-nuxt.vercel.app/integration/nitro) for server events.

Keep browser tracking outside `callOnce()` and `useAsyncData()` handlers. These callbacks can execute on the server without running again during hydration, so a browser event placed there can be missed.

## Reading browser state

Browser getters have no value during SSR. For example, `get_distinct_id()` returns `undefined` while the client is inactive. The [composable reference](https://mixpanel-nuxt.vercel.app/api/composables/use-mixpanel#inactive-client) lists read and callback behavior.

<warning>

Feature flags are not evaluated during SSR. Resolve browser-dependent values after mounting; using browser flag values for the initial render can cause a hydration mismatch.

</warning>


## Sitemap

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