X Pixel

View source

Nuxt Config Setup

The simplest way to load X Pixel globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptXPixel composable.

export default defineNuxtConfig({
  scripts: {
    registry: {
      xPixel: {
        id: 'oxxxxxx'
      }
    }
  }
})

useScriptXPixel()

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

const { proxy } = useScriptXPixel()

proxy.twq('event', 'tw-xxxxx-xxxxx')

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: {
      xPixel: { id: 'oxxxxxx'}
    }
  }
})

Example

Using X Pixel only in production while using the proxy to send events.

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

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.twq('event', 'tw-xxxxx-xxxxx')
}
</script>

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