{"id":14285,"library":"vue-json-editor","title":"Vue JSON Editor","description":"vue-json-editor is a Vue 2 component that provides a graphical user interface for editing JSON data, acting as a wrapper around the popular `jsoneditor` library. Its current stable version is 1.4.3, released in late 2020. The package has seen no new feature development since then and is primarily maintained for Vue 2 environments. It offers modes like 'tree', 'view', and 'form' for interacting with JSON, along with features such as displaying save buttons, expanding the editor on start, and language customization. Differentiators include its direct integration with Vue's `v-model` for two-way data binding and event-based callbacks for changes and saves. However, its explicit peer dependency on Vue 2 means it is not directly compatible with Vue 3 applications, requiring users to seek alternative JSON editor solutions for newer Vue projects.","status":"maintenance","version":"1.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/dirkliu/vue-json-editor","tags":["javascript","vue-json-editor","vuejsoneditor","json-editor","jsoneditor","json","eidtor","vue"],"install":[{"cmd":"npm install vue-json-editor","lang":"bash","label":"npm"},{"cmd":"yarn add vue-json-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-json-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, explicitly requires Vue 2.x for component functionality.","package":"vue","optional":false},{"reason":"Core underlying library providing the JSON editing functionality. vue-json-editor wraps version ^9.0.0 of jsoneditor.","package":"jsoneditor","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { vueJsonEditor } from 'vue-json-editor'","symbol":"vueJsonEditor","correct":"import vueJsonEditor from 'vue-json-editor'"},{"note":"For local component usage, register it in the `components` option of your Vue component. Global registration is less common for single components.","wrong":"Vue.use(vueJsonEditor)","symbol":"Vue component registration","correct":"export default {\n  components: {\n    vueJsonEditor\n  }\n}"},{"note":"`v-model` is the primary way to bind JSON data, and `@json-change` is the specific event for content modifications. Do not use a generic `@change` event.","wrong":"<vue-json-editor :json=\"myJsonData\" @change=\"handleJsonChange\" />","symbol":"v-model and events","correct":"<vue-json-editor v-model=\"myJsonData\" @json-change=\"handleJsonChange\" />"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <p>Vue JSON Editor Demo</p>\n    <vue-json-editor\n      v-model=\"jsonData\"\n      :show-btns=\"true\"\n      :expandedOnStart=\"true\"\n      :mode=\"'tree'\"\n      lang=\"en\"\n      @json-change=\"onJsonChange\"\n      @json-save=\"onJsonSave\"\n      @has-error=\"onError\"\n    ></vue-json-editor>\n    <p>Current JSON Data:</p>\n    <pre>{{ JSON.stringify(jsonData, null, 2) }}</pre>\n  </div>\n</template>\n\n<script>\n  import vueJsonEditor from 'vue-json-editor'\n\n  export default {\n    name: 'App',\n    components: {\n      vueJsonEditor\n    },\n    data () {\n      return {\n        jsonData: {\n          id: 1,\n          name: 'Example Item',\n          details: {\n            value: 'Some detail value',\n            status: 'active'\n          },\n          tags: ['vue', 'json', 'editor']\n        }\n      }\n    },\n    methods: {\n      onJsonChange (value) {\n        console.log('JSON has changed:', value)\n        // You can update other parts of your application here\n      },\n      onJsonSave (value) {\n        console.log('JSON has been saved (button clicked):', value)\n        // Implement your save logic here, e.g., API call\n      },\n      onError (error) {\n        console.error('JSON editor encountered an error:', error)\n      }\n    }\n  }\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\npre {\n  text-align: left;\n  background: #f0f0f0;\n  padding: 15px;\n  border-radius: 5px;\n  margin: 20px auto;\n  max-width: 600px;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n</style>","lang":"javascript","description":"This quickstart demonstrates how to integrate `vue-json-editor` into a Vue 2 component, binding JSON data using `v-model` and handling various events like changes, saves, and errors. It also showcases essential component properties."},"warnings":[{"fix":"For Vue 3 projects, consider modern alternatives like `json-editor-vue`, `vue3-jsoneditor`, or `v3-jsoneditor`, which are actively maintained and built for Vue 3 compatibility.","message":"This package is designed for Vue 2 applications and is not compatible with Vue 3. It relies on Vue 2's reactivity system and component APIs, which are significantly different in Vue 3. Attempting to use it in a Vue 3 project will lead to runtime errors.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Assess the stability and feature set against your project's needs. If newer `jsoneditor` features or long-term maintenance are critical, migrating to a more actively maintained Vue 2/3 compatible JSON editor library is recommended.","message":"The `vue-json-editor` package has not been actively developed since its last release (v1.4.3 in 2020). The underlying `jsoneditor` library, which it depends on, has evolved significantly since version 9.x. This means `vue-json-editor` might not include newer features, bug fixes, or performance improvements from later `jsoneditor` versions, and might not receive critical updates.","severity":"maintenance","affected_versions":">=1.4.3"},{"fix":"Always use the `@json-change` event to capture updated JSON data from the editor. This event provides the latest state, allowing you to explicitly update your parent component's data property, maintaining clear data flow and reactivity.","message":"When using `v-model` with objects in Vue 2, direct mutation of the `v-model` bound object within child components can lead to unexpected reactivity issues or break one-way data flow conventions. While `vue-json-editor` handles this internally, understanding the data flow for large or complex JSON objects is crucial for debugging.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.4.3':37 '2':11,58,121 '2020':41 '3':130 'act':23 'along':72 'altern':136 'applic':131 'around':27 'base':108 'bind':104 'button':79 'callback':109 'chang':111 'compat':127 'compon':12 'current':33 'custom':87 'data':22,103 'depend':118 'develop':49 'differenti':88 'direct':91,126 'display':77 'edit':20 'editor':3,7,82,138,148,152 'eidtor':155 'environ':59 'event':107 'event-bas':106 'expand':80 'explicit':116 'featur':48,74 'form':67 'graphic':16 'howev':114 'includ':89 'integr':92 'interact':69 'interfac':18 'javascript':144 'json':2,6,21,71,137,147,151,154 'json-editor':150 'jsoneditor':30,153 'languag':86 'late':40 'librari':31 'like':63 'maintain':55 'mean':122 'mode':62 'model':98 'new':47 'newer':141 'offer':61 'packag':43 'peer':117 'popular':29 'primarili':54 'project':143 'provid':14 'releas':38 'requir':132 'save':78,113 'seek':135 'seen':45 'sinc':50 'solut':139 'stabl':34 'start':84 'tree':64 'two':101 'two-way':100 'user':17,133 'v':97 'v-model':96 'version':35 'view':65 'vue':1,5,10,57,94,120,129,142,146,156 'vue-json-editor':4,145 'vuejsoneditor':149 'way':102 'wrapper':26","created_at":"2026-04-20T01:58:55.155269+00:00","updated_at":"2026-04-20T01:58:55.155269+00:00","problems":[{"fix":"Ensure you have `import vueJsonEditor from 'vue-json-editor'` in your script and added `vueJsonEditor` to the `components` object in your Vue component options, e.g., `components: { vueJsonEditor }`.","cause":"The `vue-json-editor` component was not properly registered in the Vue instance or parent component's `components` option.","error":"[Vue warn]: Failed to resolve component: vue-json-editor"},{"fix":"Always initialize your `v-model` bound data property (e.g., `jsonData`) in your Vue component's `data()` method with a default object, even if it's an empty one: `data() { return { jsonData: {} } }`.","cause":"The JSON data bound via `v-model` was not properly initialized as an object, or it became `null`/`undefined` during the component's lifecycle.","error":"TypeError: Cannot read properties of undefined (reading 'msg') or similar property access errors within the editor."},{"fix":"Verify that all props passed to `vue-json-editor` (e.g., `mode`, `lang`) are valid and conform to the expected types as per its documentation. If the issue persists, examine the GitHub issues for `vue-json-editor` and `jsoneditor` to see if it's a known bug or limitation for the specific version range.","cause":"This error often indicates an issue within the underlying `jsoneditor` library itself, possibly due to unsupported options passed to `vue-json-editor`, or a version mismatch with its internal dependencies.","error":"Error in render: 'TypeError: Cannot read property 'tree' of undefined' (or similar errors related to `jsoneditor` internals)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/dirkliu/vue-json-editor","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-json-editor","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}