1.2.8 • Public • Published

A Vue component for rendering JSON data as a tree structure.

Now it supports Vue3 at least. If you still use Vue2, see 1.x.

Build Status npm package GitHub license Sizes NPM downloads Issues

English | 简体中文


  • As a JSON Formatter.
  • Written in TypeScript, support d.ts.
  • Support get item data from JSON.
  • Support big data.
  • Support editable.

Environment Support

  • Modern browsers, Electron and Internet Explorer 11 (with polyfills)
  • Server-side Rendering
IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari ElectronElectron
IE11, Edge last 10 versions last 10 versions last 10 versions last 2 versions

Using NPM or Yarn

$ npm install @juigorg/quae-quia --save
$ yarn add @juigorg/quae-quia

Use Vue2

$ npm install @juigorg/quae-quia@v1-latest --save


The CSS file is included separately and needs to be imported manually. You can either import CSS globally in your app (if supported by your framework) or directly from the component.

    <@juigorg/quae-quia :data="{ key: 'value' }" />

import VueJsonPretty from '@juigorg/quae-quia';
import '@juigorg/quae-quia/lib/styles.css';

export default {
  components: {

Use Nuxt.js

  1. In plugins/@juigorg/quae-quia.js
import Vue from 'vue'
import VueJsonPretty from '@juigorg/quae-quia'

Vue.component("@juigorg/quae-quia", VueJsonPretty)
  1. In nuxt.config.js
css: [
plugins: [


Property Description Type Default
data(v-model) JSON data, support v-model when use editable JSON object -
collapsedNodeLength Objects or arrays which length is greater than this threshold will be collapsed number -
deep Paths greater than this depth will be collapsed number -
showLength Show the length when collapsed boolean false
showLine Show the line boolean true
showLineNumber Show the line number boolean false
showIcon Show the icon boolean false
showDoubleQuotes Show doublequotes on key boolean true
virtual Use virtual scroll boolean false
height The height of list when using virtual number 400
itemHeight The height of node when using virtual number 20
selectedValue(v-model) Selected data path string, array -
rootPath Root data path string root
nodeSelectable Defines whether a node supports selection (node) => boolean -
selectableType Support path select, default none multiple | single -
showSelectController Show the select controller boolean false
selectOnClickNode Trigger select when click node boolean true
highlightSelectedNode Support highlighting selected nodes boolean true
collapsedOnClickBrackets Support click brackets to collapse boolean true
renderNodeKey render node key, or use slot #renderNodeKey ({ node, defaultKey }) => vNode -
renderNodeValue render node value, or use slot #renderNodeValue ({ node, defaultValue }) => vNode -
editable Support editable boolean false
editableTrigger Trigger click | dblclick click
theme Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds 'light' | 'dark' light


Event Name Description Parameters
nodeClick triggers when click node (node: NodeData)
bracketsClick triggers when click brackets (collapsed: boolean, node: NodeData)
iconClick triggers when click icon (collapsed: boolean, node: NodeData)
selectedChange triggers when the selected value changed (newVal, oldVal)


Slot Name Description Parameters
renderNodeKey render node key { node, defaultKey }
renderNodeValue render node value { node, defaultValue }




Package Sidebar


npm i @juigorg/quae-quia

Weekly Downloads






Unpacked Size

31.9 kB

Total Files


Last publish


  • tiengiangb47