Nuxt layer

@avvyr/cms-nuxt is a Nuxt 4 layer. The site's published content lives in the Nitro server's memory, so rendering a page is a lookup, not an API call. It includes composables, a block renderer, rich text, responsive images, preview, live editing and a sitemap helper. It does not depend on the storefront packages, but works alongside @avvyr/storefront-nuxt.

Install

npm install @avvyr/cms-nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  extends: ['@avvyr/cms-nuxt'],
  cms: {
    siteId: '<site id>',
    locales: ['sv', 'en'],        // optional, default: every language on the site
    defaultLocale: 'sv',          // optional, default: the site's default
    syncIntervalMs: 5000,         // optional
    editorOrigins: ['https://app.avvyr.com'], // optional, who may drive live editing
  },
})

A catch-all page

<!-- app/pages/[...slug].vue -->
<script setup lang="ts">
import type { CmsBlock } from '@avvyr/cms'

const route = useRoute()
const { data: page, error } = await useCmsPage<{ body?: CmsBlock[] }>(() => route.path)
if (error.value) throw createError({ statusCode: 404, fatal: true })

useCmsAlternates(page, { xDefault: 'sv' }) // hreflang links
useSeoMeta({ title: () => page.value?.title })
</script>

<template>
  <CmsBlocks :blocks="page?.fields.body" />
</template>

Composables

All of them use useAsyncData with stable keys. Pass locale explicitly when your i18n codes differ from the CMS language codes.

Blocks

Register a component per block type, once, in app.vue or a layout:

// app/app.vue
import Hero from '~/components/blocks/Hero.vue'
import TextSection from '~/components/blocks/TextSection.vue'

provideCmsBlocks({ hero: Hero, textSection: TextSection })

A block component gets block, fields, index and first, whichever it declares as props:

<!-- app/components/blocks/Hero.vue -->
<script setup lang="ts">
import type { CmsMedia, CmsRichTextDoc } from '@avvyr/cms'

defineProps<{ fields: { title?: string, image?: CmsMedia | null, body?: CmsRichTextDoc | null }, first?: boolean }>()
</script>

<template>
  <section>
    <component :is="first ? 'h1' : 'h2'">{{ fields.title }}</component>
    <CmsImage :media="fields.image" :width="1200" sizes="100vw" />
    <CmsRichText :doc="fields.body" />
  </section>
</template>

<CmsBlocks> can also take the map as a components prop, or read it from cms.blocks in app.config.ts. Unknown block types render nothing, with a warning in development.

Components

• <CmsBlocks :blocks :components> renders blocks by type, each wrapped in a data-cms-block element for live editing (display: contents by default).
• <CmsRichText :doc> renders rich text as VNodes, not v-html. Links to entries become <NuxtLink>, and unsafe hrefs are dropped.
• <CmsImage :media :width :height :sizes> renders a <picture> with AVIF and WebP sources and the image's own width and height, so nothing shifts. The focal point becomes object-position.

How content stays fresh

• At startup the server loads each language's bundle into memory.
• Every syncIntervalMs (and on requests, on serverless hosts) it checks /version. When the version moved, it fetches /changes and refetches only what changed. Large change sets or errors fall back to the full bundle.
• Reads never wait for a sync. The previous version is served until the new one is swapped in whole.
• Each bundle is also written to Nitro storage at cache:avvyr-cms:<siteId>:<locale>, so a cold instance starts from it. Mount cache on persistent storage (for example Azure Blob) in production.
• POST /api/_cms/sync with x-cms-webhook-secret: <NUXT_CMS_WEBHOOK_SECRET> syncs at once.

A publish therefore reaches the site within syncIntervalMs.

Preview and live editing

Both work without code. While ?token= is in the URL, pages load drafts and get noindex, and the live editing bridge starts when the editor frames the site. Your site must allow the app to frame it:

// nuxt.config.ts
routeRules: {
  '/**': { headers: { 'Content-Security-Policy': "frame-ancestors 'self' https://app.avvyr.com" } },
},

See Preview and live editing for how it works.

Sitemap

// server/routes/sitemap-cms.json.get.ts
export default defineEventHandler(event => getCmsSitemapEntries(event, { locale: 'sv' }))
// → [{ path, lastmod, alternates: { en: '/about-us' } }]

Feed it to @nuxtjs/sitemap as a source, or build the XML yourself.