Registry / web-framework / vue-json-views

vue-json-views

library1.3.0jsnpmunverified

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.

web-framework serialization

npm install vue-json-views

package ↗

INSTALL

IMPORT

SIG · VUE-JSON-VIEWS

vue-json-views

web-frameworkjavascriptv1.3.0

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.

jsonView

✓ import jsonView from 'vue-json-views'

✗ const jsonView = require('vue-json-views')

CommonJS 'require' syntax is not the idiomatic way to import in modern Vue (ESM) projects where this component is primarily used.

jsonView (component registration)

✓ export default { components: { jsonView } }

After importing, the component must be registered in your Vue component's `components` option to be used in the template as `<json-view>`.

window['vue-json-view'].default

✓ components: { jsonView: window['vue-json-view'].default }

✗ components: { jsonView: window['vue-json-view'] }

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.

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.

import { createApp } from 'vue'; import jsonView from 'vue-json-views'; const app = createApp({ components: { jsonView }, data() { return { // Example large JSON data for demonstration json: { id: 1, name: 'Product A', details: { price: 99.99, currency: 'USD', features: [ { key: 'material', value: 'plastic' }, { key: 'weight', value: '100g' }, { key: 'color', value: 'blue' } ], reviews: Array(500).fill(null).map((_, i) => ({ user: `User${i}`, rating: Math.floor(Math.random() * 5) + 1, comment: `Good product review ${i}` })) }, metadata: { createdAt: '2023-01-01', updatedAt: '2023-04-20' }, relatedProducts: Array(10).fill(null).map((_, i) => ({ id: i + 2, name: `Product ${String.fromCharCode(66 + i)}` })) } }; }, template: ` <div style="height: 500px; overflow: auto; border: 1px solid #ccc; padding: 10px;"> <h1>JSON Data Viewer</h1> <json-view :data="json" :closed="false" :deep="3" icon-style="triangle" theme="one-dark" :font-size="16" /> </div> ` }); app.mount('#app');

Debug

Known issues

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

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

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

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.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: json-view

The `json-view` component was used in the template but not properly registered with the Vue application or component.

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

TypeError: Cannot read properties of undefined (reading 'default') at <anonymous>

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.

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.

Upgrade

Version history

1.3.0latest on npm

Audit

Dependencies

vuerequiredRequired peer dependency as this is a Vue component.

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-json-views ↗