Show / Hide Table of Contents

Vue.js

This document shows you haw you can create an Org Chart JS Vue.js project.

  1. Create a new project:
            vue create orgchart
            
  2. Go to the project root folder:
            cd orgchart
            
  3. Install the Org Chart JS NPM package:
            npm i @balkangraph/orgchart.js
            
  4. Create file OrgChart.vue in /src/components folder with the following content:
            <template>
                <div id="tree" ref="tree"></div>
            </template>
    
            <script>
    
                import OrgChart from '@balkangraph/orgchart.js'
    
                export default {
    
                    name: 'tree',
                    data() {
                        return {
                            nodes: [
                                { id: 1, name: "Denny Curtis", title: "CEO", img: "https://cdn.balkan.app/shared/2.jpg" },
                                { id: 2, pid: 1, name: "Ashley Barnett", title: "Sales Manager", img: "https://cdn.balkan.app/shared/3.jpg" },
                                { id: 3, pid: 1, name: "Caden Ellison", title: "Dev Manager", img: "https://cdn.balkan.app/shared/4.jpg" },
                                { id: 4, pid: 2, name: "Elliot Patel", title: "Sales", img: "https://cdn.balkan.app/shared/5.jpg" },
                                { id: 5, pid: 2, name: "Lynn Hussain", title: "Sales", img: "https://cdn.balkan.app/shared/6.jpg" },
                                { id: 6, pid: 3, name: "Tanner May", title: "Developer", img: "https://cdn.balkan.app/shared/7.jpg" },
                                { id: 7, pid: 3, name: "Fran Parsons", title: "Developer", img: "https://cdn.balkan.app/shared/8.jpg" }
                            ]
                        }
                    },
    
                    methods: {
                        mytree: function(domEl, x) {
                            this.chart = new OrgChart (domEl, {
                                nodes: x,
                                nodeBinding: {
                                    field_0: "name",
                                    img_0: "img"
                                }
                            });
                        }
                    },
    
                    mounted(){
                        this.mytree(this.$refs.tree, this.nodes)
                    }
                }
            </script>
    
            <style scoped>
            </style>
            
  5. Change App.vue as follows:
            <template>
                <div id="app">
                    <OrgChart />
                </div>
            </template>
    
            <script>
                import OrgChart from './components/OrgChart.vue'
    
                export default {
                    name: 'app',
                    components: {
                        OrgChart,
                    }
                }
            </script>
    
            <style>
                #app {
                    font-family: 'Avenir', Helvetica, Arial, sans-serif;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    text-align: center;
                    color: #2c3e50;
                    margin-top: 60px;
                }
    
                html, body {
                    width: 100%;
                    height: 100%;
                    padding: 0;
                    margin: 0;
                    overflow: hidden;
                    font-family: Helvetica;
                }
    
                #tree {
                    width: 100%;
                    height: 100%;
                }
            </style>
            
  6. Start the project:
            npm run serve