Vue JSONEditor Component

Common errors

• Failed to resolve component: v-jsoneditor

  cause 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')

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

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

Warnings

• breaking 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.
  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.
• gotcha 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.
  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.
• gotcha 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.
  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`.
• deprecated 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.
  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.

Install

• npm install v-jsoneditor npm
• yarn add v-jsoneditor yarn
• pnpm add v-jsoneditor pnpm

Imports

• VJsoneditor
  wrong:

  import { VJsoneditor } from 'v-jsoneditor'

  correct:

  import VJsoneditor from 'v-jsoneditor'

  This package exports a default component, not named exports. It's intended for Vue 2 applications.
• Global Vue plugin
  wrong:

  const VJsoneditor = require('v-jsoneditor')

  correct:

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

  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.

Quickstart

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>
  `,
});