---
title: "Mixpanel"
description: "Use Mixpanel in your Nuxt app."
canonical_url: "https://scripts.nuxt.com/scripts/mixpanel-analytics"
last_updated: "2026-05-03T02:50:03.672Z"
---

[Mixpanel](https://mixpanel.com) is a product analytics platform that helps you understand how users interact with your application through event tracking, funnels, and retention analysis.

Nuxt Scripts provides a registry script composable [`useScriptMixpanelAnalytics()`](/scripts/mixpanel-analytics) to easily integrate Mixpanel in your Nuxt app.

<script-stats>



</script-stats>

<script-docs>



</script-docs>

<script-types>



</script-types>

## Examples

### Tracking Events

```vue
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()

function trackSignup() {
  proxy.mixpanel.track('Sign Up', {
    plan: 'premium',
    source: 'landing_page',
  })
}
</script>
```

### Identifying Users

```vue
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()

function login(userId: string) {
  proxy.mixpanel.identify(userId)
  proxy.mixpanel.people.set({
    $name: 'Jane Doe',
    $email: 'jane@example.com',
    plan: 'premium',
  })
}
</script>
```

### Registering Super Properties

Mixpanel sends super properties with every subsequent event:

```vue
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()

proxy.mixpanel.register({
  app_version: '2.0.0',
  platform: 'web',
})
</script>
```

## Consent Mode

Mixpanel exposes [`opt_in_tracking` / `opt_out_tracking`](https://docs.mixpanel.com/docs/privacy/opt-out-of-tracking). Set the boot-time default with `defaultConsent` and call `consent.optIn()` / `consent.optOut()` at runtime.

### `defaultConsent`

<table>
<thead>
  <tr>
    <th>
      Value
    </th>
    
    <th>
      Behaviour
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        'opt-in'
      </code>
    </td>
    
    <td>
      Starts opted in.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        'opt-out'
      </code>
    </td>
    
    <td>
      Calls <code className="language-ts shiki shiki-themes github-light github-light material-theme-palenight" language="ts" style="">
        <span class="sqjlB">
          mixpanel
        </span>
        
        <span class="sx-uw">
          .
        </span>
        
        <span class="s0YkB">
          init
        </span>
        
        <span class="sqjlB">
          (
        </span>
        
        <span class="sc1V3">
          ...
        </span>
        
        <span class="sx-uw">
          ,
        </span>
        
        <span class="sx-uw">
          {
        </span>
        
        <span class="sqVJQ">
          opt_out_tracking_by_default
        </span>
        
        <span class="sx-uw">
          :
        </span>
        
        <span class="sGFTI">
          true
        </span>
        
        <span class="sx-uw">
          }
        </span>
        
        <span class="sqjlB">
          )
        </span>
      </code>
      
       so the SDK boots opted out.
    </td>
  </tr>
</tbody>
</table>

<callout icon="i-heroicons-information-circle">

Use `defaultConsent: 'opt-out'` when you need the SDK to boot opted out. The runtime `consent.optOut()` calls `opt_out_tracking()` **after** init, which is weaker than the boot-time flag; any events captured between init and the opt-out call are still sent.

</callout>

### Example

```vue
<script setup lang="ts">
const { consent } = useScriptMixpanelAnalytics({
  token: 'YOUR_TOKEN',
  defaultConsent: 'opt-out',
})

function onAccept() {
  consent.optIn()
}
function onRevoke() {
  consent.optOut()
}
</script>
```