Vue JSON Viewer Component

Common errors

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

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

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

Warnings

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

Install

• npm install vue-json-views npm
• yarn add vue-json-views yarn
• pnpm add vue-json-views pnpm

Imports

• jsonView
  wrong:

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

  correct:

  import jsonView from '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
  wrong:

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

  correct:

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

  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.

Quickstart

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