BUZER
Skip to main content
Integration time3 minutes

How to Add Ads to Vue.js with Buzer (2026 Guide)

Vue.js is a progressive JavaScript framework loved for its simplicity and flexibility. Buzer provides a clean integration for Vue 3 apps using composables and template refs. Whether you are using Vue with Vite, Nuxt, or a CDN build, adding Buzer ads takes just a few minutes.

Step-by-Step Integration

1

Sign up for Buzer

Create your publisher account at buzer.xyz. Authenticate with Face ID or Touch ID for instant access.

2

Add the Buzer script to your index.html

Add the Buzer script to your index.html (Vite) or nuxt.config.ts (Nuxt). The script loads asynchronously and does not block your app.

html
<!-- In index.html for Vite-based Vue projects -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script async src="https://cdn.buzer.xyz/x402-ad.js"></script>
</body>
</html>
3

Create a BuzerAd component

Create a Vue 3 component using the Composition API. The onMounted hook ensures the ad is refreshed after the DOM element is available.

html
<script setup lang="ts">
import { ref, onMounted } from 'vue';

defineProps<{ size?: string }>();

const adRef = ref<HTMLDivElement | null>(null);

declare global {
  interface Window {
    buzer?: { refresh: (el: HTMLElement) => void };
  }
}

onMounted(() => {
  if (window.buzer && adRef.value) {
    window.buzer.refresh(adRef.value);
  }
});
</script>

<template>
  <div
    ref="adRef"
    data-buzer-ad
    :data-size="size || '300x250'"
    style="display: flex; justify-content: center"
  />
</template>
4

Use the component in your pages

Import and use BuzerAd in any Vue component or page. Pass the size as a prop.

html
<script setup>
import BuzerAd from '@/components/BuzerAd.vue';
</script>

<template>
  <article>
    <h1>My Blog Post</h1>
    <p>Introduction paragraph...</p>
    <BuzerAd size="728x90" />
    <p>More content...</p>
    <aside>
      <BuzerAd size="300x250" />
    </aside>
  </article>
</template>

Vue.js and Buzer: A Natural Fit

Vue's reactivity system and component model make ad integration elegant. The BuzerAd component is a simple, reusable building block that fits naturally into Vue's template syntax.

Unlike jQuery-based ad solutions that manipulate the DOM imperatively, Buzer works with Vue's declarative approach. You define where ads go in your template, and Buzer handles the rest.

With 85% revenue share and daily USDC payments, Vue developers can monetize their apps, blogs, and content sites with a solution that respects their framework's philosophy.

Nuxt.js Integration

For Nuxt.js projects, add the Buzer script to your nuxt.config.ts under the app.head.script array. Use the async attribute and place it in the body. The BuzerAd component works the same way in Nuxt pages and layouts.

If using Nuxt with SSR, the ad container div is rendered on the server and hydrated client-side. The Buzer script detects the container after hydration and fills it with an ad.

For Nuxt Content (Markdown-based content), you can register BuzerAd as a global component and use it directly in your Markdown files with the Vue component syntax.

Frequently Asked Questions

Does Buzer work with Vue Router?+
Yes. The Buzer script uses MutationObserver to detect new ad containers. When Vue Router navigates to a new page and the BuzerAd component mounts, the ad is detected and filled automatically.
Can I use Buzer with Nuxt.js?+
Yes. Add the script in nuxt.config.ts under app.head.script: [{ src: "https://cdn.buzer.xyz/x402-ad.js", async: true, tagPosition: "bodyClose" }]. The BuzerAd component works identically in Nuxt pages.
Does Buzer support Vue 2?+
Yes. For Vue 2, use the Options API instead of the Composition API. The template markup (data-buzer-ad, data-size) is the same. Use the mounted lifecycle hook instead of onMounted.

Related Resources

Add Ads to React

Monetize your React app with Buzer ads. Earn 85% revenue share with instant USDC payments. Simple component-based integration for any React project.

Add Ads to Svelte

Add Buzer ads to your Svelte or SvelteKit app. 85% revenue share with daily USDC payments. Lightweight integration that matches Svelte's philosophy.

Add Ads to Angular

Integrate Buzer ads into your Angular application. Earn 85% revenue share with instant USDC payments. Directive-based integration for Angular 17+.

Start earning 85% revenue share

Join Buzer and keep more of what you earn. No minimum traffic requirements. Instant payments in USDC.

Start EarningAdvertise With Us