vue3-json-editor

(fork vue-json-editor - credits original: https://github.com/dirkliu/vue-json-editor)

(fork vue3-json-editor - joaomede: https://github.com/joaomede/vue3-json-editor)

A json editor of vue.js

Support

• Module ESM: Yes
• Unpkg: Yes
• CommonJS: Yes

How to run DEMO

1# install
2npm install
3
4# for vue 3.x app
5npm run dev
6
7# for vite 3.x
8npm run dev_vite

Component properties

v-model：bind the [json object]
:show-btns: boolean, show the save button, default: true
:expandedOnStart: boolean, expand the JSON editor on start for the modes 'tree', 'view', and 'form', default: false
:mode: string, default: tree
:lang: string, default: en
@json-change: on json changed
@json-save: on json save
@has-error: on error

How to use

1. Install using npm

npm install vue3-json-editor --save

2. Use vue-json-editor in the vue component

1<template>
2  <div>
3    <p>vue-json-editor</p>
4    <Vue3JsonEditor
5      v-model="json"
6      :show-btns="true"
7      :expandedOnStart="true"
8      @json-change="onJsonChange"
9    />
10  </div>
11</template>
12
13<script>
14import { defineComponent, reactive, toRefs } from 'vue'
15import { Vue3JsonEditor } from 'vue3-json-editor'
16
17export default defineComponent({
18  components: {
19    Vue3JsonEditor
20  },
21  setup () {
22    function onJsonChange (value) {
23      console.log('value:', value)
24    }
25
26    const state = reactive({
27      json: {}
28    })
29
30    return {
31      ...toRefs(state),
32      onJsonChange
33    }
34  }
35})
36</script>

3. Vue Vite Example

1<template>
2  <Vue3JsonEditor v-model="json" :show-btns="true" @json-change="onJsonChange"/>
3</template>
4
5<script lang="ts">
6import { defineComponent, reactive, toRefs } from 'vue'
7import { Vue3JsonEditor } from '../dist/vue3-json-editor.esm'
8
9export default defineComponent({
10  name: 'App',
11  components: {
12    Vue3JsonEditor
13  },
14  setup () {
15    function onJsonChange () {
16      //
17    }
18
19    const state = reactive({
20      json: {}
21    })
22
23    return {
24      ...toRefs(state),
25      onJsonChange
26    }
27  }
28})
29</script>
30
31<style>
32#app {
33  font-family: Avenir, Helvetica, Arial, sans-serif;
34  -webkit-font-smoothing: antialiased;
35  -moz-osx-font-smoothing: grayscale;
36  text-align: center;
37  color: #2c3e50;
38  margin-top: 60px;
39}
40</style>