mixpanel-nuxt

Mixpanel integration for Nuxt.

Track browser and server events with the official Mixpanel SDKs.

Highlights

• 🖱️ Browser events. Access the browser SDK through useMixpanel().
• 🖥️ Nitro events. Use the Node SDK in server routes, plugins and utilities.
• 🔄 SSR support. Browser tracking stays inactive during SSR and initializes in the browser.
• 🧭 Vue Router integration. Record pageviews automatically as users navigate.
• 📄 Page meta. Set custom properties or disable tracking for individual pages.
• 🪝 Runtime hooks. Enrich pageviews with async data or skip them before they are sent.

Documentation

The full documentation includes setup, integrations and API references.

• Configuration
• Pageviews
• Nitro

Install

pnpm add -D mixpanel-nuxt

npm / yarn / bun

npm install --save-dev mixpanel-nuxt
yarn add --dev mixpanel-nuxt
bun add --dev mixpanel-nuxt

Requires Nuxt 4.6 or later.

Usage

Register the module and set your project token:

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

Track an event with useMixpanel():

<script setup lang="ts">
const mixpanel = useMixpanel()

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

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

License

MIT