nuxt-amplitude-module

Amplitude module for Nuxt.

Features

• Nuxt 3 support
• Amplitude typescript support
• Works with client-side (@amplitude/analytics-browser) and server-side (@amplitude/analytics-node)
• Available in nitro

Quick Setup

1. Add nuxt-amplitude-module dependency to your project

# Using pnpm
pnpm add -D nuxt-amplitude-module

# Using yarn
yarn add --dev nuxt-amplitude-module

# Using npm
npm install --save-dev nuxt-amplitude-module

2. Add nuxt-amplitude-module to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-amplitude-module'
  ]
})

That's it! You can now use My Module in your Nuxt app ✨

Configuration

You can pass initial amplitude properties in nuxt.config:

export default defineNuxtConfig({
  modules: [
    'nuxt-amplitude-module'
  ],
  amplitude: {
      client: {
          apiKey: 'YOUR_AMPLITUDE_API_KEY',
      },
      server: true
  }
})

client

• Type: boolean | object
• Default: true

true value means that amplitude plugin will only includes in Nuxt and you need to initialize it manually by calling $amplitude.init method (doc)

⚠️ @amplitude/browser is client-side plugin and only available in browser environment after render finished

Object configuration can apply next options:

| | Prop | |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------| | apiKey | API Key of Amplitude | | userId (optional) | Initialize Amplitude instance with user id | | options (optional) | The rest configs you can use simply same to Amplitude-Browser https://www.docs.developers.amplitude.com/data/sdks/typescript-browser/#configuration |

server

• Type: boolean | object
• Default: false

true value means that amplitude plugin will only includes in Nuxt and you need to initialize it manually by calling $amplitude.init method (doc)

⚠️ @amplitude/node is server-side plugin and only available in server environment while ssr or by nitro in server/* folder

Object configuration can apply next options:

| | Prop | |--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------| | apiKey | API Key of Amplitude | | options (optional) | The rest configs you can use simply same to Amplitude-Node https://www.docs.developers.amplitude.com/data/sdks/typescript-node/#configuration |

Usage example

<script setup>
const { $amplitude } = useNuxtApp()

if (process.server) {
  $amplitude.track('SSR setup') // @amplitude/node track
}

if (process.client) {
  $amplitude.track('CSR setup') // @amplitude/browser track
}
</script>

<template>
  <div>
    <button @click="$amplitude.track('click')">Track click</button>
  </div>
</template>

Usage example nitro

export default defineEventHandler(async evt => {
  const { $amplitude } = useNitroApp()
  
  $amplitude.track('server event handle')

  return { ok: true }
})

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release