Vue.js

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

1. Create a new project:

           npm init vue@latest
           ? Project name: » orgchart
           

2. Go to the project root folder:

           cd orgchart
           

3. Install dependencies

           npm install
           

4. Install the Org Chart JS NPM package:

           npm i @balkangraph/orgchart.js
           

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

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

7. Start the project:

           npm run dev