https://github.com/n1crack/vue3-org-chart

Vue3 Org Chart is a simple and lightweight organization chart component for Vue3. It is highly customizable.
https://github.com/n1crack/vue3-org-chart

binary-tree mlm network org-chart tree tree-structure unilevel-tree vue

Last synced: 28 days ago
JSON representation

Vue3 Org Chart is a simple and lightweight organization chart component for Vue3. It is highly customizable.

• Host: GitHub
• URL: https://github.com/n1crack/vue3-org-chart
• Owner: n1crack
• License: mit
• Created: 2024-07-05T20:32:41.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-15T05:25:16.000Z (4 months ago)
• Last Synced: 2024-10-02T08:13:19.505Z (about 1 month ago)
• Topics: binary-tree, mlm, network, org-chart, tree, tree-structure, unilevel-tree, vue
• Language: Vue
• Homepage:
• Size: 240 KB
• Stars: 11
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
## Vue3 Org Chart

[![GitHub](https://img.shields.io/github/license/n1crack/vue3-org-chart)](https://github.com/n1crack/vue3-org-chart/blob/master/LICENSE) 

[![npm](https://img.shields.io/npm/v/vue3-org-chart)](https://www.npmjs.com/package/vue3-org-chart)

### About

Vue3 Org Chart is a simple and lightweight organization chart component for Vue3. It is highly customizable.



### Demo

Playground : [https://playcode.io/vue3orgchart](https://playcode.io/vue3orgchart)

Demo : [https://vue3orgchart.playcode.io](https://vue3orgchart.playcode.io)

### Installation

```bash

npm i vue3-org-chart

```

### Usage

JS entry point

```js

import { createApp } from 'vue'

import App from './App.vue'

import { Vue3OrgChartPlugin } from 'vue3-org-chart'

import 'vue3-org-chart/dist/style.css'

const app = createApp(App)

app.use(Vue3OrgChartPlugin)

app.mount('#app') 

```

```javascript

// alternatively, you can import the component directly

// to use component, Vue3OrgChart instead of Vue3OrgChartPlugin

   import { Vue3OrgChart } from 'vue3-org-chart' 

   import 'vue3-org-chart/dist/style.css' 

   // ...

```

#### Vue Template

for more detailed example, please check the [examples](examples) folder

```vue 



    

        

            

            
{{item.name}}

             {{ open ? '-' : '+' }}

            

        

    



```


#### Styling

You have full control over node elements, In addition to that there are some css variables for lines and container height or node spacing..

```css 

:root {

    --vue3-org-chart-container-height: 70vh;

    --vue3-org-chart-line-top: .5rem;

    --vue3-org-chart-line-bottom: .5rem;

    --vue3-org-chart-node-space-x:  .5rem;

    --vue3-org-chart-line-color: blue;

}

```

![image](https://github.com/n1crack/vue3-org-chart/assets/712404/9eb4df4b-2156-4797-be2f-c5074ff8c91b)

### Collaboration

If you want to contribute to the project, please feel free to fork the repository and submit your changes as a pull request. Ensure that the changes you submit are applicable for general use rather than specific to your project.

### Dependencies

 - [Vue3](https://vuejs.org/)

 - [panzoom](https://github.com/anvaka/panzoom)  : Zoom/Pan Utility

### License

Copyright (c) 2024 Yusuf ÖZDEMİR, released under [the MIT license](LICENSE)