Cloudflare Web Analytics

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Cloudflare Web Analytics globally. Alternatively you can use the useScriptCloudflareWebAnalytics composable for more control.

export default defineNuxtConfig({
  scripts: {
    registry: {
      cloudflareWebAnalytics: {
        token: 'a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4',
        trigger: 'onNuxtReady',
      }
    }
  }
})

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

useScriptCloudflareWebAnalytics()

The useScriptCloudflareWebAnalytics composable lets you have fine-grain control over when and how Cloudflare Web Analytics is loaded on your site.

const { proxy } = useScriptCloudflareWebAnalytics()

// automatic page view tracking

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 Cloudflare Web Analytics, works with ad blockers). Learn more.

export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      cloudflareWebAnalytics: {
        token: 'a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Cloudflare Web Analytics in a component with the proxy to send events .

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

// noop in development, ssr
// just works in production, client
function handleAction() {
  // automatic page view tracking
}
</script>

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