"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.
https://v3-jsoneditor.netlify.app/
npm install v3-jsoneditor
import {createApp} from 'vue'
import App from './App.vue'
import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
const app = createApp(App)
// Register the VJsoneditor component globally
app.component('vue3-jsoneditor', Vue3Jsoneditor)
app.mount('#app')
import Vue3Jsoneditor from 'v3-jsoneditor/src/Vue3Jsoneditor.vue'
export default {
name: 'app',
components: {
Vue3Jsoneditor
},
data() {
return {
json: {
"hello": "vue"
}
}
},
}
<Vue3Jsoneditor ref="editor" v-model="json" :options="options"></Vue3Jsoneditor>
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 | - |
Name | Description |
---|---|
change | called on json update |
update:modelValue | Called on model value update |
error | Error callback |
If this helped you in any way, you can contribute to this project for long term survival by supporting me
Be sure to check out my sponsor page.
Thank you so much!!!
MIT