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
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
JsonTree
✓ import JsonTree from 'vue-json-tree'
✗ const JsonTree = require('vue-json-tree')
Primary import for bundlers like Webpack/Vite in Vue 2 projects. Typically registered globally or locally.
Global Component
✓ Vue.component('json-tree', JsonTree)
✗ app.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.
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>
Errors
Common errors & fixes
JSON.parse: unexpected character at line 1 column X of the JSON data
The string passed to the `raw` prop is not valid JSON and cannot be parsed.
fixValidate 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?
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.
fixFor 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. Audit
Dependencies
vuerequiredRuntime peer dependency for the Vue.js component framework. Specifically designed for Vue 2.