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



  • 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 ?



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


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