Snapchat Pixel

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Snapchat Pixel globally. Alternatively you can use the useScriptSnapchatPixel composable for more control.

export default defineNuxtConfig({
  scripts: {
    registry: {
      snapchatPixel: {
        id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (bundle + proxy). See below to customise.

useScriptSnapchatPixel()

The useScriptSnapchatPixel composable lets you have fine-grain control over when and how Snapchat Pixel is loaded on your site.

const { proxy } = useScriptSnapchatPixel()

proxy.snaptr('track', 'PURCHASE', { price: 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 from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Snapchat Pixel, works with ad blockers). Learn more.

export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      snapchatPixel: {
        id: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Snapchat Pixel in a component with the proxy to send events .

<script setup lang="ts">
const { proxy } = useScriptSnapchatPixel()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.snaptr('track', 'PURCHASE', { price: 1, currency: 'USD' })
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>