v3-jsoneditor
“Vue 3 JSON Editor” is a web-based application built with the Vue 3 JavaScript framework that allows users to easily create, view, and edit JSON data in a user-friendly interface.
Installation
npm install v3-jsoneditor
Using
Import globally
import {createApp} from 'vue'
import App from './App.vue'
import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
const app = createApp(App)
app.component('vue3-jsoneditor', Vue3Jsoneditor)
app.mount('#app')
Import
import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
export default {
name: 'app',
components: {
Vue3Jsoneditor
},
data() {
return {
json: {
"hello": "vue"
}
}
},
methods: {
onError() {
console.log('error')
}
}
}
Options
Name |
Description |
type |
default |
options |
Jsoneditor params, You can look at the detailed configuration |
Object |
{ mode: ‘code’ } |
v-model |
Object value |
Object |
{ } |
currentMode |
current edit mode |
String |
code |
height |
Default height |
String |
- |
Events
Name |
Description |
change |
called on json update |
update:modelValue |
Called on model value update |
error |
Error callback |
CC-BY / MIT License | Copyright © 2025 Pratik Patel