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 (idle → initiated →
displayed → closed).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 →