@spryui/nuxt

@spryui/nuxt

Nuxt 4 adapter for server-rendered SpryUI banners.

View the live Nuxt SSR demo.

npm install @spryui/nuxt @spryui/sdk

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

<!-- app/app.vue -->
<template>
  <SpryUiBanners position="top" />
  <NuxtPage />
  <SpryUiBanners position="bottom" />
</template>

Use each position once. The component is registered automatically. The module owns the internal /api/_spryui/config endpoint, host detection, request-bound SSR fetch, targeting context, visitor/session cookies, delivery history, and browser handoff. The browser reuses the SSR config on hydration and refreshes on route navigation. Service failures leave the page usable.

publicKey may instead be supplied through NUXT_SPRYUI_PUBLIC_KEY at runtime. Optional env defaults to PRODUCTION (NUXT_SPRYUI_ENV); timeoutMs defaults to 1500 (NUXT_SPRYUI_TIMEOUT_MS). Approve the site's domain in the matching SpryUI project. One project is supported per app.

The module sets private/no-store responses and rejects configured shared route caches and prerendering. Do not override this with CDN cache rules or static generation: page HTML contains visitor-specific state. First-party cookies retain visitor/session identity and delivery history; integrate your site's consent requirements. Device-restricted banners may wait for browser evaluation.

This adapter has Nuxt and SDK peer dependencies. The underlying @spryui/sdk remains dependency-free. Package files are allowlisted, there are no install hooks, and publication runs from our private repository without provenance.