Vue SDK

Rewarded ads composable

A visitor opts in to watch an ad in exchange for a reward — unlocked content, in-game currency, and so on. useEzoicRewarded() wraps window.ezRewardedAds in typed, promise-based calls.

What this demonstrates

On an Ezoic JS-integrated page — one the SDK bootstraps with EzoicPlugin — rewarded ads need no loader URL. useEzoicRewarded() calls ezstandalone.initRewardedAds(...) on mount and the Ezoic runtime serves the host-correct rewarded loader itself. An optional placements option scopes which site-wide formats (anchor, interstitial, video, side rails) are enabled. A loader URL (useEzoicRewarded({ loaderUrl }) or the plugin's rewardedLoaderUrl) remains only as an escape hatch for pages not JS-integrated through this SDK. Every callback-style method (request, show, requestAndShow, requestWithOverlay, contentLocker) returns a Promise that settles for every outcome, including no-fill and cancellation, and a reactive status tracks the lifecycle (idleinitiateddisplayedclosed).

View source on GitHub →

SDK docs: README — Rewarded ads

Component usage
<script setup lang="ts">
import { useEzoicRewarded } from '@ezoic/vue-sdk';

const { requestAndShow, status, ready } = useEzoicRewarded();

async function unlock() {
  const r = await requestAndShow({ rewardName: 'premium_article' });
  if (r.reward) {
    // grant the reward — the visitor watched the ad
  }
}
</script>

<template>
  <button :disabled="!ready" @click="unlock">Watch an ad to unlock</button>
  <p>Rewarded status: {{ status }}</p>
</template>

Live demo

The panel below embeds the SDK's own demo app (built from @ezoic/vue-sdk v1.0.0) — use its "Rewarded ads" panel. It runs in default (runtime-served) mode with no loader URL: useEzoicRewarded() calls initRewardedAds(...) and, on a page with live Ezoic demand, the runtime serves the rewarded loader and flips ready to true. On examples.ezoic.com (no live demand) the request may stay pending — that is the expected outcome here, not a bug. Open the full demo in a new tab →