Vue.js

Coming SoonNative Vue.js integration examples (Vue 3 Composition API, <AdSlot> component, Vue Router support) are currently being written and will be published shortly.

What will be covered

Installation via npm
AdSlot.vue component (Composition API)
Initializing AdXensor in main.ts / App.vue
Vue Router — re-filling slots on route change
Nuxt.js (SSR) setup
Environment variable reference (VITE_ADXENSOR_SITE_ID)

In the meantime — CDN snippet

You can use the CDN snippet in any Vue app by adding it to your index.html:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <script async
      src="https://cdn.adxensor.com/tag.js"
      data-ad-client="pub-XXXXXXXX">
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Then place slots directly in your Vue templates:

<!-- src/components/MyPage.vue -->
<template>
  <div>
    <ins
      class="adxensor"
      style="display:block"
      data-ad-slot="header-banner"
      data-ad-format="728x90"
    />

    <main>Your content here.</main>

    <ins
      class="adxensor"
      style="display:block"
      data-ad-slot="in-content"
      data-ad-format="300x250"
    />
  </div>
</template>

With the CDN approach the SDK fills slots once after page load. For SPA route changes, use the npm package (documentation coming soon).

Basic npm usage (preview)

Until the full guide is ready, here is a minimal working pattern:

npm install @adxensor/publisher-sdk

<!-- src/components/AdSlot.vue -->
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';
import { AdXensor } from '@adxensor/publisher-sdk';

const props = defineProps<{
  slot: string;
  format?: string;
}>();

const el = ref<HTMLElement | null>(null);

onMounted(() => {
  if (!el.value) return;
  const adx = AdXensor.getInstance({
    siteId: import.meta.env.VITE_ADXENSOR_SITE_ID,
  });
  adx.init();
  adx.fill(el.value, { format: props.format as any });
});

onUnmounted(() => {
  // Optional: clean up if navigating away
});
</script>

<template>
  <ins
    ref="el"
    class="adxensor"
    style="display:block"
    :data-ad-slot="slot"
    :data-ad-format="format ?? 'auto'"
  />
</template>

<!-- Usage in any page -->
<script setup lang="ts">
import AdSlot from '@/components/AdSlot.vue';
</script>

<template>
  <AdSlot slot="header-banner" format="728x90" />
  <p>Content goes here.</p>
  <AdSlot slot="in-content" format="300x250" />
</template>

Notify me when available

Email support@adxensor.com to be notified when the full Vue.js guide is published.

Getting Started

How AdXensor Works

Integration Guides

Reference

Support

What will be covered

In the meantime — CDN snippet

Basic npm usage (preview)

Notify me when available

​What will be covered

​In the meantime — CDN snippet

​Basic npm usage (preview)

​Notify me when available

What will be covered

In the meantime — CDN snippet

Basic npm usage (preview)

Notify me when available