Using Quasar components within an App Plugin

[turigeza]

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
https://quasar-framework.org/guide/app-plugins.html

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) {
            ???.$q.notify({
                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(r.data, 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.

Geza

[turigeza]

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

import axios from 'axios';

// default responses
axios.defaults.baseURL = 'https://api.piffle.ninja/';

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
    if (response.data.messages) {
        response.data.messages.forEach(function (m) {
            $q.notify({
                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 ?

[metalsadman]

@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' 
...
Notify.({...})
...

[turigeza]

@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 : )

[danbars]

@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')
or
Notify.create({message:'message', position:'top'...})

This is equivalent to calling
this.$q.notify()
from within a component