Using Vue Plugins in Quasar

Here’s a quick way to use Vue plugins in Quasar.

Use Case: Frappe Charts in Vue

Let’s consider a simple use case for using Vue plugins - we want to use Frappe charts.

We can simply use vue2-frappe to easily do that. Just install the package in your project -

1

npm i --save vue2-frappe

Next, register it as a Vue plugin -

1
2
3
4


import Vue from "vue";
import Chart from "vue2-frappe";

Vue.use(Chart);

Frappe in Quasar

In Quasar you can’t do a Vue.use like the above. There is no main.js to orchestrate that.

The documentation of vue2-frappe does say that we can use vue2-frappe directly in components..

1
2
3
4
5
6
7


import { VueFrappe } from "vue2-frappe";

export default {
  components: {
    VueFrappe,
  },
};

.. but, I was never successful in getting that to work.

Time is always of essence - so I did the next best thing. I used a boot plugin to register Vue plugins.

Create ./src/boot/vplugins.js.

1
2
3
4
5


import Vue from "vue";
import Chart from "vue2-frappe";

// Similar to Vue.use()
Chart.install(Vue);

1
2
3
4
5
6
7
8


module.exports = function (/* ctx */) {
  return {
    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://quasar.dev/quasar-cli/cli-documentation/boot-files
    boot: ["vplugins"],
  };
};

You can now happily use frappe charts from any component -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


<template>
  <div>
    <vue-frappe
      v-if="trend['labels']"
      id="prodTrend"
      :labels="trend['labels']"
      :dataSets="trend['datasets']"
      type="bar"
      :height="300"
      :colors="['blue']"
    ></vue-frappe>
  </div>
</template>

<script>
  export default {
    data() {},
    props: {
      trend: {
        // provide options for Frappe chart
      },
    },
  };
</script>
>

Have additional plugins to register? Instead of creating distinct files for more than one Vue plugin, we just combine everything in one file - just change vplugins.js and you are all set.

1
2
3
4
5
6


import Vue from "vue";
import Chart from "vue2-frappe";
import GobblyGook from "gobbly";

Chart.install(Vue);
GobblyGook.install(Vue);