> ## Documentation Index
> Fetch the complete documentation index at: https://docs.adxensor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js

> Integrate AdXensor into your Vue.js app with the CDN snippet today; native Vue 3 components are coming soon.

<Note>
  **Coming Soon**

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

## 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`:

```html theme={null}
<!-- 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:

```vue theme={null}
<!-- 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>
```

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

## Basic npm usage (preview)

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

```bash theme={null}
npm install @adxensor/publisher-sdk
```

```vue theme={null}
<!-- 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>
```

```vue theme={null}
<!-- 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](mailto:support@adxensor.com) to be notified when the full Vue.js guide is published.
