Vue JSON Tree

0.4.3 · maintenance · verified Sun Apr 19

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.

Common errors

```
JSON.parse: unexpected character at line 1 column X of the JSON data
```
cause The string passed to the `raw` prop is not valid JSON and cannot be parsed.

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.
```
[Vue warn]: Unknown custom element: <json-tree> - did you register the component correctly?
```
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.

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.

Warnings

breaking 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.
Fix: Ensure your project uses Vue 2.x. For Vue 3, seek alternative JSON tree view components designed for Vue 3.
gotcha 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.
Fix: Always ensure the value passed to the `raw` prop is a `JSON.stringify()`'d object or a manually verified valid JSON string.
gotcha 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.
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`.

Install

npm install vue-json-tree npm
yarn add vue-json-tree yarn
pnpm add vue-json-tree pnpm

Imports

JsonTree
wrong:
```
const JsonTree = require('vue-json-tree')
```
correct:
```
import JsonTree from 'vue-json-tree'
```
Primary import for bundlers like Webpack/Vite in Vue 2 projects. Typically registered globally or locally.
Global Component
wrong:
```
app.component('json-tree', JsonTree)
```
correct:
```
Vue.component('json-tree', JsonTree)
```
After importing `JsonTree`, register it globally in your Vue 2 application. The `app.component` syntax is for Vue 3.
Browser Global
```
<script src="https://unpkg.com/vue-json-tree@0.4.1/dist/json-tree.js"></script>
```
Exposes `<json-tree>` component globally in the browser after Vue is loaded. Ensure the version in the URL matches your project's `vue-json-tree` version.

Quickstart

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue JSON Tree Quickstart</title>
  <style>
    body { font-family: sans-serif; margin: 20px; }
    #app { border: 1px solid #eee; padding: 15px; border-radius: 5px; max-width: 600px; margin-top: 20px; }
  </style>
</head>
<body>
  <h1>Vue JSON Tree Demonstration</h1>
  <p>This example showcases the <code>vue-json-tree</code> component rendering a complex JSON object.</p>
  <div id="app"></div>

  <!-- Include Vue 2 -->
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <!-- Include vue-json-tree -->
  <script src="https://unpkg.com/vue-json-tree@0.4.1/dist/json-tree.js"></script>

  <script>
    new Vue({
      template: `
        <div>
          <h2>Product Catalog Data</h2>
          <json-tree :raw="catalogData" :level="1"></json-tree>
          <hr>
          <h2>User Profile Data</h2>
          <json-tree :data="userData"></json-tree>
        </div>
      `,
      el: '#app',
      data: {
        catalogData: JSON.stringify({
          products: [
            {
              id: "P001",
              name: "Laptop Pro X15",
              category: "Electronics",
              price: 1200.00,
              features: ["16GB RAM", "512GB SSD", "Intel i7"],
              available: true,
              manufacturer: {
                name: "TechCorp",
                country: "USA"
              },
              reviews: [
                { user: "Alice", rating: 5, comment: "Fantastic machine!" },
                { user: "Bob", rating: 4, comment: "Good, but a bit pricey." }
              ]
            },
            {
              id: "P002",
              name: "Wireless Earbuds",
              category: "Accessories",
              price: 89.99,
              features: ["Bluetooth 5.0", "Noise Cancelling"],
              available: false,
              manufacturer: {
                name: "AudioTech",
                country: "China"
              }
            }
          ],
          lastUpdated: new Date().toISOString()
        }, null, 2),
        userData: {
          username: "developer_user",
          email: "dev@example.com",
          roles: ["admin", "editor"],
          settings: {
            theme: "dark",
            notifications: {
              email: true,
              push: false
            }
          },
          lastActivity: new Date().toISOString(),
          preferences: {
            language: "en-US",
            timezone: "UTC"
          }
        }
      }
    });
  </script>
</body>
</html>

view raw JSON →