Component with same name in Vuejs


Suppose we have a vue component from a different module and carry the name of the component in current module, in short a duplicate name. In such case Vue allow us to rename the component (from other module) in register component section.

It can be possible by using name/alias before the component name separated by a colon

import DoughnutChart from '@/components/Doughnut'
export default {
  name: "Doughnut",
  components: { 'DC' :DoughnutChart 
  },

Here DC is the name given to the component DoughnutChart which is imported from Doughnut module.

In the template we can still use the functionality of the component as 

<template>
  <div class="flex-container">
    <DC :chartData="chartdata" :options="options" />
  </div>
</template>

The following Vuejs-component Posts may help you

Create Pie chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create Pie Chart component

Pie charts are easiest option when we have limited amount of data sets. In-order to use Chartjs and create pie chart we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file PieChart.js

import { Pie, mixins } from 'vue-chartjs'

export default {
  extends: Pie,
  mixins: [mixins.reactiveProp],
  name: 'PieChart',
  props: [{
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Pie chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <PC :chartData="chartdata" />
  </div>
</template>

<script>
// @ is an alias to /src
import PieChart from "@/components/PieChart";
export default {
  name: "PieChart",
  components: { 'PC':PieChart },
  data() {
    return {
      chartdata: {
        labels: ["VueJs", "EmberJs", "ReactJs", "AngularJs"],
        datasets: [
          {
            backgroundColor: ["#41B883", "#E46651", "#00D8FF", "#DD1B16"],
            data: [40, 20, 80, 10]
          }
        ]
      }
    };
  },
};
</script>
<style>
.flex-container {
  display: flex;
}
</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-chartjs post may help you build app faster

Create Bar chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create a Bar Chart component

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file BarChart.js

import { Bar, mixins } from 'vue-chartjs'

export default {
  extends: Bar,  
  mixins: [mixins.reactiveProp],
  name: 'BarChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Bar chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <BarChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import BarChart from '@/components/BarChart'
export default {
  name: "Bar",
  components: { BarChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-chartjs post may help you build app faster

Create doughnut chart component in Vuejs


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Install dependencies

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.


 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file Doughnut.js

import { Doughnut, mixins } from 'vue-chartjs'

export default {
  extends: Doughnut,  
  mixins: [mixins.reactiveProp],
  name: 'DoughnutChart',
  props: [{
    chartData: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <DoughnutChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import DoughnutChart from '@/components/Doughnut'
export default {
  name: "Doughnut",
  components: { DoughnutChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>
.flex-container {
  display: flex;
}

</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-route post may interest you

Create line chart component in Vue


Data Visualization is the important part of a commercial application. There are plenty of JavaScript library available for this task. In this series of post we are discussing about Chartjs and its Vue wrapper.

Creating Component may save your time and it increase the re-usability of the code.

Create a Line Chart component

In-order to use Chartjs charts we need multiple dependency which can be installed using one of the following methods.

 yarn add vue-chartjs chart.js
 npm install vue-chartjs chart.js --save

Create component

In the component folder of the project add the following code and name the file LineChart.js

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,  
  mixins: [mixins.reactiveProp],
  name: 'LineChart',
  props: [{
    chartdata: {
      type: Object,
      default: null
    },
    options: {
      type: Object,
      default: null
    }
  }],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

We have used a mixin which combine the reactive props and Line chart from the vue-chartjs module.

Using the component

In the page component we can import component and bind the data, and options. 

<template>
  <div class="flex-container">
    <LineChart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import  LineChart   from "@/components/LineChart"
export default {
  name: "LineChart",
  components: { LineChart
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 20]
        },
         {
          label: 'Data Two',
          backgroundColor: '#5885af',
          data: [140, 120]
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false
    },
    }

  }
  
};
</script>
<style>

.flex-container {
  display: flex;
}
</style>

A complete set of chart components will be available on Vue-chart-components Repository

Following vue-route post may interest you

redirecting multiple routes in Vuejs


Sometimes we would like to have same route with different name, such guide to FAQ, help, how-to etc. What should we do when want to redirect same route against a bunch of routes ?. Here the alias came into picture

alias can be used in our index route file to redirect a route / a set of route to specific route. The following example will clarify this

import Vue from "vue";
 ......
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Line",
    component: LineChart,
     },   
  {
    // The redirect can also be targeting a named route:
    path: "/help",
    redirect: { name: 'About' }
  },
  {
    //redirect with aliad
    path: "/doughnut",
    name: "Doughnut",
    component: Doughnut,
    alias: ['/donut', '/dot']

  }, 
];
const router = new VueRouter({
  routes
});

export default router;

In the above router configuration I have a route doughnut which shows the doughnut chart. All I want to different routes set to this route. we redirect /doughnut route to the /donut, /dot routes. As a result all the routes are working

Following vue-route post may interest you

Redirect a route in Vue router


Sometimes we would like to have same route with different name, such guide to FAQ, help, how-to etc. Vue allow us to use the redirect feature for this purpose.

Redirect can be used in our index route file in the following format

import Vue from "vue";
 ......
Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    name: "Line",
    component: LineChart,
     },   
  {
    // The redirect can also be targeting a named route:
    path: "/help",
    redirect: { name: 'About' }
  } 
];
const router = new VueRouter({
  routes
});

export default router;

In the above router configuration we redirect /help router to the named route /About. For multiple route we have to reply on alias.

Following vue-route post may interest you

MobaXterm SSH client for Raspberry pi


May be you are fond of Putty, the SSH client for accessing your Raspberry Pi single board computer. MobXterm can be a replacement for Putty.

It offer the all features offered by Putty and plus we can

MOBAXTERM in Windows 10
  • open multiple terminal,
  • Take screen shot
  • Tunneling
  • Access servers
  • Multiple sessions etc
  • sftp – for accessing folders/file on the remote system (GUI)
  • Remote monitoring

I don’t miss the Putty at all , all those putty sessions are available on MobaXterm.

One of the noticeable feature is that all of Rasp Home folder now accessible from my desktop. I can download and upload file using the sftp.

It allow me to monitor the remote system and MobaXterm will show the memory usage, CPU load etc on the status bar

Dowmload MOBAxTREAM

May be you are looking for these Raspberry pi posts

How to create a colorful doughnut in Vuejs


In this post you will learn

  • Create a TS component
  • Create props
  • Mixin multiple props and function
  • vue-chartjs
  • chartjs doughnut chart

Vue-Chartjs

Vue-chartjs is chartjs wrapper for Vue. It is JavaScript library you can use either CDN or NPM version. I going to use it with NPM, it is so easy.

npm install: npm install vue-chartjs chart.js --save

Create a doughnut

We can simply create a new component using TS /JS in your Vuejs app. Remember the component can’t have template section, since Vue don’t merge templates.

Following is a simple component which uses Mixin to combine props, Doughnut chart from vue-chartjs. The props also have default values, so that can leave the props blank for testing ( for example color). 

import { Component, Mixins } from "vue-property-decorator"
import { Doughnut, mixins } from "vue-chartjs";
import Vue from "vue";

const chartProps = Vue.extend({
    props: {
        blockColors: {
            type: [],
            default: [
                "#ff6384",
                "#36a2eb",
                "#cc65fe"
            ]
        },
        data: {
            type: [] ,
            default: [140,50,60]

        },
        labels: {
            type: [],
            default: ["Red",  "Blue","Violet"],
        }
    }

});
@Component({
    extends: Doughnut, // this is important to add the functionality to your component
    mixins: [mixins.reactiveProp]
})
export default class ChjsDoughnutChart extends Mixins(mixins.reactiveProp, Doughnut,chartProps) {
    mounted() {
        // Overwriting base render method with actual data.
        this.renderChart({
            datasets: [
                {
                    backgroundColor: this.blockColors,
                    data: this.data,                    
                }
            ],
            labels: this.labels
        })
    }
}

Use the component

We can import and use the component in the template as follows

<template>
...
 <ChjsDoughnutChart :data="data" :labels="labels" :blockColor="blockColor"  />
...
</template
<script>
import ChjsDoughnutChart from "../charts/Doughnut";
@Component({
  components: { ChjsDoughnutChart },
})
.....
</script>

Here “data” and “labels” are the data members of the component

Following vue-chart post deserver a good read

Optional field in TS Interface


Optional member in a TypeScript interface is the one that is not a mandatory field. We can skip those field while assigning values, everything else is mandatory.

To create a optional member we can use ? in front of the member and before the type.

..
firstName: string;
lastName?: string;
..

Following TypeScript posts may help your better understand TypeScript