@axolo/json-editor-vue
A simple JSON editor of Vue based on CodeMirror Version 6.
Install
npm i @axolo/json-editor-vue
Usage
<script>
import JsonEditor from '@axolo/json-editor-vue'
export default {
components: {
JsonEditor
},
data() {
return {
json: {
required: true,
message: 'please input content'
}
}
}
}
</script>
<template>
<json-editor
v-model="json"
codec
dark
placeholder="please input json"
@change="console.log"
@error="console.error"
/>
</template>
Props
| Name | Type | Default | Description |
|---|
modelValue | any | | JSON string, object, array ... |
placeholder | String | | placeholder |
readonly | Boolean | false | readonly |
dark | Boolean | false | dark theme as oneDark |
codec | [Boolean, Array] | false | See codec |
format | [Boolean, Function] | false | See format (TODO) |
extensions | Array | [] | extra codemirror extensions (TODO) |
codec
| Value | Description |
|---|
false | default, do nothing, modelValue is JSON string |
true | [JSON.stringify, JSON.parse], modelValue is not JSON string |
Array | custom codec, Aarray of [encode, decode] (TODO) |
| Value | Description |
|---|
false | default, do nothing |
true | JSON.stringify(json, null, 2) |
Function | custom formatter |
Emits
| Name | Parameters | Description |
|---|
update:modelValue | json | update modelValue |
change | json | value of modelValue |
error | error | throw error or false when blur |
Yueming Fang
2023-12-09
关于 @axolo/json-editor-vue 的常见问题
@axolo/json-editor-vue 是什么？
A simple JSON editor of Vue
如何安装 @axolo/json-editor-vue？
在项目目录运行 npm install @axolo/json-editor-vue，或使用 pnpm add / yarn add / bun add。
@axolo/json-editor-vue 支持 TypeScript 吗？
该包的 package.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/axolo__json-editor-vue 是否存在。
@axolo/json-editor-vue 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。
@axolo/json-editor-vue 可以商用吗？
@axolo/json-editor-vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
@axolo/json-editor-vue 的下载量有多少？
根据 npm 官方下载统计，@axolo/json-editor-vue 在 2026/10/08 – 2026/11/06 这 30 天内被下载 7,620 次，日均约 254 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
@axolo/json-editor-vue 还在维护吗？
最新版本 0.3.2 发布于 2024/03/07（2 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/12/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。