{"id":12338,"library":"v-jsoneditor","title":"Vue JSONEditor Component","description":"v-jsoneditor is a Vue.js wrapper component for the popular `jsoneditor` library, providing a powerful and customizable JSON editor interface within Vue applications. It allows users to view, edit, format, and validate JSON data through a user-friendly GUI or code editor. The current stable version is 1.4.5, with the last update in September 2021. Due to the lack of recent activity, the project appears to be unmaintained, potentially limiting its compatibility with newer Vue versions (e.g., Vue 3) or the latest features and security patches of the underlying `jsoneditor` library. Its primary differentiator is its straightforward integration into Vue 2 projects.","status":"abandoned","version":"1.4.5","language":"javascript","source_language":"en","source_url":"https://github.com/yansenlei/VJsoneditor","tags":["javascript","vue","jsoneditor"],"install":[{"cmd":"npm install v-jsoneditor","lang":"bash","label":"npm"},{"cmd":"yarn add v-jsoneditor","lang":"bash","label":"yarn"},{"cmd":"pnpm add v-jsoneditor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency providing the underlying JSON editing functionality.","package":"jsoneditor","optional":false},{"reason":"Peer dependency for the Vue.js framework, specifically targeting Vue 2.x.","package":"vue","optional":false}],"imports":[{"note":"This package exports a default component, not named exports. It's intended for Vue 2 applications.","wrong":"import { VJsoneditor } from 'v-jsoneditor'","symbol":"VJsoneditor","correct":"import VJsoneditor from 'v-jsoneditor'"},{"note":"For global registration across your Vue 2 application, use `Vue.use()`. The CommonJS `require` syntax is generally not suitable for modern Vue component usage.","wrong":"const VJsoneditor = require('v-jsoneditor')","symbol":"Global Vue plugin","correct":"import Vue from 'vue'\nimport VJsoneditor from 'v-jsoneditor'\nVue.use(VJsoneditor)"},{"note":"After importing, register `VJsoneditor` locally within your component's `components` option to use it in the template.","symbol":"Component options","correct":"export default {\n  components: { VJsoneditor },\n  // ...\n}"}],"quickstart":{"code":"import Vue from 'vue';\nimport VJsoneditor from 'v-jsoneditor';\n\nVue.use(VJsoneditor);\n\nnew Vue({\n  el: '#app',\n  data() {\n    return {\n      jsonData: {\n        message: 'Hello V-JSONEditor!',\n        version: '1.0.0',\n        isActive: true,\n        items: [\n          { id: 1, name: 'Item A' },\n          { id: 2, name: 'Item B' }\n        ]\n      },\n      editorOptions: {\n        mode: 'code',\n        modes: ['code', 'tree', 'form', 'view', 'text'],\n        onError: (err) => {\n          console.error('JSONEditor error:', err);\n        }\n      }\n    };\n  },\n  methods: {\n    handleError(err) {\n      console.error('v-jsoneditor component error:', err);\n    }\n  },\n  template: `\n    <div>\n      <h1>Vue JSON Editor Demo</h1>\n      <v-jsoneditor\n        v-model=\"jsonData\"\n        :options=\"editorOptions\"\n        :plus=\"true\"\n        height=\"400px\"\n        @error=\"handleError\"\n      />\n      <p>Current JSON: {{ JSON.stringify(jsonData) }}</p>\n    </div>\n  `,\n});\n","lang":"javascript","description":"This quickstart initializes a Vue 2 application, globally registers `v-jsoneditor`, and displays a basic editor component with initial JSON data and custom options."},"warnings":[{"fix":"For Vue 3 projects, consider using a different `jsoneditor` wrapper library specifically designed for Vue 3, or encapsulate the core `jsoneditor` library in a custom Vue 3 component.","message":"This package is built for Vue 2.x. It is not directly compatible with Vue 3 without a compatibility layer or significant refactoring, as Vue 3 introduced breaking changes to its API and component registration.","severity":"breaking","affected_versions":"<=1.4.5"},{"fix":"Evaluate the risk of using unmaintained software. Consider forking the repository, contributing fixes, or migrating to a more actively maintained alternative if long-term support is required.","message":"The project appears to be abandoned, with the last commit in September 2021. This means it may not receive updates for bug fixes, new features, or compatibility with newer versions of Vue or the underlying `jsoneditor` library. Security vulnerabilities in `jsoneditor` itself might not be patched in this wrapper.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Refer to the official `jsoneditor` API documentation (e.g., on `https://github.com/josdejong/jsoneditor/blob/master/docs/api.md`) for comprehensive details on `options`.","message":"The `options` prop directly maps to the `jsoneditor` library's configuration. Ensure you consult the `jsoneditor` documentation for detailed information on available options and their behavior, as this wrapper primarily exposes that API.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Inspect the `package.json` to verify the exact `jsoneditor` version being used (currently `^9.0.0`) and consult its documentation for that specific version. Upgrading `jsoneditor` directly within `node_modules` is not recommended without testing.","message":"The underlying `jsoneditor` library has likely evolved since `v-jsoneditor`'s last update. Features or options available in newer `jsoneditor` versions might not be exposed or function correctly with this older wrapper.","severity":"deprecated","affected_versions":"<=1.4.5"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have either called `Vue.use(VJsoneditor)` for global registration or included `VJsoneditor` in the `components` option of the parent component where it's being used.","cause":"The `v-jsoneditor` component was not properly registered with Vue.","error":"Failed to resolve component: v-jsoneditor"},{"fix":"Verify that `VJsoneditor` is correctly imported as a default export: `import VJsoneditor from 'v-jsoneditor';` before passing it to `Vue.use()`.","cause":"Attempting to use `Vue.use()` with a module that doesn't provide an `install` method, often due to incorrect import (e.g., `require`ing an ESM-only default export).","error":"TypeError: Cannot read properties of undefined (reading 'install')"},{"fix":"Ensure all `key` props in `v-for` loops are bound to unique primitive values (strings or numbers), typically an `id` property from your data item.","cause":"While not directly from `v-jsoneditor`, this warning can appear if you are binding an object or array directly as a `key` prop in a `v-for` loop that includes `v-jsoneditor` or another component.","error":"[Vue warn]: Avoid using non-primitive value as key, use string/number value instead."}],"ecosystem":"npm"}