{"id":11172,"library":"json-editor-vue","title":"JSON Editor Vue","description":"json-editor-vue is an isomorphic Vue component that functions as a comprehensive JSON editor, viewer, formatter, and validator. It leverages the underlying `vanilla-jsoneditor` library to provide its core functionality. The package is actively maintained, with the current stable version being v0.18.1, reflecting a frequent update schedule that includes both bug fixes and feature enhancements, such as regular upgrades to its `vanilla-jsoneditor` dependency. Key differentiators include its robust support for Server-Side Rendering (SSR) in Nuxt environments, comprehensive validation capabilities (indicated by AJV keywords), and broad compatibility across Vue 2 and Vue 3 versions. It offers multiple editing modes (text, tree, table) and handles large JSON documents efficiently, partly due to its use of `destr` for deserialization.","status":"active","version":"0.18.1","language":"javascript","source_language":"en","source_url":"https://github.com/cloydlau/json-editor-vue","tags":["javascript","ajv","bigint","edit","format","formatter","json","jsoneditor","nuxt","typescript"],"install":[{"cmd":"npm install json-editor-vue","lang":"bash","label":"npm"},{"cmd":"yarn add json-editor-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add json-editor-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue framework dependency, supports versions 2 and 3.","package":"vue","optional":false},{"reason":"Required for Vue 2 projects to enable Composition API features. Not needed for Vue 3.","package":"@vue/composition-api","optional":true}],"imports":[{"note":"The component is exported as a default export. Using named import syntax will result in an undefined module.","wrong":"import { JsonEditorVue } from 'json-editor-vue'","symbol":"JsonEditorVue","correct":"import JsonEditorVue from 'json-editor-vue'"},{"note":"The `Mode` enum (e.g., 'tree', 'text', 'form') was removed as a direct export from `json-editor-vue` in v0.15.0. It must now be imported directly from the `vanilla-jsoneditor` package for type hints or programmatic control.","wrong":"import { Mode } from 'json-editor-vue'","symbol":"Mode","correct":"import type { Mode } from 'vanilla-jsoneditor'"},{"note":"Types for the editor's content structure, like `JSONContent`, should be imported directly from `vanilla-jsoneditor` as `json-editor-vue` is a wrapper and re-exports are not guaranteed or explicit for all types.","symbol":"JSONContent","correct":"import type { JSONContent } from 'vanilla-jsoneditor'"}],"quickstart":{"code":"<!-- MyJsonEditorComponent.vue -->\n<template>\n  <div class=\"json-editor-container\">\n    <h2>Edit Your JSON Data</h2>\n    <p>Current mode: {{ mode }}</p>\n    <JsonEditorVue\n      v-model=\"jsonData\"\n      :mode=\"mode\"\n      :mainMenuBar=\"true\"\n      :navigationBar=\"true\"\n      :statusBar=\"true\"\n      :indentation=\"2\"\n      @update:json=\"handleJsonUpdate\"\n      @error=\"handleError\"\n      class=\"my-editor\"\n    />\n    <h3>Raw JSON Output:</h3>\n    <pre class=\"json-output\">{{ JSON.stringify(jsonData, null, 2) }}</pre>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport JsonEditorVue from 'json-editor-vue';\nimport type { Mode, JSONContent } from 'vanilla-jsoneditor';\n\nconst initialData: object | null = {\n  \"user\": {\n    \"id\": 123,\n    \"name\": \"Alice\",\n    \"email\": \"alice@example.com\",\n    \"settings\": {\n      \"theme\": \"dark\",\n      \"notifications\": true,\n      \"language\": \"en-US\"\n    },\n    \"tags\": [\"admin\", \"premium\", \"active\"],\n    \"lastLogin\": \"2024-04-18T10:00:00Z\"\n  },\n  \"products\": [\n    { \"productId\": \"A1\", \"price\": 29.99, \"inStock\": true },\n    { \"productId\": \"B2\", \"price\": 12.50, \"inStock\": false }\n  ]\n};\n\nconst jsonData = ref<object | null>(initialData);\nconst mode = ref<Mode>('tree'); // 'tree', 'text', 'form', 'code', 'preview' options available\n\nfunction handleJsonUpdate(newValue: object | null) {\n  console.log('JSON content updated:', newValue);\n  // You can perform further actions with the updated JSON here\n}\n\nfunction handleError(error: Error) {\n  console.error('JSON Editor encountered an error:', error.message);\n  // Display error to user or log for debugging\n}\n</script>\n\n<style>\n.json-editor-container {\n  font-family: Arial, sans-serif;\n  max-width: 800px;\n  margin: 20px auto;\n  padding: 20px;\n  border: 1px solid #eee;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\nh2 {\n  color: #333;\n  text-align: center;\n  margin-bottom: 20px;\n}\n\n.my-editor {\n  height: 500px; /* Essential for the editor to display */\n  width: 100%;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  margin-bottom: 20px;\n}\n\n.json-output {\n  background-color: #f8f8f8;\n  border: 1px solid #ddd;\n  padding: 10px;\n  border-radius: 4px;\n  white-space: pre-wrap;\n  word-break: break-all;\n}\n</style>","lang":"typescript","description":"This quickstart demonstrates how to integrate `json-editor-vue` into a Vue 3 component using the Composition API. It showcases data binding with `v-model`, setting the editor mode, enabling UI elements like the menu and navigation bar, and handling `update:json` and `error` events for robust interaction. Types for `Mode` and `JSONContent` are imported from `vanilla-jsoneditor` for type safety."},"warnings":[{"fix":"Review any code that relies on deep merging of component properties or specific `JSON.parse` behaviors. Adjust property assignment logic to explicitly handle deep merges if required, or ensure configurations are structured to accommodate shallow merging.","message":"In v0.16.0, `json-editor-vue` changed its default JSON deserialization from `JSON.parse` to `destr` and began shallowly merging properties. This affects how default properties and complex configurations are handled, potentially altering expected behavior for deep object merges or specific parsing edge cases.","severity":"breaking","affected_versions":">=0.16.0"},{"fix":"Update import statements to retrieve `Mode` directly from the upstream `vanilla-jsoneditor` package: `import type { Mode } from 'vanilla-jsoneditor';`.","message":"The `Mode` enum, previously exported directly from `json-editor-vue`, was removed in v0.15.0. Users who relied on `import { Mode } from 'json-editor-vue'` for defining editor modes will encounter import errors.","severity":"breaking","affected_versions":">=0.15.0"},{"fix":"Always use the default import syntax: `import JsonEditorVue from 'json-editor-vue'`.","message":"The primary component `JsonEditorVue` is a default export, not a named export. Attempting to import it using named import syntax (e.g., `import { JsonEditorVue } from 'json-editor-vue'`) will result in an undefined module import or similar runtime errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"When upgrading `json-editor-vue`, it is highly recommended to also consult the `vanilla-jsoneditor` changelog for potential breaking changes or significant feature updates. Thoroughly test your application after any upgrade.","message":"This library frequently upgrades its core dependency, `vanilla-jsoneditor`. While `json-editor-vue`'s own changelog may not always mark these as breaking, major `vanilla-jsoneditor` updates (e.g., v1.0 in 0.17.0, v2.0 in 0.17.3, v3.0 in 0.18.0) can introduce API changes, UI shifts, or behavior modifications that implicitly affect `json-editor-vue`'s functionality or user experience.","severity":"gotcha","affected_versions":">=0.17.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `json-editor-vue` is installed via your package manager (`npm install json-editor-vue` or `yarn add json-editor-vue`). Verify your build tool's configuration for alias resolution and ensure it correctly handles Vue component imports. For Nuxt, ensure it's imported correctly within a Nuxt plugin or component.","cause":"The `json-editor-vue` package is not correctly installed, or there's a module resolution issue in your bundler (Vite, Webpack, Nuxt).","error":"Failed to resolve import \"json-editor-vue\" from \"src/App.vue\". Does the file exist?"},{"fix":"Confirm that `import JsonEditorVue from 'json-editor-vue'` is present at the top of your script. If using the Options API, ensure it's listed in the `components` option. For `<script setup>`, the import statement is sufficient for local registration.","cause":"The `JsonEditorVue` component was not successfully imported or registered in your Vue application before being used in the template.","error":"[Vue warn]: Failed to resolve component: JsonEditorVue"},{"fix":"Update your import statement to `import type { Mode } from 'vanilla-jsoneditor';` to correctly access the `Mode` type from its new location.","cause":"Attempting to access or import the `Mode` enum directly from `json-editor-vue` after its removal in v0.15.0.","error":"Property 'Mode' does not exist on type 'typeof import(\"json-editor-vue\")'"}],"ecosystem":"npm"}