Vue.js
This document shows you haw you can create an OrgChart JS Vue.js project.
-
Create a new project:
npm init vue@latest ? Project name: » orgchart
-
Go to the project root folder:
cd orgchart
-
Install dependencies
npm install
-
Install the OrgChart JS NPM package:
npm i @balkangraph/orgchart.js
-
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>
-
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>
-
Start the project:
npm run dev