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

npm i vue3-org-chart

Usage

JS entry point

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')

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

Vue Template

for more detailed example, please check the examples folder

<div>
    <vue3-org-chart json="YOUR_DATA_JSON_URL">
        <template #node="{item, children, open, toggleChildren}">
            <!-- Node Element / TEMPLATE START -->
            <div>{{item.name}}</div>
            <button v-if="children.length" @click="toggleChildren"> {{ open ? '-' : '+' }}</button>
            <!-- Node Element / TEMPLATE END -->
        </template>
    </vue3-org-chart>
</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..

: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;
}

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

Package detail

vue3-org-chart

readme