Google AdSense allows you to monetize your website by displaying relevant ads from Google.
Nuxt Scripts provides:
useScriptGoogleAdsense
: A composable to manage Google AdSense dynamically.<ScriptGoogleAdsense>
: A headless component to embed ads directly in your Nuxt app.You can configure Google AdSense globally in your nuxt.config.ts
so that the script is automatically loaded on all pages.
export default defineNuxtConfig({
scripts: {
registry: {
googleAdsense: {
client: "ca-pub-<your-id>", // Your Google AdSense Publisher ID
autoAds: true, // Enable Auto Ads
},
},
},
});
<your-id>
(Publisher ID)Your Google AdSense Publisher ID (also known as ca-pub-XXXXXXX
) can be found in your Google AdSense Account:
<your-id>
in the config above with your actual ID.If a client
is provided, a meta tag will be inserted on the page automatically for Google to verify your site ownership.
export default defineNuxtConfig({
scripts: {
registry: {
googleAdsense: {
client: "ca-pub-<your-id>", // AdSense Publisher ID
},
},
},
});
ads.txt
for VerificationGoogle recommends adding an ads.txt
file for ad revenue eligibility.
public/ads.txt
google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
<your-id>
with your AdSense Publisher ID.ads.txt
? It helps prevent ad fraud and ensures that only your site can display your ads.Auto Ads allow Google to automatically place ads for better optimization.
export default defineNuxtConfig({
scripts: {
registry: {
googleAdsense: {
client: "ca-pub-<your-id>", // AdSense Publisher ID
autoAds: true, // Enable Auto Ads
},
},
},
});
ScriptGoogleAdsense
ComponentIt provides a simple way to embed ads in your Nuxt app.
<template>
<ScriptGoogleAdsense
data-ad-client="ca-pub-<your-id>"
data-ad-slot="1234567890"
data-ad-format="auto"
/>
</template>
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. |
data-ad-layout
To specify a layout for your ads (such as "in-article"), you can use the data-ad-layout
attribute:
<template>
<ScriptGoogleAdsense
data-ad-client="ca-pub-<your-id>"
data-ad-slot="1234567890"
data-ad-format="fluid"
data-ad-layout="in-article"
/>
</template>
If a user has an ad-blocker enabled, you can show fallback content.
<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>
useScriptGoogleAdsense
ComposableThe useScriptGoogleAdsense
composable allows fine-grain control over the AdSense script.
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(
_options?: GoogleAdsenseInput
) {}
See the Registry Scripts Guide for advanced usage.
This interface defines the structure of the Google Adsense API for better TypeScript support.
export interface GoogleAdsenseApi {
adsbygoogle: any[] & { loaded: boolean };
}
You can define the input options for the useScriptGoogleAdsense
composable using the following structure:
export const GoogleAdsenseOptions = object({
/**
* The Google Adsense Publisher ID.
*/
client: optional(string()),
/**
* Enable or disable Auto Ads.
*/
autoAds: optional(boolean()),
});