Vue.js

This document shows you haw you can add FlowChart JS in a Vue.js project.

1. Create a new project named flowchart:

                  Copy
   npm init vue@latest
           
                   

2. Go to the project root folder:

                  Copy
   cd flowchart
                   

3. Install dependencies

                  Copy
   npm install
                   

4. Download the package and copy flowchart.js in \src\assets folder.
5. Add this in the end of the file:

                  Copy
   export default FlowChart
                       

6. Create file FlowChart.vue in /src/components folder with the following content:

                              Copy
   <template>
       <div id="chart" ref="chart"></div>
   </template>
   
   <script>
       import FlowChart from "../assets/flowchart";
   
       export default {
   
           name: 'chart',
   
           methods: {
               mychart: function (domEl, x) {
                   this.chart = new FlowChart(domEl, {
                   });
                   this.chart.load(
                       {
                           nodes: [
                               { id: 1, templateId: 'startEnd', x: 400, y: 150, text: "Start" },
                           ]
                       }
                   );
               }
           },
   
           mounted() {
               this.mychart(this.$refs.chart)
           }
       }
   </script>
   
                   

7. Change App.vue as follows:

                         Copy
   <template>
           <FlowChart />
   </template>
   
   <script>
       import FlowChart from './components/FlowChart.vue'
   
       export default {
           name: 'app',
           components: {
               FlowChart,
           }
       }
   </script>
   
   <style>
       #app {
           grid-template-columns: auto;
       }
   
       #chart {
           width: 100%;
           height: 700px;
       }
   </style>
                   

8. Remove the imported CSS from the main.js file
9. Start the project:

   
                  Copy
   npm run dev