Registry / web-framework / vue-json-editor

vue-json-editor

library1.4.3jsnpmunverified

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.

web-framework serialization

npm install vue-json-editor

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-JSON-EDITOR

vue-json-editor

web-frameworkjavascriptv1.4.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vueJsonEditor

✓ import vueJsonEditor from 'vue-json-editor'

✗ import { vueJsonEditor } from 'vue-json-editor'

The component is exported as a default export.

Vue component registration

✓ export default { components: { vueJsonEditor } }

✗ Vue.use(vueJsonEditor)

For local component usage, register it in the `components` option of your Vue component. Global registration is less common for single components.

v-model and events

✓ <vue-json-editor v-model="myJsonData" @json-change="handleJsonChange" />

✗ <vue-json-editor :json="myJsonData" @change="handleJsonChange" />

`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.

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.

<template> <div id="app"> <p>Vue JSON Editor Demo</p> <vue-json-editor v-model="jsonData" :show-btns="true" :expandedOnStart="true" :mode="'tree'" lang="en" @json-change="onJsonChange" @json-save="onJsonSave" @has-error="onError" ></vue-json-editor> <p>Current JSON Data:</p> <pre>{{ JSON.stringify(jsonData, null, 2) }}</pre> </div> </template> <script> import vueJsonEditor from 'vue-json-editor' export default { name: 'App', components: { vueJsonEditor }, data () { return { jsonData: { id: 1, name: 'Example Item', details: { value: 'Some detail value', status: 'active' }, tags: ['vue', 'json', 'editor'] } } }, methods: { onJsonChange (value) { console.log('JSON has changed:', value) // You can update other parts of your application here }, onJsonSave (value) { console.log('JSON has been saved (button clicked):', value) // Implement your save logic here, e.g., API call }, onError (error) { console.error('JSON editor encountered an error:', error) } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } pre { text-align: left; background: #f0f0f0; padding: 15px; border-radius: 5px; margin: 20px auto; max-width: 600px; white-space: pre-wrap; word-wrap: break-word; } </style>

Debug

Known issues

breakingThis 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.

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.

affects: >=1.0.0

maintenanceThe `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.

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.

affects: >=1.4.3

gotchaWhen 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: vue-json-editor

The `vue-json-editor` component was not properly registered in the Vue instance or parent component's `components` option.

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 }`.

TypeError: Cannot read properties of undefined (reading 'msg') or similar property access errors within the editor.

The JSON data bound via `v-model` was not properly initialized as an object, or it became `null`/`undefined` during the component's lifecycle.

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: {} } }`.

Error in render: 'TypeError: Cannot read property 'tree' of undefined' (or similar errors related to `jsoneditor` internals)

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.

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.

Upgrade

Version history

1.4.3latest on npm

Audit

Dependencies

vuerequiredPeer dependency, explicitly requires Vue 2.x for component functionality.

jsoneditorrequiredCore underlying library providing the JSON editing functionality. vue-json-editor wraps version ^9.0.0 of jsoneditor.

Agent activity

15 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dirkliu/vue-json-editor ↗

packagehttps://www.npmjs.com/package/vue-json-editor ↗