Vue SDK

Single-page-app routing

The browser never does a full page load between routes in an SPA, so Ezoic needs to be told when a new "pageview" begins. The SDK declares SPA mode at boot and requests the new route's ads on each navigation.

What this demonstrates

useEzoicPageView(() => key) watches a value that changes on every route change. In scan mode (no ids option) it pairs with <EzoicAd>: on each change it re-requests whatever the new route rendered, while <EzoicAd>'s own unmount destroys the departing placeholders. The plugin also has a router option that auto-hooks a Vue Router instance the same way. Either path coalesces with the ad bundle's built-in navigation monitor and its own debounce, so a single navigation fires a single ad request — never a double-fire.

View source on GitHub →

SDK docs: README — Single-page apps (SPA routing)

Recommended: pass your router to the plugin

import { createApp } from 'vue';
import { EzoicPlugin } from '@ezoic/vue-sdk';
import { router } from './router';
import App from './App.vue';

createApp(App).use(router).use(EzoicPlugin, { router }).mount('#app');

Router-agnostic core: useEzoicPageView()

import { useRoute } from 'vue-router';
import { useEzoicPageView } from '@ezoic/vue-sdk';

const route = useRoute();
useEzoicPageView(() => route.fullPath);

Live demo

The panel below embeds the SDK's own demo app (built from @ezoic/vue-sdk v1.0.0) — use its "SPA simulated navigation" panel and click Simulate navigation: the current placeholders unmount and a new set mounts, keyed by a virtual page number (there is no real router in the demo, just a bumped ref, matching the router-agnostic scan-mode pattern above). examples.ezoic.com's root domain is not lite-active, so ad requests will not fill here. Open the full demo in a new tab →