Google AdSense
Google AdSense serves Google ads on your site.
Choose the API that matches the placement:
useScriptGoogleAdsense()loads theadsbygooglequeue.<ScriptGoogleAdsense>renders an ad unit.
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 automaticallyPlease 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.
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.
export default defineNuxtConfig({
scripts: {
registry: {
googleAdsense: {
client: 'ca-pub-<your-id>', // AdSense Publisher ID
},
},
},
})
<meta name="google-adsense-account" content="ca-pub-<your-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
- Create a new file:
public/ads.txt - Add the following content:
google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0 - 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.
export default defineNuxtConfig({
scripts: {
registry: {
googleAdsense: {
client: 'ca-pub-<your-id>', // AdSense Publisher ID
autoAds: true, // Enable Auto Ads
},
},
},
})
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-<your-id>",
enable_page_level_ads: true,
});
</script>
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
| Prop | Description |
|---|---|
data-ad-client | Your Google AdSense publisher ID (ca-pub-XXXXXXXXXX). |
data-ad-slot | Your Ad Slot ID (available in AdSense dashboard). |
data-ad-format | Ad format type (auto, rectangle, horizontal, vertical, fluid, autorelaxed). |
data-ad-layout | Layout (in-article, in-feed, fixed). |
data-full-width-responsive | Set 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.
clientstringThe Google Adsense ID.
autoAdsboolean = falseEnable or disable Auto Ads.