Mixpanel
Mixpanel 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() to easily integrate Mixpanel in your Nuxt app.
Nuxt Config Setup
Add this to your nuxt.config.ts to load Mixpanel globally. Alternatively you can use the useScriptMixpanelAnalytics composable for more control.
export default defineNuxtConfig({
scripts: {
registry: {
mixpanelAnalytics: {
token: 'YOUR_TOKEN',
trigger: 'onNuxtReady',
}
}
}
})This config automatically enables first-party mode (bundle). See below to customise.
useScriptMixpanelAnalytics()
The useScriptMixpanelAnalytics composable lets you have fine-grain control over when and how Mixpanel is loaded on your site.
const { proxy } = useScriptMixpanelAnalytics()
proxy.mixpanel.track('conversion', { value: 1 })Please follow the Registry Scripts guide to learn more about advanced usage.
First-Party Mode: Privacy Focused Proxy
No extra config needed. The script is bundled and served from your domain instead of a third-party CDN, eliminating an extra DNS lookup and improving load times. Learn more.
export default defineNuxtConfig({
scripts: {
// ✅ First-party mode: bundled
registry: {
mixpanelAnalytics: {
token: 'YOUR_TOKEN',
trigger: 'onNuxtReady',
},
},
},
})Example
Using Mixpanel in a component.
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
// noop in development, ssr
// just works in production, client
function handleAction() {
proxy.mixpanel.track('conversion', { value: 1 })
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>tokenstring required Your Mixpanel project token.
Examples
Tracking Events
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
function trackSignup() {
proxy.mixpanel.track('Sign Up', {
plan: 'premium',
source: 'landing_page',
})
}
</script>
Identifying Users
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
function login(userId: string) {
proxy.mixpanel.identify(userId)
proxy.mixpanel.people.set({
$name: 'Jane Doe',
$email: '[email protected]',
plan: 'premium',
})
}
</script>
Registering Super Properties
Mixpanel sends super properties with every subsequent event:
<script setup lang="ts">
const { proxy } = useScriptMixpanelAnalytics()
proxy.mixpanel.register({
app_version: '2.0.0',
platform: 'web',
})
</script>