v-jsoneditor

library1.4.5jsnpmunverified

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.

serialization web-framework observability

npm install v-jsoneditor

github ↗package ↗

INSTALL

IMPORT

SIG · V-JSONEDITOR

v-jsoneditor

serializationjavascriptv1.4.5

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.

VJsoneditor

✓ import VJsoneditor from 'v-jsoneditor'

✗ import { VJsoneditor } from 'v-jsoneditor'

This package exports a default component, not named exports. It's intended for Vue 2 applications.

Global Vue plugin

✓ import Vue from 'vue' import VJsoneditor from 'v-jsoneditor' Vue.use(VJsoneditor)

✗ const VJsoneditor = require('v-jsoneditor')

For global registration across your Vue 2 application, use `Vue.use()`. The CommonJS `require` syntax is generally not suitable for modern Vue component usage.

Component options

✓ export default { components: { VJsoneditor }, // ... }

After importing, register `VJsoneditor` locally within your component's `components` option to use it in the template.

This quickstart initializes a Vue 2 application, globally registers `v-jsoneditor`, and displays a basic editor component with initial JSON data and custom options.

import Vue from 'vue'; import VJsoneditor from 'v-jsoneditor'; Vue.use(VJsoneditor); new Vue({ el: '#app', data() { return { jsonData: { message: 'Hello V-JSONEditor!', version: '1.0.0', isActive: true, items: [ { id: 1, name: 'Item A' }, { id: 2, name: 'Item B' } ] }, editorOptions: { mode: 'code', modes: ['code', 'tree', 'form', 'view', 'text'], onError: (err) => { console.error('JSONEditor error:', err); } } }; }, methods: { handleError(err) { console.error('v-jsoneditor component error:', err); } }, template: ` <div> <h1>Vue JSON Editor Demo</h1> <v-jsoneditor v-model="jsonData" :options="editorOptions" :plus="true" height="400px" @error="handleError" /> <p>Current JSON: {{ JSON.stringify(jsonData) }}</p> </div> `, });

Debug

Known issues

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

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.

affects: <=1.4.5

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

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.

affects: >=1.0.0

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

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

affects: >=1.0.0

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

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.

affects: <=1.4.5

Errors

Common errors & fixes

Failed to resolve component: v-jsoneditor

The `v-jsoneditor` component was not properly registered with Vue.

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.

TypeError: Cannot read properties of undefined (reading 'install')

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

fix

Verify that `VJsoneditor` is correctly imported as a default export: `import VJsoneditor from 'v-jsoneditor';` before passing it to `Vue.use()`.

[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.

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.

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.

Upgrade

Version history

1.4.5latest on npm

Audit

Dependencies

jsoneditorrequiredCore dependency providing the underlying JSON editing functionality.

vuerequiredPeer dependency for the Vue.js framework, specifically targeting Vue 2.x.

Agent activity

38 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yansenlei/VJsoneditor ↗

packagehttps://www.npmjs.com/package/v-jsoneditor ↗