Skip to main content
Scripts

Google AdSense

Google AdSense serves Google ads on your site.

Choose the API that matches the placement:

Google Adsense

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Google Adsense globally. Alternatively you can use the useScriptGoogleAdsense composable for more control.

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-1234567890123456',
        trigger: 'onNuxtReady',
      }
    }
  }
})

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

useScriptGoogleAdsense()

The useScriptGoogleAdsense composable lets you have fine-grain control over when and how Google Adsense is loaded on your site.

const { proxy } = useScriptGoogleAdsense()

// ad slots render automatically

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 Google Adsense, works with ad blockers). Learn more.

Mode
Bundle Proxy
Privacy
IP, language, and hardware fingerprints are anonymised. Screen dimensions pass through so heatmaps render accurately.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      googleAdsense: {
        client: 'ca-pub-1234567890123456',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Google Adsense in a component with the proxy to send events .

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

// noop in development, ssr
// just works in production, client
function handleAction() {
  // ad slots render automatically
}
</script>

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

Where to find <your-id> (publisher ID)

Find your Google AdSense publisher ID under Account > Settings > Account information. It appears as pub-… in your account and as ca-pub-… in ad code. Replace <your-id> below with that value.

Manage ad types and placements from the Auto ads settings in your AdSense dashboard.

Site ownership verification

Automatic meta tag insertion

If you provide a client, Nuxt automatically inserts a meta tag on the page for Google to verify your site ownership.

nuxt.config.ts
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-<your-id>', // AdSense Publisher ID
      },
    },
  },
})

Adding ads.txt

Google recommends adding an ads.txt file to identify the advertising systems authorized to sell your inventory and reduce counterfeit inventory.

Steps

  1. Create a new file: public/ads.txt
  2. Add the following content:
    google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
    
  3. Replace <your-id> with your AdSense Publisher ID.

An ads.txt file does not replace AdSense's site review. After publishing it, check the file's status in your AdSense dashboard.

Enabling Auto ads

Auto ads let Google choose placements based on the page's layout, content, and existing ads. You can still control formats and exclude pages or areas in AdSense.

nuxt.config.ts
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: 'ca-pub-<your-id>', // AdSense Publisher ID
        autoAds: true, // Enable Auto Ads
      },
    },
  },
})

Using the <ScriptGoogleAdsense> component

<ScriptGoogleAdsense> renders one ad unit:

<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-<your-id>"
    data-ad-slot="1234567890"
    data-ad-format="auto"
  />
</template>

Component Props

PropDescription
data-ad-clientYour Google AdSense publisher ID (ca-pub-XXXXXXXXXX).
data-ad-slotYour Ad Slot ID (available in AdSense dashboard).
data-ad-formatAd format type (auto, rectangle, horizontal, vertical, fluid, autorelaxed).
data-ad-layoutLayout (in-article, in-feed, fixed).
data-full-width-responsiveSet to true to make the ad responsive.

Example using data-ad-layout

Set data-ad-layout for layouts such as in-article:

<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-<your-id>"
    data-ad-slot="1234567890"
    data-ad-format="fluid"
    data-ad-layout="in-article"
  />
</template>

Handling ad blockers

Use the error slot for visitors whose ad blocker stops the script:

<template>
  <ScriptGoogleAdsense data-ad-client="ca-pub-..." data-ad-slot="...">
    <template #error>
      <!-- Fallback content -->
      <p>Please support us by disabling your ad blocker.</p>
    </template>
  </ScriptGoogleAdsense>
</template>

Using the useScriptGoogleAdsense() composable

Use useScriptGoogleAdsense() when you need the adsbygoogle queue without an ad-unit component.

export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(
  _options?: GoogleAdsenseInput
) {}

See the Registry Scripts guide for trigger and loading options.

See the official Google AdSense guide.

clientstring

The Google Adsense ID.

autoAdsboolean = false

Enable or disable Auto Ads.