@vigilkids/section-renderer-vue

Vue 3 rendering engine for OneX Section system. Renders section-based content with product-aware component resolution, lazy loading, inline editing, and editor preview support.

Install

pnpm add @vigilkids/section-renderer-vue

Peer Dependencies:

• vue ≥ 3.4

Usage

Frontend (Nuxt/Vue app)

<script setup>
import { SectionRenderer, registerArticleSections, SectionRendererPlugin } from '@vigilkids/section-renderer-vue'

// Register built-in article sections (call once at app startup)
registerArticleSections()
</script>

<template>
  <SectionRenderer
    :sections-data="article.content_json"
    :product-code="'visiva'"
  />
</template>

Admin Preview (iframe)

import { createPreviewApp } from '@vigilkids/section-renderer-vue/editor'

createPreviewApp('#app', {
  bridge: { send, on },
  onSectionClick: (id) => { /* select section */ },
})

Product Styles

// Import product-specific article CSS
import '@vigilkids/section-renderer-vue/styles/vigilkids'
import '@vigilkids/section-renderer-vue/styles/visiva'

Raw HTML Utility Classes

适用于 article-custom-html 或原始 HTML 模板，作用域限定在 .article-content：

• 间距：mt-{n} mb-{n} ml-{n} mr-{n} p-{n} px-{n} py-{n}
• 自动居中：ml-auto mr-auto mx-auto
• 布局：block inline-block
• 宽度：w-full w-fit
• 字号：text-12 ~ text-36
• 字重：font-normal font-medium font-semibold font-bold font-black
• 对齐：text-left text-center text-right
• 行高：leading-tight leading-normal leading-relaxed leading-loose

示例：

<img class="block w-fit mx-auto mb-20" src="..." alt="..." />
<p class="mb-20 text-18 font-bold">%base_year%</p>

Components

| Component | Purpose | |-----------|---------| | SectionRenderer | Root renderer — iterates sections, resolves components | | SectionWrapper | Per-section container with editor-mode highlights | | LazySection | IntersectionObserver lazy loading with CLS prevention | | SectionErrorBoundary | Graceful error fallback per section | | FallbackSection | Placeholder for unregistered section types |

Composables

| Composable | Purpose | |------------|---------| | useInlineEdit | contentEditable inline text editing (double-click to edit) | | useRegistry | Product-aware section component registration and resolution | | useSectionStyle | Semantic tokens → Tailwind classes + inline styles | | useSectionSEO | JSON-LD structured data generation | | useLazyRender | IntersectionObserver visibility detection |

Section Components

28 article sections across 2 products (VigilKids + Visiva) + 2 shared:

article-heading, article-subheading, article-image, article-bullet-list, article-step-list, article-notice, article-quote, article-question, article-pros-cons, article-feature, article-cta, article-faq, article-table, article-toc, article-custom-html

Compatibility

• Vue ≥ 3.4
• Node.js ≥ 18
• ESM only

License

MIT