Show / Hide Table of Contents

Vue.js

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

  1. Create a new project:
            vue create familytree
            
  2. Go to the project root folder:
            cd familytree
            
  3. Install the Family Tree JS NPM package:
            npm i @balkangraph/familytree.js
            
  4. 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>
            
  5. 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>
            
  6. Start the project:
            npm run serve