Segment
Segment routes events from your site to analytics, marketing, and data warehouse destinations.
Use useScriptSegment() to load Analytics.js and access its tracking methods. Segment's Analytics.js quickstart explains write keys and the page, track, and identify calls exposed by the library.
The client initializer queues one page() call before Analytics.js loads. Avoid sending another page call for the initial route unless you intend to count it twice.
Nuxt Config Setup
Add this to your nuxt.config.ts to load Segment globally. Alternatively you can use the useScriptSegment composable for more control.
export default defineNuxtConfig({
scripts: {
registry: {
segment: {
writeKey: 'YOUR_WRITE_KEY',
trigger: 'onNuxtReady',
}
}
}
})This config automatically enables first-party mode (bundle). See below to customise.
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: 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: {
segment: {
writeKey: 'YOUR_WRITE_KEY',
trigger: 'onNuxtReady',
},
},
},
})Example
Using Segment in a component.
<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>writeKeystring required Your Segment write key.
analyticsKeystring = 'analytics'The global variable name for the analytics instance.