Segment
Segment lets you collect, clean, and control your customer data. Segment helps you to understand your customers and personalize their experience.
Nuxt Scripts provides a registry script composable useScriptSegment() to easily integrate Segment in your Nuxt app.
Script Stats
Nuxt Config Setup
The simplest way to load Segment globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptSegment composable.
export default defineNuxtConfig({
scripts: {
registry: {
segment: {
writeKey: 'YOUR_WRITE_KEY'
}
}
}
})useScriptSegment
The useScriptSegment composable lets you have fine-grain control over when and how Segment is loaded on your site.
const { proxy } = useScriptSegment()
proxy.track('conversion', { value: 1, currency: 'USD' })Please follow the Registry Scripts guide to learn more about advanced usage.
First-Party Mode
This script supports First-Party Mode which routes all traffic through your domain for improved privacy and ad blocker bypass.
export default defineNuxtConfig({
scripts: {
firstParty: true,
registry: {
segment: { writeKey: 'YOUR_WRITE_KEY'}
}
}
})To opt-out for this specific script:
useScriptSegment({
writeKey: 'YOUR_WRITE_KEY',
scriptOptions: {
firstParty: false
}
})Example
Using Segment only in production while using the proxy to send events.
<script setup lang="ts">
const { proxy } = useScriptSegment()
// noop in development, ssr
// just works in production, client
function handleAction() {
proxy.track('conversion', { value: 1, currency: 'USD' })
}
</script>
<template>
<div>
<button @click="handleAction">
Send Event
</button>
</div>
</template>SegmentApi
interface SegmentApi {
track: (event: string, properties?: Record<string, any>) => void
page: (name?: string, properties?: Record<string, any>) => void
identify: (userId: string, traits?: Record<string, any>, options?: Record<string, any>) => void
group: (groupId: string, traits?: Record<string, any>, options?: Record<string, any>) => void
alias: (userId: string, previousId: string, options?: Record<string, any>) => void
reset: () => void
}
Config Schema
You must provide the options when setting up the script for the first time.
export const SegmentOptions = object({
writeKey: string(),
analyticsKey: optional(string()),
})