English | 简体中文

json-editor-vue

JSON editor for Vue 2 and 3 powered by svelte-jsoneditor

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

• Support both Vue 2 & Vue 3
• Support v-model
• Import locally or globally, config locally or globally (Powered by vue-global-config)

Installation

Vue 3

npm add json-editor-vue

// import globally

import JsonEditorVue from 'json-editor-vue'

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>

Vue 2

# Vue version before 2.7 should add an extra @vue/composition-api
npm add json-editor-vue

// import globally

// Vue version before 2.7 should add an extra @vue/composition-api
// import VCA from '@vue/composition-api'
// Vue.use(VCA)

import JsonEditorVue from 'json-editor-vue'

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

<!-- import locally -->

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

<script>
// Vue version before 2.7 should add an extra @vue/composition-api
// import VCA from '@vue/composition-api'
// Vue.use(VCA)

import JsonEditorVue from 'json-editor-vue'

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

Props

Config rules

• Props of two-way data binding ( v-model / modelValue / value ) 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.