@bannerstudio/vue

Vue 3 / Nuxt component for embedding a Banner Studio banner (CLS-safe iframe).

npm i @bannerstudio/vue

<script setup>
import { BannerStudioEmbed } from '@bannerstudio/vue'
</script>

<template>
  <BannerStudioEmbed
    api-base="https://api.bannerstud.io"
    affiliate="acme"
    type="top"
    :height="90"
  />
</template>

Props

| Prop | Type | Default | Notes | |---|---|---|---| | apiBase | string | — | Banner Studio API base (required). | | affiliate | string | — | Affiliate code (required). | | type | 'top' \| 'bottom' \| 'inline' | 'top' | | | placement | string | — | Optional placement code. | | height | number | 90 | Reserved height (px) — prevents CLS. Set to the banner's canvas height. |

The reserved box renders server-side (SSR-safe), so there's no layout shift; the banner's banner-height/banner-empty/banner-close messages resize, collapse, or hide it. For zero-CLS on SSR, gate rendering on ${apiBase}/embed/meta (active) fetched during SSR — see the API's docs/embed-integration.md.

Controlled vs auto mode

• Controlled — pass server-fetched :meta (+ :html): the banner is decided and inlined server-side (zero-CLS, no flash). Use on runtime SSR/ISR/SWR.
• Auto — pass no meta/html: the component fetches on the client only, so nothing is rendered/baked on the server. Use on prerendered/static pages — a stale banner can't be baked in, and an unpublished campaign never shows (it appears just after hydration once the live meta confirms it's active).

Prerendered route? Use auto mode (pass no meta). Passing SSR meta on a prerendered page is what bakes a stale banner into the static HTML.

Peer dependency: vue@^3.3.