nuxt-highlight

Nuxt module for Highlight.io with session replay, error monitoring, and logging

12 downloads•1 stars•v0.0.1

arashsheyda

nuxt-highlight

Nuxt module for Highlight.io with session replay, error monitoring, and logging.

✨ Release Notes

Features

🎬 Session replay recording
🐛 Automatic error tracking (client & server)
📊 Network request recording
🔍 Vue error handler integration
🖥️ Server-side error tracking via Nitro plugin
🧩 useHighlight() composable for easy access

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxt module add nuxt-highlight

Then configure it in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-highlight'],
  highlight: {
    projectId: '<YOUR_PROJECT_ID>',
    environment: 'production',
    version: '1.0.0',
  },
})

Get your project ID from app.highlight.io/setup.

Configuration

Option	Type	Default	Description
`projectId`	`string`	`''`	Your Highlight project ID (required)
`environment`	`string`	`'production'`	Environment name
`version`	`string`	`undefined`	Application version
`serviceName`	`string`	`undefined`	Service name for tracing
`enableClientTracking`	`boolean`	`true`	Enable client-side session replay & error tracking
`enableServerTracking`	`boolean`	`true`	Enable server-side error tracking
`clientOptions`	`HighlightOptions`	`undefined`	Additional Highlight SDK options

Client Options

Pass any highlight.run SDK option through clientOptions:

export default defineNuxtConfig({
  highlight: {
    projectId: '<YOUR_PROJECT_ID>',
    clientOptions: {
      networkRecording: {
        enabled: true,
        recordHeadersAndBody: true,
      },
      tracingOrigins: true,
      privacySetting: 'default',
    },
  },
})

Usage

Composable

Use useHighlight() in your components to access the Highlight SDK:

<script setup>
const H = useHighlight()

function onLogin(user) {
  H.identify(user.email, { name: user.name })
}

function onAction() {
  H.track('button_clicked', { page: 'home' })
}
</script>

Via `$highlight`

The Highlight SDK is also available as $highlight on the Nuxt app instance:

<script setup>
const { $highlight } = useNuxtApp()
$highlight.track('page_viewed', { page: 'home' })
</script>

Environment Variables

All config options can be overridden at runtime via NUXT_PUBLIC_HIGHLIGHT_* environment variables:

Env Variable	Config Key
`NUXT_PUBLIC_HIGHLIGHT_PROJECT_ID`	`projectId`
`NUXT_PUBLIC_HIGHLIGHT_ENVIRONMENT`	`environment`
`NUXT_PUBLIC_HIGHLIGHT_VERSION`	`version`
`NUXT_PUBLIC_HIGHLIGHT_SERVICE_NAME`	`serviceName`

This lets you keep secrets out of your nuxt.config.ts and configure per-deployment:

NUXT_PUBLIC_HIGHLIGHT_PROJECT_ID=abc123 nuxt build

Or in your .env file:

NUXT_PUBLIC_HIGHLIGHT_PROJECT_ID=abc123
NUXT_PUBLIC_HIGHLIGHT_ENVIRONMENT=staging

Contribution

Local 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