@stackonward/section-renderer-vue

Product-neutral Vue 3 adapter for structured section rendering. It provides the component registry, renderer, lazy loading, inline editing, preview-host composition, generic article media sections, and common browser interactions.

Products own their section packs, design tokens, page shells, and product CSS.

Install

pnpm add @stackonward/section-renderer-vue vue

Render article sections

<script setup lang="ts">
import { registerArticleSections, SectionRenderer } from '@stackonward/section-renderer-vue'
import '@stackonward/section-renderer-vue/styles/utilities'

registerArticleSections()
</script>

<template>
  <SectionRenderer :sections-data="article.content_json" />
</template>

registerArticleSections() registers only these generic types:

• article-image
• article-custom-html
• article-prose
• article-video
• article-youtube

SectionRendererPlugin separately registers the built-in rich-text reference implementation. A product can call registerSection() for additional types without modifying this package.

Register a product section

import { registerSection } from '@stackonward/section-renderer-vue'

registerSection({
  name: 'product-feature-grid',
  componentName: 'FeatureGrid',
  component: () => import('./FeatureGrid.vue'),
  supportsInlineEdit: true,
})

Section names are the serialized content contract. Keep product-specific names and components in the product-owned registration package.

Admin preview host

The editor entry mounts a full-page preview runtime around a caller-owned postMessage bridge:

import { createPreviewApp, PreviewBridge } from '@stackonward/section-renderer-vue/editor'

const bridge = new PreviewBridge({ allowedOrigin: 'https://admin.example.com' })
bridge.connect()

createPreviewApp('#app', { bridge })

The host accepts section data, raw HTML previews, locale, product context, selection, and theme-token messages. It sends height, readiness, inline-edit, keyboard shortcut, and heartbeat messages. The preview document owns this page-lifetime mount; call bridge.disconnect() when its iframe lifecycle ends.

Common media interactions

The /interactions/common entry provides opt-in DOM behavior for generic article markup:

• privacy-enhanced YouTube facades that connect only after user intent;
• native-video metadata loading near the viewport;
• keyboard and pointer playback toggles;
• preview-link navigation guards.

article-custom-html scopes the bundled utility classes under .article-content. Import /styles/utilities only where that raw HTML contract is used.

Main API

| API | Purpose | | ------------------------------------------------ | ------------------------------------------------------ | | SectionRenderer | Render ordered section data through the registry | | registerSection, useRegistry | Register and resolve lazy Vue section components | | useLazyRender | Coordinate viewport-driven section rendering | | useInlineEdit | Manage inline setting edits in an editor surface | | useSectionStyle | Convert validated section style data into Vue bindings | | generateSectionJsonLd, generateJsonLdScripts | Project section SEO data into JSON-LD scripts | | safeColor, safeUrl | Re-export the core boundary sanitizers |

Entry points

| Entry point | Purpose | | ------------------------------------------------------- | ------------------------------------------------------ | | @stackonward/section-renderer-vue | Renderer, registry, components, composables, and types | | @stackonward/section-renderer-vue/editor | Preview app and postMessage bridge contracts | | @stackonward/section-renderer-vue/interactions/common | Generic article media and preview interactions | | @stackonward/section-renderer-vue/styles/utilities | Scoped raw-HTML utility CSS |

Unknown section types render through FallbackSection; component render errors are isolated by SectionErrorBoundary. Data validation and transforms remain in @stackonward/section-core.

Compatibility

• Vue ^3.4.0
• Modern browsers for lazy rendering, editor preview, and media interactions
• ESM with TypeScript declarations

Related packages

• @stackonward/section-core owns framework-independent section contracts and transforms.
• @stackonward/cms-nuxt composes CMS delivery and article media interactions for Nuxt.

License

MIT