@composy/json-editor-vue

@composy/json-editor-vue

仅支持 Vue 3；构建入口使用 libraryType: 'vue3'。

Vue 适配包，为 @composy/json-editor-core 提供 JsonEditor 组件、useJsonEditor 组合式函数与全局注册插件。

安装

pnpm add @composy/json-editor-vue @composy/json-editor-core

组件示例

<script setup lang="ts">
import type { JsonSchema } from '@composy/json-editor-core'
import { JsonEditor } from '@composy/json-editor-vue'
import { ref } from 'vue'

const value = ref({ name: 'LDesign', enabled: true })
const schema: JsonSchema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    enabled: { type: 'boolean' },
  },
}
</script>

<template>
  <JsonEditor v-model="value" :schema="schema" mode="tree" theme="light" />
</template>

JsonEditor 支持 modelValue、schema、theme、mode、readOnly、expandDepth、indentWidth、searchable、history 和 height 等属性，并发出 update:modelValue、change 与 validation-error 事件。

其他导出

• useJsonEditor() 在组件中创建并管理核心编辑器实例。
• JsonEditorPlugin 全局注册 JsonEditor；需要自定义组件名时使用 createJsonEditorPlugin({ componentName })。
• 核心类型从适配包重新导出，也可直接从 @composy/json-editor-core 引入。

目录与验证

packages/vue/
├── .ldesign/                 # Builder、ESM/CJS TypeScript 与项目配置
├── src/
│   ├── components/           # Vue SFC
│   ├── composables/          # Vue 组合式函数
│   ├── plugins/              # Vue 插件
│   └── style/                # 样式入口
├── tsconfig.json             # .ldesign/tsconfig.esm.json 兼容入口
└── tsconfig.cjs.json         # .ldesign/tsconfig.cjs.json 兼容入口

在仓库根目录运行：

pnpm --dir libraries/json-editor/packages/vue run build
pnpm --dir libraries/json-editor/packages/vue run type-check
pnpm --dir libraries/json-editor/packages/vue run type-check:cjs
pnpm --dir libraries/json-editor/packages/vue run lint:check

构建使用 @composy/builder 与 rolldown，生成 es/、esm/、lib/、dist/ 产物。