Vue.js

This document shows you haw you can create an FamilyTree 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 FamilyTree 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
In this article
  1. Create a new project
  2. Go to the project root folder
  3. Install dependencies
  4. Install the FamilyTree.js NPM
  5. Create file FamilyTree.vue file
  6. Change App.vue file
  7. Start the project