Documentation

Install with Nuxt 4

Add the SpryUI Nuxt module to fetch and render banners on the server, then handle clicks and dismissals in the browser.

1. Install the packages

Complete project setup, then run:

Snippetbash

npm install @spryui/nuxt@latest @spryui/sdk@latest

2. Add the module

In nuxt.config.ts, add your project’s public key:

Snippetts

export default defineNuxtConfig({
  modules: ["@spryui/nuxt"],
  spryui: {
    publicKey: "{YOUR_PROJECT_PUBLIC_KEY}",
  },
});

3. Add banner slots

Place these components around your page in app.vue or your shared layout:

Snippetvue

<template>
  <SpryUiBanners position="top" />
  <NuxtPage />
  <SpryUiBanners position="bottom" />
</template>

Enable a banner in the dashboard and load your site. Do not also add the hosted script.

Deployment

This integration needs server rendering. Do not prerender or share-cache pages containing visitor-specific banners: targeting and delivery state must be evaluated for each request. The module uses first-party cookies for visitor and display history; include them in your site’s privacy setup.

See the Nuxt demo ↗