{"id":22489363,"url":"https://github.com/grapoza/vue-tree","last_synced_at":"2025-08-02T21:32:44.853Z","repository":{"id":33913911,"uuid":"161958566","full_name":"grapoza/vue-tree","owner":"grapoza","description":"Tree components for Vue 3","archived":false,"fork":false,"pushed_at":"2023-11-22T04:15:19.000Z","size":162511,"stargazers_count":87,"open_issues_count":19,"forks_count":11,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-25T06:02:47.265Z","etag":null,"topics":["treeview","vue","vue-component"],"latest_commit_sha":null,"homepage":"","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/grapoza.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2018-12-16T01:41:47.000Z","updated_at":"2024-04-10T18:23:56.000Z","dependencies_parsed_at":"2023-02-18T18:00:43.737Z","dependency_job_id":"25094ea5-3407-4040-8b46-0c9fe1bb462f","html_url":"https://github.com/grapoza/vue-tree","commit_stats":{"total_commits":179,"total_committers":4,"mean_commits":44.75,"dds":"0.13966480446927376","last_synced_commit":"42b35b91278f9e97e854dd1de909fe137f867b05"},"previous_names":[],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapoza%2Fvue-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapoza%2Fvue-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapoza%2Fvue-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grapoza%2Fvue-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grapoza","download_url":"https://codeload.github.com/grapoza/vue-tree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228500221,"owners_count":17930020,"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":["treeview","vue","vue-component"],"created_at":"2024-12-06T17:19:43.059Z","updated_at":"2025-08-02T21:32:44.759Z","avatar_url":"https://github.com/grapoza.png","language":"JavaScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# vue-tree\n\nvue-tree is a Vue component that implements a Tree View control. Its aim is to provide common tree options in a way that is easy to use and easy to customize.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Build status](https://ci.appveyor.com/api/projects/status/j8d19gt0vh16amhh/branch/master?svg=true)](https://ci.appveyor.com/project/Gregg/vue-tree/branch/master)\n\n## Full Documentation\n\nSee the full documentation over at the [project's Github Pages](https://grapoza.github.io/vue-tree/). This includes information on how to use and configure the tree view, features (both existing and planned) as well as some demos.\n\n##  Installation\n\nInstall the component with your favorite package manager:\n```shell\nyarn add @grapoza/vue-tree\n```\nor\n```shell\nnpm install --save @grapoza/vue-tree\n```\nor\n```shell\nbun add @grapoza/vue-tree\n```\n\n## Usage\n\nIf you're using it in a .vue file:\n\n```html\n\u003ctemplate\u003e\n  \u003cTreeView  id=\"my-tree\" v-model=\"dataModel\" /\u003e\n\u003c/template\u003e\n\n// Options API\n\u003cscript\u003e\nimport { TreeView } from \"@grapoza/vue-tree\"\n\nexport default {\n  components: {\n    TreeView\n  },\n  data() {\n    return {\n      dataModel: [\n        {\n          id: \"numberOrString\",\n          label: \"Root Node\",\n          children: [\n            {id: 1, label: \"Child Node\"},\n            {id: \"node2\", label: \"Second Child\"}\n          ]\n        }\n      ]\n    }\n  }\n}\n\u003c/script\u003e\n\n// Composition API\n\u003cscript setup\u003e\nimport { TreeView } from \"@grapoza/vue-tree\"\nconst dataModel = ref([\n  {\n    id: \"numberOrString\",\n    label: \"Root Node\",\n    children: [\n      {id: 1, label: \"Child Node\"},\n      {id: \"node2\", label: \"Second Child\"}\n    ]\n  }\n])\n\u003c/script\u003e\n```\n\nOr, import it into your application:\n\n```javascript\nimport { TreeView } from \"@grapoza/vue-tree\"\nVue.use(TreeView)\n```\nThen add the component:\n```html\n\u003cTreeView id=\"my-tree\" v-model=\"dataModel\" /\u003e\n```\n```javascript\nexport default {\n  data() {\n    return {\n      dataModel: [\n        {id: \"numberOrString\", label: \"Root Node\", children: [\n          {id: 1, label: \"Child Node\"},\n          {id: \"node2\", label: \"Second Child\"}]\n        }]\n    }\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrapoza%2Fvue-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrapoza%2Fvue-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrapoza%2Fvue-tree/lists"}