{"id":13515628,"url":"https://github.com/leezng/vue-json-pretty","last_synced_at":"2025-05-14T08:08:59.851Z","repository":{"id":25291626,"uuid":"103659869","full_name":"leezng/vue-json-pretty","owner":"leezng","description":"A JSON tree view component that is easy to use and also supports data selection.","archived":false,"fork":false,"pushed_at":"2024-09-13T02:07:38.000Z","size":2558,"stargazers_count":1340,"open_issues_count":25,"forks_count":133,"subscribers_count":13,"default_branch":"dev","last_synced_at":"2025-04-07T01:40:05.867Z","etag":null,"topics":["format","json","json-tree","pretty","tree","vue","vue-component","vue3"],"latest_commit_sha":null,"homepage":"https://leezng.github.io/vue-json-pretty","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leezng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-15T13:23:37.000Z","updated_at":"2025-04-06T06:59:56.000Z","dependencies_parsed_at":"2023-11-28T11:27:26.018Z","dependency_job_id":"c1c1c41d-3d68-4e2f-9a8e-3d31892fca85","html_url":"https://github.com/leezng/vue-json-pretty","commit_stats":{"total_commits":263,"total_committers":21,"mean_commits":"12.523809523809524","dds":0.5361216730038023,"last_synced_commit":"17ce791f5e2eb84522fe6e53c251d5b53946639f"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leezng%2Fvue-json-pretty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leezng%2Fvue-json-pretty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leezng%2Fvue-json-pretty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leezng%2Fvue-json-pretty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leezng","download_url":"https://codeload.github.com/leezng/vue-json-pretty/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247949386,"owners_count":21023318,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["format","json","json-tree","pretty","tree","vue","vue-component","vue3"],"created_at":"2024-08-01T05:01:13.752Z","updated_at":"2025-04-09T00:29:48.101Z","avatar_url":"https://github.com/leezng.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/leezng/vue-json-pretty\"\u003e\n    \u003cimg width=\"200\" src=\"./static/logo.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://github.com/leezng/vue-json-pretty\" target=\"_blank\"\u003eVue Json Pretty\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n\u003cp\u003eA Vue component for rendering JSON data as a tree structure.\u003c/p\u003e\n\u003cp\u003eNow it supports Vue3 at least. If you still use Vue2, see \u003ca href=\"https://github.com/leezng/vue-json-pretty/tree/1.x\"\u003e1.x\u003c/a\u003e.\u003c/p\u003e\n\n[![Build Status](https://travis-ci.org/leezng/vue-json-pretty.svg?branch=master)](https://travis-ci.org/leezng/vue-json-pretty)\n[![npm package](https://img.shields.io/npm/v/vue-json-pretty.svg)](https://www.npmjs.org/package/vue-json-pretty)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/leezng/vue-json-pretty/blob/master/LICENSE)\n[![Sizes](https://img.shields.io/bundlephobia/min/vue-json-pretty)](https://bundlephobia.com/result?p=vue-json-pretty)\n[![NPM downloads](http://img.shields.io/npm/dm/vue-json-pretty.svg?style=flat-square)](https://www.npmtrends.com/vue-json-pretty)\n[![Issues](https://img.shields.io/github/issues-raw/leezng/vue-json-pretty)](https://github.com/leezng/vue-json-pretty/issues)\n\n\u003c/div\u003e\n\n[![](./static/screenshot.png)](https://github.com/leezng/vue-json-pretty)\n\nEnglish | [简体中文](./README.zh_CN.md)\n\n## Features\n\n- As a JSON Formatter.\n- Written in TypeScript, support `d.ts`.\n- Support get item data from JSON.\n- Support big data.\n- Support editable.\n\n## Environment Support\n\n- Modern browsers, Electron and Internet Explorer 11 (with polyfills)\n- Server-side Rendering\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\" alt=\"Electron\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eElectron |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE11, Edge                                                                                                                                                                                                      | last 10 versions                                                                                                                                                                                                  | last 10 versions                                                                                                                                                                                              | last 10 versions                                                                                                                                                                                              | last 2 versions                                                                                                                                                                                                       |\n\n## Using NPM or Yarn\n\n```bash\n$ npm install vue-json-pretty --save\n```\n\n```bash\n$ yarn add vue-json-pretty\n```\n\n## Use Vue2\n\n```bash\n$ npm install vue-json-pretty@v1-latest --save\n```\n\n## Usage\n\nThe 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.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-json-pretty :data=\"{ key: 'value' }\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport VueJsonPretty from 'vue-json-pretty';\nimport 'vue-json-pretty/lib/styles.css';\n\nexport default {\n  components: {\n    VueJsonPretty,\n  },\n};\n\u003c/script\u003e\n```\n\n## Use Nuxt.js\n\n1. In `plugins/vue-json-pretty.js`\n\n```\nimport Vue from 'vue'\nimport VueJsonPretty from 'vue-json-pretty'\n\nVue.component(\"vue-json-pretty\", VueJsonPretty)\n```\n\n2. In `nuxt.config.js`\n\n```js\ncss: [\n  'vue-json-pretty/lib/styles.css'\n],\nplugins: [\n  '@/plugins/vue-json-pretty'\n],\n```\n\n## Props\n\n| Property                 | Description                                                                                                             | Type                              | Default |\n| ------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ------- |\n| data(v-model)            | JSON data, support v-model when use editable                                                                            | JSON object                       | -       |\n| collapsedNodeLength      | Objects or arrays which length is greater than this threshold will be collapsed                                         | number                            | -       |\n| deep                     | Paths greater than this depth will be collapsed                                                                         | number                            | -       |\n| showLength               | Show the length when collapsed                                                                                          | boolean                           | false   |\n| showLine                 | Show the line                                                                                                           | boolean                           | true    |\n| showLineNumber           | Show the line number                                                                                                    | boolean                           | false   |\n| showIcon                 | Show the icon                                                                                                           | boolean                           | false   |\n| showDoubleQuotes         | Show doublequotes on key                                                                                                | boolean                           | true    |\n| virtual                  | Use virtual scroll                                                                                                      | boolean                           | false   |\n| height                   | The height of list when using virtual                                                                                   | number                            | 400     |\n| itemHeight               | The height of node when using virtual                                                                                   | number                            | 20      |\n| selectedValue(v-model)   | Selected data path                                                                                                      | string, array                     | -       |\n| rootPath                 | Root data path                                                                                                          | string                            | `root`  |\n| nodeSelectable           | Defines whether a node supports selection                                                                               | (node) =\u003e boolean                 | -       |\n| selectableType           | Support path select, default none                                                                                       | `multiple` \\| `single`            | -       |\n| showSelectController     | Show the select controller                                                                                              | boolean                           | false   |\n| selectOnClickNode        | Trigger select when click node                                                                                          | boolean                           | true    |\n| highlightSelectedNode    | Support highlighting selected nodes                                                                                     | boolean                           | true    |\n| collapsedOnClickBrackets | Support click brackets to collapse                                                                                      | boolean                           | true    |\n| renderNodeKey            | render node key, or use slot #renderNodeKey                                                                             | ({ node, defaultKey }) =\u003e vNode   | -       |\n| renderNodeValue          | render node value, or use slot #renderNodeValue                                                                         | ({ node, defaultValue }) =\u003e vNode | -       |\n| editable                 | Support editable                                                                                                        | boolean                           | false   |\n| editableTrigger          | Trigger                                                                                                                 | `click` \\| `dblclick`             | `click` |\n| theme                    | Sets the theme of the component. Options are 'light' or 'dark', with dark mode enhancing visibility on dark backgrounds | `'light' \\| 'dark'`               | `light` |\n\n## Events\n\n| Event Name     | Description                              | Parameters                           |\n| -------------- | ---------------------------------------- | ------------------------------------ |\n| nodeClick      | triggers when click node                 | (node: NodeData)                     |\n| bracketsClick  | triggers when click brackets             | (collapsed: boolean, node: NodeData) |\n| iconClick      | triggers when click icon                 | (collapsed: boolean, node: NodeData) |\n| selectedChange | triggers when the selected value changed | (newVal, oldVal)                     |\n\n## Slots\n\n| Slot Name       | Description       | Parameters             |\n| --------------- | ----------------- | ---------------------- |\n| renderNodeKey   | render node key   | { node, defaultKey }   |\n| renderNodeValue | render node value | { node, defaultValue } |\n\n## Contributors\n\n\u003ca href=\"https://github.com/leezng/vue-json-pretty/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=leezng/vue-json-pretty\" /\u003e\n\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleezng%2Fvue-json-pretty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleezng%2Fvue-json-pretty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleezng%2Fvue-json-pretty/lists"}