json-editor-vue

English | 简体中文

json-editor-vue

JSON editor & viewer for Vue 2 and 3 powered by svelte-jsoneditor & vue-json-viewer

svelte-jsoneditor is a brand new JSON editor created by the same author of jsoneditor which 'has become hard to maintain, and the architecture needed a big overhaul'. json-editor-vue is the Vue version for svelte-jsoneditor.

Features

• JSON editing + JSON viewing
• Support both Vue2 & Vue3
• Support v-model
• Repair malformed JSON strings automatically
• element-plus & element-ui adaptable ( readonly status goes with el-form by default )
• Import locally or globally, config locally or globally

Installation

Vue3

npm add json-editor-vue svelte-jsoneditor

// import globally

import JsonEditorVue from 'json-editor-vue'

createApp(App)
.use(JsonEditorVue, {
  // global config
})

<!-- import locally -->

<template>
  <JsonEditorVue v-model="value" v-bind="{/* local config */}"/>
</template>

<script setup>
import JsonEditorVue from 'json-editor-vue'
</script>

Vue2

npm add json-editor-vue svelte-jsoneditor @vue/composition-api

// import globally

import JsonEditorVue from 'json-editor-vue'

Vue.use(JsonEditorVue, {
  // global config
})

<!-- import locally -->

<template>
  <JsonEditorVue :modelValue.sync="value" v-bind="{/* local config */}"/>
</template>

<script>
import JsonEditorVue from 'json-editor-vue'

export default {
  components: { JsonEditorVue },
}
</script>

Props

Name	Description	Type	Accepted Values	Default
v-model / modelValue	binding value	any
readonly	whether JsonEditorVue is readonly	boolean		false
readonlyOptions	props of vue-json-viewer	object
...	props of svelte-jsoneditor

Config rules

• Props of two-way data binding ( v-model / modelValue ) only support local config.
• All other props support both local and global config.

Priority:

• Local config is higher than global config.
• For object type, global config will be merged into local config.