Vue.js

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

1. Create a new project:

                   Copy code
   npm init vue@latest
   ? Project name: » orgchart
           

2. Go to the project root folder:

                   Copy code
   cd orgchart
           

3. Install dependencies

                   Copy code
   npm install
           

4. Install the Org Chart JS NPM package:

                   Copy code
   npm i @balkangraph/orgchart.js
           

5. Create file OrgChart.vue in /src/components folder with the following content:

                               Copy code
   <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:

                          Copy code
   <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:

   
                   Copy code
   npm run dev