---
title: "Installation"
description: "Add Mixpanel to your Nuxt application."
canonical_url: "https://mixpanel-nuxt.vercel.app/get-started/installation"
---
# Installation

> Add Mixpanel to your Nuxt application.

`mixpanel-nuxt` connects your Nuxt app to the official [Mixpanel](https://mixpanel.com/) browser and Node SDKs. It requires Nuxt 4.6 or later.

## Install the module

<code-group>

```bash [pnpm]
pnpm add -D mixpanel-nuxt
```

```bash [npm]
npm install --save-dev mixpanel-nuxt
```

```bash [yarn]
yarn add --dev mixpanel-nuxt
```

```bash [bun]
bun add --dev mixpanel-nuxt
```

</code-group>

Register the module and set your Mixpanel project token:

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

Both SDKs are included in the package and enabled by default. See [Nitro](https://mixpanel-nuxt.vercel.app/integration/nitro) to configure Nitro events.

## Track an event

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 module auto-imports `useMixpanel()`. You can call the browser SDK's methods on the returned client.

To supply tokens through environment variables or customize the SDK, see [Configuration](https://mixpanel-nuxt.vercel.app/get-started/configuration). To enable automatic page tracking, continue to [Pageviews](https://mixpanel-nuxt.vercel.app/integration/pageviews).


## Sitemap

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