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

Overview

Vue Json Pretty

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 | 简体中文

Features

  • As a JSON Formatter.
  • Get item data from JSON.
  • Written in TypeScript with predictable static types.
  • Support big data.

Environment Support

  • Modern browsers, Electron and Internet Explorer 11 (with polyfills)
  • Server-side Rendering
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 10 versions last 10 versions last 10 versions last 2 versions

Using NPM or Yarn

$ npm install vue-json-pretty --save
$ yarn add vue-json-pretty

Use Vue3

$ npm install [email protected] --save

Usage

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.

">
<template>
  <div>
    <vue-json-pretty :path="'res'" :data="{ key: 'value' }" @click="handleClick"> vue-json-pretty>
  div>
template>

<script>
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';

export default {
  components: {
    VueJsonPretty,
  },
};
script>

Use Nuxt.js

  1. In plugins/vue-json-pretty.js
import Vue from 'vue'
import VueJsonPretty from 'vue-json-pretty'

Vue.component("vue-json-pretty", VueJsonPretty)
  1. In nuxt.config.js
css: [
  'vue-json-pretty/lib/styles.css'
],
plugins: [
  '@/plugins/vue-json-pretty'
],

Props

  • If you are using only the normal features (JSON pretty), just focus on the base properties.
  • If you are using higher features (Get data), you can use base and higher attributes.
Attribute Level Description Type Default
data normal JSON data JSON object -
deep normal Data depth, data larger than this depth will not be expanded number Infinity
deepCollapseChildren normal Whether children collapsed by deep prop should also be collapsed boolean false
showLength normal Whether to show the length when closed boolean false
showLine normal Whether to show the line boolean true
showDoubleQuotes normal Whether to show doublequotes on key boolean true
virtual normal Whether to use virtual scrolling, usually used for big data boolean false
itemHeight normal The height of each item when using virtual scrolling number auto
v-model higher Defines value when the tree can be selected string, array -
path higher Root data path string root
pathSelectable higher Defines whether a data path supports selection function(path, content) -
selectableType higher Defines the selected type, this feature is not supported by default multiple, single -
showSelectController higher Whether to show the select controller at left boolean false
selectOnClickNode higher Whether to change selected value when click node boolean true
highlightSelectedNode higher Highlight current node when selected boolean true
collapsedOnClickBrackets higher Collapsed control boolean true
customValueFormatter higher A function that can return different html or strings to display for values in the data. function(data, key, path, defaultFormatResult) -

Events

Event Name Description Callback Parameters
click triggered when a data item is clicked (path, data)
change triggered when the selected value changed (only the selectableType not null) (newVal, oldVal)

Major Contributors

Comments
  • feature/show-line-number

    feature/show-line-number

    extension and fix of: https://github.com/leezng/vue-json-pretty/pull/48

    Due to the recursive nature of the project I was able to accurately track the line number by passing an array and incrementing it as each line is added to the stack.

    The hard part was getting the correct line number when items are popped off the stack before displaying closing brackets such as } and ]. I handled these by grabbing the most recent line number from the $refs and re-incrementing and passing a new recursiveLineCount array for any continuation of closing brackets, while also incrementing the lineCount array so when opening brackets returns the count remains accurate.

    Handled a few edge cases and tests. Would like to see more testing.

    Note: This prop does not work with the selectable prop, will need to adjust styling.

    A little jenky because of the recursive nature, but it is accurate and a starting point to go off from.

    opened by nkreiger 12
  • feat Add support for server-side-rendering (Nuxt support)

    feat Add support for server-side-rendering (Nuxt support)

    This changes the order the styles are loaded so it can break users overrides. Overrides will need to have !important or higher specificity.

    Resolves #11

    opened by rchl 8
  • Feature Request: showLineNumber

    Feature Request: showLineNumber

    Hi, I always use vue-json-pretty component to render beautiful JSON data.

    In my opinion, it should show line number of JSON data as option. Is it interesting or useful? Please, let me know your ideas and comments.

    Thank you, World

    feature 
    opened by runyasak 8
  • Can't follow the example with Vue3

    Can't follow the example with Vue3

    I tried following the example with Vue3, installed with npm install [email protected] --save here's the code

    <template>
      <div>
        <vue-json-pretty :path="'res'" :data="{ key: 'value' }"> </vue-json-pretty>
      </div>
    </template>
    
    <script>
    import VueJsonPretty from "vue-json-pretty";
    import "vue-json-pretty/lib/styles.css";
    
    export default {
      components: {
        VueJsonPretty,
      },
    };
    </script>
    

    It keeps throwing these errors

    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
        at Proxy.<anonymous> (vue-json-pretty.js:1:9751)
        at renderComponentRoot (runtime-core.esm-bundler.js:893:44)
        at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5030:57)
        at ReactiveEffect.run (reactivity.esm-bundler.js:167:25)
        at setupRenderEffect (runtime-core.esm-bundler.js:5156:9)
        at mountComponent (runtime-core.esm-bundler.js:4939:9)
        at processComponent (runtime-core.esm-bundler.js:4897:17)
        at patch (runtime-core.esm-bundler.js:4489:21)
        at mountChildren (runtime-core.esm-bundler.js:4685:13)
        at mountElement (runtime-core.esm-bundler.js:4594:17)
    

    and other warnings about "was accessed but not defined

    Could you help please?

    opened by phootip 7
  • [2.0.3] Vue module not found while building app

    [2.0.3] Vue module not found while building app

    Hi,

    I am using the library with quasar v2 (using vuejs 3).

    By default the library is blocking the build :

     App • Chaining "UI" Webpack config
     App • Cleaned build artifact: "~/myproject/dist/spa"
     App •  WAIT  • Compiling of "UI" in progress...
     App •  DONE  • "UI" compiled with errors • 28923ms
    
     App •  ERROR  •  UI  in ./node_modules/vue-json-pretty/lib/vue-json-pretty.js
    
    Module not found: Can't resolve imported dependency "Vue"
    Did you forget to install it? You can run: npm install --save Vue
    
    
     App •  COMPILATION FAILED  • Please check the log above for details.
    

    I have to add this configuration in my quasar configuration in order to solve the problem, by creating a alias Vue for the vue library :

    chain.resolve.alias.set('Vue', 'vue')
    

    I don't feel that is is a good way.

    Regards,

    opened by LeYom 6
  • New release?

    New release?

    Could you please release a new version with the latest changes?

    I just noticed that it has a change that would make a difference for me. Namely removing whitespace around string values (https://github.com/leezng/vue-json-pretty/commit/15d8ff7e5229ede92f8f139347e4204784cba98b#diff-7a5275c00fd81236fde90a0ce0f491f1R4).

    opened by rchl 6
  • ssr rendering errors with 1.9.0 (vue 2)

    ssr rendering errors with 1.9.0 (vue 2)

    since the latest release (1.9.0) we have two errors which makes the app unusable:

    DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

    TypeError: Cannot read properties of undefined (reading '$scopedSlots')

    both of them occur at the same time, and it seems it has something to do with a "comment" block. the renderes (ssr) html of it is: image

    the problematic line according to the .appendChild error is the <!-- > in the 3rd block, block 1 & 2 also have the comment in there, but somehow it's not an issue here?

    the json we format is nothing special:

    {
            email: '[email protected]',
            firstName: 'NameObfuscated',
            lastName: 'LastNameObfucstaed',
            phone: '+46...numberOnlyObfocusated'
        } 
    
    opened by simllll 5
  • Extend keys functionality

    Extend keys functionality

    Hi, thanks for the great project..

    I am looking to add some functionality that is not currently supported. I want to be able to distinguish different JSON key s... I want to do something like this...

    <div @mousedown="onMouseDown">
       <vue-json-pretty :data="{ key: {test:  'value' } }"> </vue-json-pretty>
    </div>
    
    onMouseDown(e) {
      if (e.target.classList.contains('vjs-key')) {
        console.log(e.dataset.path); // ["key"]["test"] if clicking on test key
      }
    }
    

    There's a few different approaches to do this:

    1. Could add slot to render key
    2. Could add a prop like customValueFormatter
    3. Could add native support for this in the library

    Happy to contribute implementation of this if we can agree on an approach

    feature good first issue 
    opened by mutdmour 5
  • 【Security】vue-json-pretty has xss vulnerability

    【Security】vue-json-pretty has xss vulnerability

    My Local environment vue-json-pretty 1.8.2 it is vuejs library lastest

    this is demo

    <template>
      <div>
        <div>
          <vue-json-pretty :deep="3" :data="testdata" show-line="false" />
        </div>
      </div>
    </template>
    
    <script>
    import VueJsonPretty from 'vue-json-pretty'
    import 'vue-json-pretty/lib/styles.css'
    
    export default {
      components: { VueJsonPretty },
      data() {
        return {
          testdata: '{ a: "\r\n<img/src=x onerror=prompt(x)>" }'
        }
      }
    }
    

    then you can see this image

    This problem also exists, but it does not exist by default, but you need to turn on use custom formatter

    image

    bug 
    opened by liode1s 5
  • Possible to use this from CDN?

    Possible to use this from CDN?

    I'm using CDN implementation for Vue 3 and would like to include your component also using CDN (https://www.jsdelivr.com/package/npm/vue-json-pretty?version=2.0.2).

    How might I do this?

    bug 
    opened by dsottimano 5
  • #109 Prop to set visibleCount number of lines in virtual mode

    #109 Prop to set visibleCount number of lines in virtual mode

    PR Related to issue #109

    This adds 2 props to the tree. virtualLines and autoHeight Virtual lines sets the number of items in the virtual list. Auto Height will set the height of the virtual list container, based on the number of items.

    This does however mean that if a user doesn't get autoHeight, they must style the container to have a height.

    I have also updated the VirtualList.vue example, so show the new props.

    opened by LukeFinch 5
  • Would be nice to have a control on a path creation

    Would be nice to have a control on a path creation

    Updated!

    I would like to determine the element of the array by its "id" instead of its position number, which may vary in unsorted arrays.

    Like in the JsonPath example

    book[?(@.author=='J.R.R. Tolkien')].title
    

    instead of

    book[0].title
    

    Is that possible to create a new option/or use an existing one to have such control over a path creation? Unfortunately, I am no js developer, but if the team says that such an option is possible, I will try to make a PR for that.

    Thank you.

    opened by tpoxa 0
  • Dynamic Width for Editing Long Text Entries

    Dynamic Width for Editing Long Text Entries

    Is it possible to increase the width of the Space during Editing, that could help User to navigate through long texts easily.

    To recreate this Issue :- enter very long statement with editable prop set as True along with desired editableTrigger image Expected Response :- Editing space would be large enough to navigate through long text entries.

    Current Response :- Current Editing Space allows up to 3-4 words of average lengths. image

    improve 
    opened by PiseAtharva 0
Releases(v2.2.3)
  • v2.2.3(Nov 2, 2022)

    What's Changed

    • fix: show null and explicit undefined values by @cstuncsik in #210
    • fix: Dynamic left padding on collapse elements. #216

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v2.2.2...v2.2.3

    Source code(tar.gz)
    Source code(zip)
  • v1.9.3(Nov 2, 2022)

    What's Changed

    • fix: show null and explicit undefined values by @cstuncsik in https://github.com/leezng/vue-json-pretty/pull/207
    • fix: Dynamic left padding on collapse elements. #200

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v1.9.2...v1.9.3

    Source code(tar.gz)
    Source code(zip)
  • v2.2.2(Aug 28, 2022)

    What's Changed

    • feat: support slot nodeKey. by @mutdmour in https://github.com/leezng/vue-json-pretty/pull/195
    • fix: node path parsing does not consider special characters. #198

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v2.2.1...v2.2.2

    Source code(tar.gz)
    Source code(zip)
  • v1.9.2(Aug 28, 2022)

    What's Changed

    • feat: support slot nodeKey. #195
    • fix: node path parsing does not consider special characters. #192

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v1.9.1...v1.9.2

    Source code(tar.gz)
    Source code(zip)
  • v1.9.1(Aug 19, 2022)

    What's Changed

    • fix: handle optional-chaining & nullish-coalescing-operator on production environment. by @leezng in https://github.com/leezng/vue-json-pretty/pull/191

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v1.9.0...v1.9.1

    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Aug 16, 2022)

    What's Changed

    • feat: support carets, add showIcon prop by @leezng in https://github.com/leezng/vue-json-pretty/pull/178
    • feat: support value editable by @leezng in https://github.com/leezng/vue-json-pretty/pull/179 (use v-model:data) #169
    • chore: don't bind scroll event in non-virtual mode by @mawi1512 in https://github.com/leezng/vue-json-pretty/pull/181
    • chore(deps): bump moment from 2.29.3 to 2.29.4 by @dependabot in https://github.com/leezng/vue-json-pretty/pull/184
    • fix: the value won't start a new line automatically #133
    • fix: itemHeight not working. (support height & itemHeight) #177
    • chore: optimize json flat performance. #138 (JSON parsing efficiency is 40 times higher than before)
    • feat: support showLineNumber. #35
    • feat: support renderNodeValue slot and prop. #83 (old prop customValueFormatter will no longer be used)
    • feat: event for brackets open/close #90

    Props Breaking Changed: change path to rootPath, change pathSelectable to nodeSelectable, when using node selection functionality, use v-model:selectedValue for two-way binding.

    New Contributors

    • @mawi1512 made their first contribution in https://github.com/leezng/vue-json-pretty/pull/181

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v2.1.1...v2.2.0

    Source code(tar.gz)
    Source code(zip)
  • v1.9.0(Aug 14, 2022)

    What's Changed

    • fix: cannot select a previously selected field when use single selectableType. #120
    • fix: the value won't start a new line automatically #133
    • fix: itemHeight not working. (support height & itemHeight) #177
    • chore: optimize json flat performance. #138
    • feat: support showIcon & showLineNumber. #169 #35
    • feat: support editable. (v-model is mounted to the data prop) #81
    • feat: support nodeValue slot. (old prop customValueFormatter will no longer be used)
    • feat: event for brackets open/close #90

    Props Breaking Changed: change path to rootPath, change pathSelectable to nodeSelectable, when using node selection functionality, use selectedValue.sync for two-way binding.

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v1.8.3...v1.9.0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Jun 27, 2022)

    What's Changed

    • fix: A path problem when the library generates .d.ts. by @leezng in https://github.com/leezng/vue-json-pretty/pull/172
    • release by @leezng in https://github.com/leezng/vue-json-pretty/pull/175

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v2.1.0...v2.1.1

    Source code(tar.gz)
    Source code(zip)
  • v1.8.3(May 17, 2022)

    What's Changed

    • fix: missing comma in #149
    • fix: update dev dependencies in #160
    • fix: xss vulnerability by @souljorje in https://github.com/leezng/vue-json-pretty/pull/164
    • fix: value class with custom formatter & comma handling (1.x) by @souljorje in https://github.com/leezng/vue-json-pretty/pull/166

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/1.8.2...v1.8.3

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(May 17, 2022)

    What's Changed

    • feat: support collapsePath prop by @hsiaosiyuan0 in https://github.com/leezng/vue-json-pretty/pull/151
    • fix: xss vulnerability by @souljorje in https://github.com/leezng/vue-json-pretty/pull/163
    • fix: update dev dependencies in #160
    • release by @leezng in https://github.com/leezng/vue-json-pretty/pull/167

    New Contributors

    • @hsiaosiyuan0 made their first contribution in https://github.com/leezng/vue-json-pretty/pull/151

    Full Changelog: https://github.com/leezng/vue-json-pretty/compare/v2.0.6...v2.1.0

    Source code(tar.gz)
    Source code(zip)
  • v2.0.6(Nov 11, 2021)

  • v2.0.4(Aug 18, 2021)

    • Fixed: webpack external config error. #123
    • Fixed: No flat, for compatibility. #117
    • Fixed: commonjs external error. Don't use v2.0.3. #129
    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Aug 5, 2021)

  • 1.8.1(Jul 4, 2021)

  • 1.8.0(Apr 25, 2021)

    • Support big data.
    • Remove Props: highlightMouseoverNode, pathChecked.
    • Prop definition changes: Changed from function(data, key, path, defaultFormatResult) to function(data, key, path, defaultFormatResult).
    Source code(tar.gz)
    Source code(zip)
  • 2.0.2(Jan 10, 2021)

  • 2.0.0(Dec 13, 2020)

    • Breaking Change: Compatible with Vue3.

    • Written in TypeScript with predictable static types.

    • Support big data.

      • Remove Props: highlightMouseoverNode, pathChecked.
      • Prop definition changes: Changed from function(data, key, path, defaultFormatResult) to function(data, key, path, defaultFormatResult).
    Source code(tar.gz)
    Source code(zip)
  • v1.7.1(Oct 19, 2020)

    • fix: When there is a . Character on the path, an error occurs when parsing the path. closed #63
    • fix: Commas should not be highlighted by default.
    Source code(tar.gz)
    Source code(zip)
  • v1.7.0(Oct 9, 2020)

  • v1.6.7(Aug 3, 2020)

  • v1.6.5(Jul 5, 2020)

  • v1.6.4(Jul 1, 2020)

  • v1.6.3(Dec 21, 2019)

  • v1.6.2(Aug 31, 2019)

  • v1.6.1(Aug 25, 2019)

    • The click event of the child node does not stopPropagation, so that user can listen the native click event(Temporarily solved by uid, and then proceed to improve).
    • Some devDependencies upgrades.
    Source code(tar.gz)
    Source code(zip)
  • v1.6.0(Mar 31, 2019)

    Why is it 1.6? Because I have added a lot of new attributes, and at the same time modified the existing selection methods, unified into single, multiple or pure display (no need to select), which brings some changes in attribute values. I think this is a jump, so I skipped 1.5.

    • I have unified the selection specification, and the selectableType only supports: single|multiple|""(default).
    • Add radio selector.
    • Add v-model to define the value when the tree can be selected.
    • Add prop "showDoubleQuotes" to configure whether display doublequotes on key(default: true). #17
    • Add prop "highlightSelectedNode" to highlight the selected item. #19
    • Add prop "highlightMouseoverNode" to highlight the item when mouseover.
    • Add prop "showLine" to configure whether the indented lines are displayed.
    • Add class "vjs-key", "vjs-value" to node so you can customize the style. #20
    • Add prop "showSelectController" to configure whether the selectors are displayed.
    • Add prop "selectOnClickNode" to configure whether click-node events affect selection changes.
    • Update the minimum compatible version of vue to 2.5.0, because I use the new Lifecycle Hooks called errorCaptured.
    • Fixed showLength attribute performance error.
    Source code(tar.gz)
    Source code(zip)
  • v1.4.1(Aug 26, 2018)

  • v1.4.0(Jul 22, 2018)

  • v1.3.5(May 31, 2018)

  • v1.3.4(Feb 1, 2018)

Owner
Daniel
Front-end Developer
Daniel
A Vue.js component for conditional rendering attributes and directives.

vue-conditional-attrs A Vue.js component for conditional rendering attributes and directives. Install Via npm npm instal vue-conditional-attrs --save

null 5 Oct 14, 2022
Download your JSON data as an XLS or CSV file directly from the browser

JSON to Excel for VUE 2 Download your JSON data as an Excel file directly from the browser. This component is based on the solution proposed on this t

DockerLead 0 Aug 17, 2021
Vue directive for conditional rendering element on screen smaller than breakpoints

vue-not-visible Vue directive for conditional rendering (like v-if) element on screen smaller than breakpoints; ?? Demo Install $ npm install --save v

Yuriy Panarin 23 Feb 16, 2021
Vue Reactivity with Fine-Grained Rendering

VueRX JSX This library is a demonstration of how Vue's Reactivity system can be leveraged directly in JSX for considerably better performance than pai

Ryan Carniato 59 Dec 30, 2022
JSON to Excel for VUE 2

Download your JSON data as an excel file directly from the browser.

Ihsanuddin 0 Sep 21, 2020
🕶 Vue Composition API for automatic fetch data when condition has been changed

vue-condition-watcher ?? Introduction Vue Composition API for automatic fetch data when condition has been changed Features ✔ Auto fetch data when con

Willy Hong 42 Dec 5, 2022
Vue mixin that maps props to local data

Props To Local Works with: This mixin will sync down properties to local data. This allows defining a property that can be changed within the componen

Cristian Pallarés 6 Jan 2, 2022
Async data loading plugin for Vue.js

Async data loading plugin for Vue.js

vuejs 420 Nov 24, 2022
↔ Vue component that scales its child node in relation to its parent node's width

vue-responsive-text Vue component that scales its child node in relation to its parent node's width Installation Install the package from npm by runni

William Lindvall 23 Aug 12, 2022
A series of useful enhancements to Vue component props.

Vue Messenger A series of useful enhancements to Vue components props: Transform props Enum-type props Numeric-type props Listen for receiving props T

Jay Fong 49 Jul 10, 2022
Component and HTML unique id generation plugin for Vue.js

vue-unique-id Vue.js plugin that generates component-scoped HTML identifiers for use in form inputs, labels, jQuery plugins, etc. This solves the prob

Bertrand Guay-Paquet 47 Nov 23, 2022
A simple Vue.js wrapper component for paypal-checkout

vue-paypal-checkout Deprecated Please use the official PayPal Checkout Components: https://github.com/paypal/paypal-checkout-components A simple Vue.j

Khoa Nguyen 152 Dec 14, 2022
Easy to use Vue component for Plaid Link

vue-plaid-link A simple Vue component for easy integration with the Plaid Link drop-in module Install npm install vue-plaid-link --save Example Usage

RoundUp App 30 Nov 14, 2022
CLI util for easy generate Vue js component

Vue js component generator CLI util for easy generate Vue js component Installation npm install -g vue-generate-component-typescript Usage vgc --help

Kamar MEDDAH 6 May 29, 2021
Loads a .vue file from the given URL and compiles it to a component directly in the browser.

VueInBrowserLoader Inspired by Franck Freiburger's http-vue-loader. VueInBrowserLoader(url) Loads a .vue file from the given URL and compiles it to a

Sergej Sintschilin 7 Jun 29, 2021
A component to demo components, inspired by react-live

vue-live A lightweight playground for live editing VueJs code in the browser Usage The simplest way to render components is as a VueJs template: <temp

Vue Styleguidist 187 Dec 26, 2022
A plug-in that imports component library styles on demand

vite-plugin-style-import English | 中文 A plug-in that imports component library styles on demand Why only import styles Because vite itself has importe

Vben 361 Jan 6, 2023
Simple VueJS component to parse XLS/CSV files with validation

Simple Vue XLS/CSV parser Description This npm package is based on https://github.com/victorboissiere/vue-xls-csv-parser The objective for this librar

Dan Groza 0 Nov 27, 2018
Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Internationalization plugin for Vue.js - fluent-vue is Vue.js integration for Fluent.js

Ivan Demchuk 164 Dec 28, 2022