How reactivity works in Vuejs


One of the interesting thing about all these JavaScript Frameworks is reactivity of components. Each framework have their own way to treat us.

Problem

Suppose you have a counter that increment when user click it will increase by itself. So each time user click on it, the UI should update, it should reloaded the page/UI.

Solution

This problem have one solution, binding. Vuejs allow us bind members of the component.

<template>
<div >     
   {{counter}}
</div>
</template>

Create a desktop version of Quasar-Vue app using Electron


Quasar is a UI frame work for developers who were developing web, desk and mobile friendly, responsive app with Vuejs.

With Quasar and Vuejs we can create beautiful Vue app in minutes, thank to the Quasar Frame work. It is easy to learn, I promise you, it didn’t take hours. (Read more about Vuejs).

Running the Desktop version

As you know Quasar app is a web app, it is not meant to desktop or mobile, but with the reactivity of components and controls , it can be much like a desktop app.

With the help of Electron we can build a version for desktop, no matter you are using Mac or Window.

To do this we need electron installed. Quasar CLI will automatically do it for us. For now just hit the terminal with the following command

quasar dev -m electron

This will create the electron project for your app and instantly build executable , also launch app, with developer tools enabled.

That’s all I have today

Following Quasar posts may help you explore further

Create PolarArea 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 Polar Chart component

In-order to use Chartjs and create bubble 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 PolarAreaChart.js

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

export default {
  extends: PolarArea,  
  mixins: [mixins.reactiveProp],
  name: 'PolarAreaChart',
  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 PolarArea 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">
    <PolarAreaChart Chart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import PolarAreaChart from '@/components/PolarAreaChart'
export default {
  name: "PolarArea",
  components: { PolarAreaChart 
  },
  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 Radar 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 Radar Chart component

In-order to use Chartjs and create Radar 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 Horizontal 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 Horizontal Chart component

In-order to use Chartjs and create Horizontal Bar 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 Scatter 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 Bubble Chart component

In-order to use Chartjs and create scatter 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 Bubble 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 Bubble Chart component

In-order to use Chartjs and create bubble 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 BubbleChart.js

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

export default {
  extends: Bubble,  
  mixins: [mixins.reactiveProp],
  name: 'BubbleChart',
  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 Bubble 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">
    <BubbleChart Chart :chartData="chartdata" :options="options" />
  </div>
</template>

<script>
// @ is an alias to /src
import BubbleChart from '@/components/BubbleChart'
export default {
  name: "Bubble",
  components: { BubbleChart 
  },
  data (){
    return {
    chartdata: {
      labels: ['January', 'February'],
      datasets: [
          {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [
            {
              x: 20,
              y: 25,
              r: 5
            },
            {
              x: 40,
              y: 10,
              r: 10
            },
            {
              x: 30,
              y: 22,
              r: 30
            }
          ]
        },
        {
          label: 'Data Two',
          backgroundColor: '#7C8CF8',
          data: [
            {
              x: 10,
              y: 30,
              r: 15
            },
            {
              x: 20,
              y: 20,
              r: 10
            },
            {
              x: 15,
              y: 8,
              r: 30
            }
          ]
        }
      ]
    },
    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

Quasar UI framework for Vue


Quasar is a UI frame work for developers who were developing web, desk and mobile friendly, responsive app with Vuejs.

It has rich set of web components (Plenty of them) which is reactive and will save development time. They also provide styling, spacing with directives.

All these component template samples can be easily copied to your vue project with ease, along with scripts.

How to use Quasar in Vuejs

The best option is to use the Quasar CLI and create a project with a default router.

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

Create and run project

Using the CLI we can easily create and run project. In fact Quasar uses the Vue CLI to create the project and additionally add dependencies and other stuffs for you.

quasar create <folder_name>

By using the following command you can run the development version of the project. The complete script information can be found on the package.json config file. For now we stick with the dev command

quasar dev

and your app will open on a web browser. For more help visit the Quasar site

Following Quasar posts may help you explore further

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