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

Demo : https://vue3orgchart.playcode.io

Installation

1npm i vue3-org-chart

Usage

JS entry point

1import { createApp } from 'vue'
2import App from './App.vue'
3
4import { Vue3OrgChartPlugin } from 'vue3-org-chart'
5import 'vue3-org-chart/dist/style.css'
6
7const app = createApp(App)
8
9app.use(Vue3OrgChartPlugin)
10
11app.mount('#app') 

1// alternatively, you can import the component directly
2// to use component, Vue3OrgChart instead of Vue3OrgChartPlugin
3<script setup>
4   import { Vue3OrgChart } from 'vue3-org-chart' 
5   import 'vue3-org-chart/dist/style.css' 
6   // ...
7</script>

Vue Template

for more detailed example, please check the examples folder

1<div>
2    <vue3-org-chart json="YOUR_DATA_JSON_URL">
3        <template #node="{item, children, open, toggleChildren}">
4            <!-- Node Element / TEMPLATE START -->
5            <div>{{item.name}}</div>
6            <button v-if="children.length" @click="toggleChildren"> {{ open ? '-' : '+' }}</button>
7            <!-- Node Element / TEMPLATE END -->
8        </template>
9    </vue3-org-chart>
10</div>

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..

1:root {
2    --vue3-org-chart-container-height: 70vh;
3    --vue3-org-chart-line-top: .5rem;
4    --vue3-org-chart-line-bottom: .5rem;
5    --vue3-org-chart-node-space-x:  .5rem;
6    --vue3-org-chart-line-color: blue;
7}

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
• panzoom : Zoom/Pan Utility

License

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