{"id":16928,"library":"vue-json-views","title":"Vue JSON Viewer Component","description":"vue-json-views is a Vue component designed for efficiently displaying large JSON data structures. Currently at version 1.3.0, its primary differentiator is optimized rendering performance, claiming fast load times for JSON files up to 1MB, which addresses common slowdowns experienced with other JSON viewer components when dealing with extensive node counts. The library provides fundamental viewing capabilities with several configurable options, including initial collapse state, display depth, theme selection (one-dark, vs-code), icon styles, font size, and line height. While a specific release cadence isn't documented, its version history suggests active maintenance. It aims to offer a performant and customizable solution for integrating JSON visualization directly into Vue applications, contrasting with heavier alternatives or those tied to other frameworks.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue-json-view","json-view","vue-json","json"],"install":[{"cmd":"npm install vue-json-views","lang":"bash","label":"npm"},{"cmd":"yarn add vue-json-views","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-json-views","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency as this is a Vue component.","package":"vue","optional":false}],"imports":[{"note":"CommonJS 'require' syntax is not the idiomatic way to import in modern Vue (ESM) projects where this component is primarily used.","wrong":"const jsonView = require('vue-json-views')","symbol":"jsonView","correct":"import jsonView from 'vue-json-views'"},{"note":"After importing, the component must be registered in your Vue component's `components` option to be used in the template as `<json-view>`.","symbol":"jsonView (component registration)","correct":"export default { components: { jsonView } }"},{"note":"When used in a non-engineered browser environment (e.g., via CDN), the component instance is typically exposed on the `window` object under `window['vue-json-view']` and requires accessing its `default` property for registration.","wrong":"components: { jsonView: window['vue-json-view'] }","symbol":"window['vue-json-view'].default","correct":"components: { jsonView: window['vue-json-view'].default }"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport jsonView from 'vue-json-views';\n\nconst app = createApp({\n  components: {\n    jsonView\n  },\n  data() {\n    return {\n      // Example large JSON data for demonstration\n      json: {\n        id: 1,\n        name: 'Product A',\n        details: {\n          price: 99.99,\n          currency: 'USD',\n          features: [\n            { key: 'material', value: 'plastic' },\n            { key: 'weight', value: '100g' },\n            { key: 'color', value: 'blue' }\n          ],\n          reviews: Array(500).fill(null).map((_, i) => ({ user: `User${i}`, rating: Math.floor(Math.random() * 5) + 1, comment: `Good product review ${i}` }))\n        },\n        metadata: {\n          createdAt: '2023-01-01',\n          updatedAt: '2023-04-20'\n        },\n        relatedProducts: Array(10).fill(null).map((_, i) => ({ id: i + 2, name: `Product ${String.fromCharCode(66 + i)}` }))\n      }\n    };\n  },\n  template: `\n    <div style=\"height: 500px; overflow: auto; border: 1px solid #ccc; padding: 10px;\">\n      <h1>JSON Data Viewer</h1>\n      <json-view\n        :data=\"json\"\n        :closed=\"false\"\n        :deep=\"3\"\n        icon-style=\"triangle\"\n        theme=\"one-dark\"\n        :font-size=\"16\"\n      />\n    </div>\n  `\n});\n\napp.mount('#app');","lang":"javascript","description":"This quickstart demonstrates how to import and register `vue-json-views` in a Vue 3 application, passing a complex JSON object as data. It showcases several configurable props like initial collapse state, display depth, icon style, theme, and font size. The example includes a large array within the JSON to highlight the component's performance focus."},"warnings":[{"fix":"Limit the `deep` prop to a reasonable value (e.g., 3-5) for optimal performance, especially with large datasets. Users can manually expand deeper nodes.","message":"The `deep` prop controls the initial expansion depth. Setting it to a very large value can negate performance benefits, especially with huge JSON objects, as more nodes will be rendered initially. The documentation recommends not exceeding a value of `5`.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Choose `font-size` and `line-height` values carefully and test thoroughly. For more extensive customization, consider the '二次开发' (secondary development) approach suggested in the README, which involves custom theme definitions or directly modifying the component's SVG icons.","message":"When customizing `font-size` and `line-height` props, other related UI elements such as icons and padding will not automatically scale. This can lead to visual inconsistencies or layout issues if extreme values are chosen.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always install using the full package name: `npm i -S vue-json-views`. The import statement `import jsonView from 'vue-json-views'` is correct.","message":"The npm package name is `vue-json-views` (plural 'views'), but the component is commonly imported as `jsonView` (singular). Ensure correct package installation with `npm i -S vue-json-views` to avoid 'package not found' errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"For minor customizations, consider using the provided theme and icon modification options. For significant changes, fork the repository or encapsulate the component in a wrapper to maintain a clearer upgrade path for the base `vue-json-views` package.","message":"The README suggests copying the uncompiled component directly into a project for customization. While this allows deep modifications, it disconnects the project from npm updates, potentially missing bug fixes, performance improvements, or new features from the official package.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `jsonView` is imported and then listed in the `components` option of your Vue component or app instance: `import jsonView from 'vue-json-views'; export default { components: { jsonView } }`.","cause":"The `json-view` component was used in the template but not properly registered with the Vue application or component.","error":"[Vue warn]: Failed to resolve component: json-view"},{"fix":"Verify the script for `vue-json-views` has loaded correctly in your HTML. When registering the component globally in a non-engineered project, use `jsonView: window['vue-json-view'].default` as shown in the documentation.","cause":"This error typically occurs in a browser environment when trying to access `window['vue-json-view'].default` if the script `build/index.js` (or CDN equivalent) hasn't fully loaded or the path is incorrect, or if you're trying to use `window['vue-json-view']` directly without the `.default` property for component registration.","error":"TypeError: Cannot read properties of undefined (reading 'default') at <anonymous>"}],"ecosystem":"npm","meta_description":null}