Using Quasar components within an App Plugin

  • I have a bunch of general functions which I would like to use all over my app. I have followed the guide how to create an app plugin here

    And the plugin works just fine. However I do not know how to access quasar components from the plugin.
    Let’s say I want to notify somebody from within the plugin

    export default ({ app, router, Vue }) => {
        Vue.prototype.$padre = {
            Error (messages) {
                    color: 'negative',
                    position: 'top',
                    message: 'messages[0]',
                    icon: 'report_problem'

    Is there a way to achieve the above apart from the obvious passing of $q every time you call the Error function

    Error (messages, $q) {
    this.$padre.Error(, this.$q);

    I am new to Quasar as you can tell : ). Any help suggestion would be great. Thank you for the great work you guys put in.


  • Also have an other question which is related and I don’t know how to solve.
    This is my axios plugin file in

    import axios from 'axios';
    // default responses
    axios.defaults.baseURL = '';
    // Add a response interceptor
    axios.interceptors.response.use(function (response) {
        // Do something with response data
        if ( {
   (m) {
                    color: 'negative',
                    position: 'top',
                    message: m.message,
                    icon: 'report_problem'
        return response;
    }, function (error) {
        // Do something with response error
        return Promise.reject(error);
    export default ({ Vue }) => {
        Vue.prototype.$axios = axios;

    My API always return messages in the same format so I would like to process those messages and convert them into quasar notifications. How can I reach $q (quasar) in here ?

  • @turigeza It’s in the docs, if you use quasar components on a js file, just do import { [quasar component] } from 'quasar'. in your case Notify like so:

    import { Notify } from 'quasar' 

  • @metalsadman Thank you ! I believe you but I couldn’t find it you know what it’s like. I went through the docs a couple of times already … : )
    That one liner helps me a great deal and reassures me yes it is how it supposed to be done. So thanks again : )

  • @metalsadman said in Using Quasar components within an App Plugin:


    For anyone who land here like I did, to call Notify this way you have to use the method create like this:
    Notify.create({message:'message', position:'top'...})

    This is equivalent to calling
    from within a component

Log in to reply