Vue.js

This document shows you haw you can create an FamilyTree JS 2 Vue.js project.

1. Create a new project with a name familytree:

                  Copy 
   npm init vue@latest
            

2. Go to the project root folder:

                  Copy 
   cd familytree
            

3. Install dependencies

                  Copy 
   npm install
            

4. Download the package, extract and edit the familytree2.js file to add the following row at the end of it:

       Copy  
   export default FamilyTree2
                

5. Add your extracted familytree.js file to \src\assets folder.
6. Create file FamilyTree.vue in /src/components folder with the following content:

                  Copy 
   <template>
       <div id="tree" ref="tree"></div>
   </template>
   
   <script>
   
       import FamilyTree2 from "../assets/familytree2";
   
       export default {
   
           name: 'tree',
           data() {
               return {
                   nodes: [
                       {id: 1, spouseIds: [2], motherId: 3, fatherId: 4},
                       {id: 2},
                       {id: 3},
                       {id: 4},
                   ]
               }
           },
   
           methods: {
               mytree: function(domEl, x) {
                   this.familyTree = new FamilyTree2(domEl);
                   this.familyTree.readOnly = false;
                   this.familyTree.addFamilyMembers(x).draw(1);
               }
           },
   
           mounted(){
               this.mytree(this.$refs.tree, this.nodes)
           }
       }
   </script>
   
   <style scoped>
   </style>
                    

7. Change App.vue as follows:

                  Copy 
   <template>
       <div id="familytree">
           <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>
                    

8. In main.css add this:

                  Copy 
   #app, #tree {
     height: 100%;
     width: 100%;
     display: block;
   }
    

9. Start the project:

   
                  Copy 
   npm run dev