@vigilkids/section-renderer-vue

@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
• 表格容器：table-fixed（用在 <table>，启用固定列宽布局 + 自动换行）
• 列宽（像素）：col-60 col-80 col-100 col-120 col-150 col-180 col-200 col-250 col-300 col-350 col-400 col-500
• 列宽（百分比）：col-10p col-15p col-20p col-25p col-30p col-33p col-40p col-50p col-60p col-66p col-70p col-75p col-80p

示例：

<img class="block w-fit mx-auto mb-20" src="https://raw.githubusercontent.com/vigikids/onex/HEAD/..." alt="..." />
<p class="mb-20 text-18 font-bold">%base_year%</p>

<!-- 表格列宽：必须先在 <table> 加 .table-fixed，.col-* 才会生效 -->
<table class="table-fixed">
  <colgroup>
    <col class="col-120" />
    <col class="col-300" />
    <col class="col-25p" />
  </colgroup>
  <thead>
    <tr><th>方法</th><th>说明</th><th>限制</th></tr>
  </thead>
</table>

Components

Composables

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