Vue.js

This document shows you haw you can create an Family Tree JS Vue.js project.

1. Create a new project:

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

2. Go to the project root folder:

                   Copy code
   cd familytree
           

3. Install dependencies

                   Copy code
   npm install
           

4. Install the Family Tree JS NPM package:

                   Copy code
   npm i @balkangraph/familytree.js
           

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

                               Copy code
   <template>
       <div id="tree" ref="tree"></div>
   </template>
   
   <script>
   
       import FamilyTree from '@balkangraph/familytree.js'
   
       export default {
   
           name: 'tree',
           data() {
               return {
                   nodes: [
                       { id: 1, pids: [2], name: "Amber McKenzie", gender: "female", img: "https://cdn.balkan.app/shared/2.jpg"  },
                               { id: 2, pids: [1], name: "Ava Field", gender: "male", img: "https://cdn.balkan.app/shared/m30/5.jpg" },
                               { id: 3, mid: 1, fid: 2, name: "Peter Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/2.jpg" },
                               { id: 4, mid: 1, fid: 2, name: "Savin Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/1.jpg"  },
                               { id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", img: "https://cdn.balkan.app/shared/w10/3.jpg" }
                   ]
               }
           },
   
           methods: {
               mytree: function(domEl, x) {
                   this.family = new FamilyTree (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">
           <FamilyTree />
       </div>
   </template>
   
   <script>
       import FamilyTree from './components/FamilyTree.vue'
   
       export default {
           name: 'app',
           components: {
               FamilyTree,
           }
       }
   </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