{"id":12628,"library":"vue3-json-editor","title":"Vue3 JSON Editor","description":"vue3-json-editor is a Vue.js 3 component that provides an interactive JSON editor. It's a direct fork of the `vue-json-editor` library, specifically tailored for Vue 3 applications, distinguishing it from older Vue 2 compatible versions. The package, currently at version 1.1.5, allows developers to display and edit JSON objects within their Vue components, supporting various modes like 'tree', 'view', and 'form'. It offers features such as displaying save buttons, expanding the editor on start, and handling different languages. The component provides `v-model` binding for the JSON data and emits events for changes (`json-change`), saves (`json-save`), and errors (`has-error`). It supports modern module systems including ESM and CommonJS, making it compatible with various build setups like Vite and webpack. While no explicit release cadence is stated, updates appear to be driven by maintenance and new feature integration from its upstream source.","status":"active","version":"1.1.5","language":"javascript","source_language":"en","source_url":"https://github.com/joaomede/vue3-json-editor","tags":["javascript","vue-json-editor","vuejsoneditor","json-editor","jsoneditor","json","eidtor","vue","typescript"],"install":[{"cmd":"npm install vue3-json-editor","lang":"bash","label":"npm"},{"cmd":"yarn add vue3-json-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue3-json-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency as it is a Vue component.","package":"vue","optional":false}],"imports":[{"note":"The library primarily uses named exports and is designed for ESM environments, although CommonJS is also supported. Using `require` might lead to incorrect module resolution or bundling issues in modern Vue 3/Vite projects.","wrong":"const Vue3JsonEditor = require('vue3-json-editor')","symbol":"Vue3JsonEditor","correct":"import { Vue3JsonEditor } from 'vue3-json-editor'"},{"note":"Standard Vue 3 Composition API utility, commonly used when defining components with `setup` function.","symbol":"defineComponent","correct":"import { defineComponent } from 'vue'"},{"note":"Standard Vue 3 reactivity API for creating reactive state objects.","symbol":"reactive","correct":"import { reactive } from 'vue'"},{"note":"Standard Vue 3 utility for converting a reactive object's properties into a collection of refs, often used when returning state from a `setup` function.","symbol":"toRefs","correct":"import { toRefs } from 'vue'"}],"quickstart":{"code":"<template>\n  <div>\n    <p>JSON Editor Example</p>\n    <Vue3JsonEditor\n      v-model=\"json\"\n      :show-btns=\"true\"\n      :expandedOnStart=\"true\"\n      mode=\"tree\"\n      @json-change=\"onJsonChange\"\n      @has-error=\"onJsonError\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, reactive, toRefs } from 'vue'\nimport { Vue3JsonEditor } from 'vue3-json-editor'\n\nexport default defineComponent({\n  components: {\n    Vue3JsonEditor\n  },\n  setup () {\n    const state = reactive({\n      json: { \n        name: \"John Doe\", \n        age: 30, \n        isStudent: false, \n        courses: [\"Math\", \"Science\"] \n      }\n    })\n\n    function onJsonChange (value: object) {\n      console.log('JSON has changed:', value)\n      // You might want to update the reactive 'json' state here if not using v-model directly.\n    }\n\n    function onJsonError (error: any) {\n      console.error('JSON error:', error)\n    }\n\n    return {\n      ...toRefs(state),\n      onJsonChange,\n      onJsonError\n    }\n  }\n})\n</script>\n\n<style>\n/* Basic styling for demonstration */\nbody { font-family: sans-serif; margin: 20px; }\ndiv { max-width: 800px; margin: 0 auto; }\n</style>","lang":"typescript","description":"This quickstart demonstrates how to integrate `vue3-json-editor` into a Vue 3 component using the Composition API, binding a JSON object with `v-model` and handling change and error events."},"warnings":[{"fix":"Ensure your project is running Vue 3.x. For Vue 2 projects, seek a compatible JSON editor component or migrate your application to Vue 3.","message":"This library is a fork specifically for Vue 3. It is not compatible with Vue 2 projects, and attempting to use it in a Vue 2 environment will result in errors related to Vue 3-specific APIs and component registration.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Always initialize `v-model` with an appropriate JavaScript object (for `mode='tree'`) or a JSON string (for `mode='text'`). The `onJsonChange` event provides the updated value in the correct type.","message":"The `v-model` binding for `vue3-json-editor` expects a JSON object for 'tree' mode and a JSON string for 'text' mode. Mismatching the data type with the editor's `mode` property can lead to unexpected behavior or errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Wrap your JSON data in `reactive` or `ref`. For example, `const state = reactive({ json: {} })` and then spread `...toRefs(state)` in the return object, or use `const json = ref({})`.","message":"When using the `setup` function in Vue 3, reactive state for `v-model` must be correctly defined using `reactive` or `ref`. Directly assigning a plain object to `v-model` without reactivity will prevent proper updates from the editor.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Check for common module resolution issues (e.g., in `vite.config.js` for Vite projects, consider `@originjs/vite-plugin-commonjs` if using CommonJS dependencies). Ensure the component is correctly registered and mounted. Verify that the editor's internal dependencies are resolving correctly.","message":"Some users have reported `TypeError: Cannot read property 'getMode' of null` or similar runtime errors, especially in specific build environments like Quasar with Vue 3 CLI or after certain version updates, suggesting issues with module resolution or component initialization.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have `import { Vue3JsonEditor } from 'vue3-json-editor'` in your script and added it to the `components` option: `components: { Vue3JsonEditor }`.","cause":"The Vue3JsonEditor component was not properly registered or imported in the parent Vue component.","error":"Failed to resolve component: Vue3JsonEditor"},{"fix":"Initialize your `v-model` data property with an empty object (e.g., `{}`) or a valid JSON object. For example, `const state = reactive({ json: {} })`.","cause":"The `v-model` bound JSON data was not initialized as an object or was otherwise `undefined` or `null` when the component tried to access its properties.","error":"TypeError: Cannot read properties of undefined (reading 'mode')"},{"fix":"For Vite projects, if the issue persists, consider adding `@originjs/vite-plugin-commonjs` to your `vite.config.js` to improve CommonJS compatibility. Also, review recent changes in the library's changelog for breaking build-related changes.","cause":"This typically indicates a module resolution incompatibility, often occurring in Vite/ESM-first environments trying to consume a library with CommonJS peculiarities, or a breaking change in how the package bundles its exports.","error":"Uncaught TypeError: can't access property 'exports', ks is undefined (or similar module resolution errors)"}],"ecosystem":"npm"}