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 -

npm i --save vue2-frappe

Next, register it as a Vue plugin -

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


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..

import { VueFrappe } from "vue2-frappe";

export default {
  components: {

.. 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.

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

// Similar to Vue.use()

Register this new plugin in quasar.conf..

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

You can now happily use frappe charts from any component -


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

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.

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

comments powered by Disqus