{"id":13901448,"url":"https://github.com/fitzhavey/vue-json-tree-view","last_synced_at":"2025-05-15T14:06:56.848Z","repository":{"id":17582161,"uuid":"82283573","full_name":"fitzhavey/vue-json-tree-view","owner":"fitzhavey","description":"A JSON Tree View Component for Vue.js","archived":false,"fork":false,"pushed_at":"2025-02-15T00:29:02.000Z","size":1490,"stargazers_count":478,"open_issues_count":1,"forks_count":80,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-12T09:13:14.638Z","etag":null,"topics":["javascript","javascript-library","json-tree","tree","vue","vue-json-tree","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"https://devblog.digimondo.io/building-a-json-tree-view-component-in-vue-js-from-scratch-in-six-steps-ce0c05c2fdd8#.dkwh4jo2m","language":"Vue","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/fitzhavey.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-02-17T10:01:14.000Z","updated_at":"2025-04-22T03:06:05.000Z","dependencies_parsed_at":"2023-07-12T14:51:39.023Z","dependency_job_id":"66fd59b9-9f2b-4b83-b4d5-2008c422188c","html_url":"https://github.com/fitzhavey/vue-json-tree-view","commit_stats":{"total_commits":109,"total_committers":19,"mean_commits":"5.7368421052631575","dds":0.7614678899082569,"last_synced_commit":"49ef1196b20015793198fa07fc249d7f72f95b89"},"previous_names":["michaelfitzhavey/vue-json-tree-view","arvidkahl/vue-json-tree-view"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzhavey%2Fvue-json-tree-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzhavey%2Fvue-json-tree-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzhavey%2Fvue-json-tree-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fitzhavey%2Fvue-json-tree-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fitzhavey","download_url":"https://codeload.github.com/fitzhavey/vue-json-tree-view/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254355335,"owners_count":22057354,"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":["javascript","javascript-library","json-tree","tree","vue","vue-json-tree","vuejs","vuejs2"],"created_at":"2024-08-06T21:01:24.067Z","updated_at":"2025-05-15T14:06:51.835Z","avatar_url":"https://github.com/fitzhavey.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Vue JSON Tree View\n\n![a demonstration](https://raw.githubusercontent.com/arvidkahl/vue-json-tree-view/master/header.png)\n\n## Demo and Blogpost\n\nYou can check out the [demo](https://jsfiddle.net/arvidkahl/kwo6vk9d/11/) on JSFiddle and read the Blogpost called [Building a JSON Tree View Component in Vue.js from Scratch in Six Steps](http://brianyang.com/building-a-json-tree-view-component-in-vue-js-from-scratch-in-six-steps) that lead to the creation of this library.\n\n##  Installation\n\nInstall the plugin with npm:\n```shell\nnpm install --save vue-json-tree-view\n```\n\nThen, in your Application JavaScript, add:\n```javascript\nimport TreeView from \"vue-json-tree-view\"\nVue.use(TreeView)\n```\n\nDone.\n\n## Usage\n\nPut the `tree-view` element into your  HTML where you want the Tree View to appear.\n```html\n\u003cdiv\u003e\n  \u003ctree-view :data=\"jsonSource\" :options=\"{maxDepth: 3}\"\u003e\u003c/tree-view\u003e\n\u003c/div\u003e\n```\n\n## Props\n\n#### `data`\n\nThe JSON to be displayed. Expects a valid JSON object.\n\n#### `options`\n\nThe defaults are:\n```\n{\n  maxDepth: 4,\n  rootObjectKey: \"root\",\n  modifiable: false,\n  link: false,\n  limitRenderDepth: false\n}\n```\n- maxDepth: The maximum number of levels of the JSON Tree that should be expanded by default. Expects an Integer from 0 to Infinity.\n- rootObjectKey: the name of the Root Object, will default to `root`.\n- modifiable: To modify the json value.\n- link: URL strings will appear as clickable links (unless `modifiable=\"true\"`).\n- limitRenderDepth: maximum number of nodes that should be rendered (for very large JSONs)\n\n## Event\n\n#### updated json data\nIf `modifiable` is true and you want to take the updated json data, you must register event handler as `v-on:change-data=...`. Only one argument is passed that is updated data - `data`.\n```html\n\u003cdiv\u003e\n  \u003ctree-view :data=\"jsonSource\" :options=\"{modifiable: true}\" @change-data=\"onChangeData\"\u003e\u003c/tree-view\u003e\n\u003c/div\u003e\n\n// in your vue code\n  ...\n  methods: {\n    onChangeData: function(data) {\n      console.log(JSON.stringify(data))\n    }\n  },\n  ...\n\n```\n\n\n## Custom Styling\n\nAll leaves will have their type indicated as a CSS class, like `tree-view-item-value-string`. Supported types: String, Number, Function, Boolean and Null Values.\n\nKeys can also be styled. For instance to make labels red:\n```\n.tree-view-item-key {\n    color: red;\n}\n```\n\n## Contributing\nContributions to this repo are very welcome as they are what has helped it become what it is today. Simply raise an issue with new ideas or submit a pull request.\n\nA github action automatically deploys changes when they are merged into the master branch.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitzhavey%2Fvue-json-tree-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffitzhavey%2Fvue-json-tree-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffitzhavey%2Fvue-json-tree-view/lists"}