https://github.com/grapoza/vue-tree
Tree components for Vue 3
https://github.com/grapoza/vue-tree
treeview vue vue-component
Last synced: 11 months ago
JSON representation
Tree components for Vue 3
- Host: GitHub
- URL: https://github.com/grapoza/vue-tree
- Owner: grapoza
- License: mit
- Created: 2018-12-16T01:41:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-11-22T04:15:19.000Z (over 2 years ago)
- Last Synced: 2024-04-25T06:02:47.265Z (about 2 years ago)
- Topics: treeview, vue, vue-component
- Language: JavaScript
- Homepage:
- Size: 155 MB
- Stars: 87
- Watchers: 5
- Forks: 11
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-tree
vue-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.
[](https://opensource.org/licenses/MIT)
[](https://ci.appveyor.com/project/Gregg/vue-tree/branch/master)
## Full Documentation
See 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.
## Installation
Install the component with your favorite package manager:
```shell
yarn add @grapoza/vue-tree
```
or
```shell
npm install --save @grapoza/vue-tree
```
or
```shell
bun add @grapoza/vue-tree
```
## Usage
If you're using it in a .vue file:
```html
// Options API
import { TreeView } from "@grapoza/vue-tree"
export default {
components: {
TreeView
},
data() {
return {
dataModel: [
{
id: "numberOrString",
label: "Root Node",
children: [
{id: 1, label: "Child Node"},
{id: "node2", label: "Second Child"}
]
}
]
}
}
}
// Composition API
import { TreeView } from "@grapoza/vue-tree"
const dataModel = ref([
{
id: "numberOrString",
label: "Root Node",
children: [
{id: 1, label: "Child Node"},
{id: "node2", label: "Second Child"}
]
}
])
```
Or, import it into your application:
```javascript
import { TreeView } from "@grapoza/vue-tree"
Vue.use(TreeView)
```
Then add the component:
```html
```
```javascript
export default {
data() {
return {
dataModel: [
{id: "numberOrString", label: "Root Node", children: [
{id: 1, label: "Child Node"},
{id: "node2", label: "Second Child"}]
}]
}
}
}
```