{"id":12514,"library":"vue-json-tree","title":"Vue JSON Tree","description":"vue-json-tree is a Vue 2 component designed to display JavaScript Object Notation (JSON) data in an interactive, collapsible tree structure. Currently at version 0.4.3, the package appears to have an irregular release cadence, indicative of a pre-1.0 project primarily maintained for existing Vue 2 applications. Its key differentiator lies in its straightforward integration within Vue 2 ecosystems, offering both string-based (`raw` prop) and pre-parsed object-based (`data` prop) input methods. This flexibility allows developers to easily visualize complex JSON structures, with options to control the initial expansion level. It focuses specifically on the display aspect, without editing capabilities, making it a lightweight solution for debugging or data inspection within Vue 2 applications.","status":"maintenance","version":"0.4.3","language":"javascript","source_language":"en","source_url":"https://github.com/myst729/vue-json-tree","tags":["javascript","vue","json","tree"],"install":[{"cmd":"npm install vue-json-tree","lang":"bash","label":"npm"},{"cmd":"yarn add vue-json-tree","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-json-tree","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency for the Vue.js component framework. Specifically designed for Vue 2.","package":"vue","optional":false}],"imports":[{"note":"Primary import for bundlers like Webpack/Vite in Vue 2 projects. Typically registered globally or locally.","wrong":"const JsonTree = require('vue-json-tree')","symbol":"JsonTree","correct":"import JsonTree from 'vue-json-tree'"},{"note":"After importing `JsonTree`, register it globally in your Vue 2 application. The `app.component` syntax is for Vue 3.","wrong":"app.component('json-tree', JsonTree)","symbol":"Global Component","correct":"Vue.component('json-tree', JsonTree)"},{"note":"Exposes `` component globally in the browser after Vue is loaded. Ensure the version in the URL matches your project's `vue-json-tree` version.","symbol":"Browser Global","correct":""}],"quickstart":{"code":"\n\n\n \n \n Vue JSON Tree Quickstart\n \n\n\n

Vue JSON Tree Demonstration

This example showcases the vue-json-tree component rendering a complex JSON object.

\n\n \n \n \n \n\n \n\n\n","lang":"html","description":"This quickstart demonstrates how to integrate and use `vue-json-tree` within a Vue 2 application using browser script tags, showcasing both `raw` (JSON string) and `data` (parsed object) props, along with initial collapse level for nested data."},"warnings":[{"fix":"Ensure your project uses Vue 2.x. For Vue 3, seek alternative JSON tree view components designed for Vue 3.","message":"vue-json-tree is built specifically for Vue 2. It is not compatible with Vue 3 due to breaking API changes in Vue's component system and reactivity model.","severity":"breaking","affected_versions":"all"},{"fix":"Always ensure the value passed to the `raw` prop is a `JSON.stringify()`'d object or a manually verified valid JSON string.","message":"The `raw` prop expects a valid JSON string. If the string is malformed, the component will fail to render the data and may throw a parsing error.","severity":"gotcha","affected_versions":"all"},{"fix":"Use `raw` if your data source is a string, or `data` if it's already a JavaScript object. Do not pass an object to `raw` or a string to `data`.","message":"Choose between the `raw` prop (for JSON strings) and the `data` prop (for pre-parsed JavaScript objects). Providing incorrect types or attempting to use both simultaneously can lead to unexpected rendering issues or errors.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Validate your JSON string before passing it to the `raw` prop. Use a JSON linter or `JSON.parse` in a try-catch block to debug invalid data.","cause":"The string passed to the `raw` prop is not valid JSON and cannot be parsed.","error":"JSON.parse: unexpected character at line 1 column X of the JSON data"},{"fix":"For Vue 2, ensure `Vue.component('json-tree', JsonTree)` is called globally, or import and register it locally within your component's `components` option. If using Vue 3, this component is incompatible; find a Vue 3-native alternative.","cause":"The `json-tree` component was not registered with your Vue instance, or you are trying to use it in a Vue 3 application without a compatibility layer.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"}],"ecosystem":"npm"}