Vue.js

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

1. Create a new project:

           npm init vue@latest
           ? Project name: » familytree
           

2. Go to the project root folder:

           cd familytree
           

3. Install dependencies

           npm install
           

4. Install the Family Tree JS NPM package:

           npm i @balkangraph/familytree.js
           

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

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

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

           npm run dev