vue3-org-chart

Vue3 Org Chart


$3

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

$3

Playground : https://playcode.io/vue3orgchart

Demo : https://vue3orgchart.playcode.io

$3

``bash
npm i vue3-org-chart
`

$3


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

`


#### Vue Template
for more detailed example, please check the examples folder
`vue



`

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

$3

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.

$3

- Vue3
- panzoom : Zoom/Pan Utility

$3

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