How can I set some global functions/mixins in Quasar Vue V2 framework

user_7514900 0
Viewed 2445

I'm using Quasar Framework V2 for a SPA and I need to create a class in which I can declare all the shared functions/methods on the app to reduce code writing.

For example, to show an alert from the Notify plugin you have to use this code:

$q.notify({
          message: 'Error',
          color: 'primary',
          actions: [
            { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
          ]
        })

It's too long to write this in every event I want that notification to be called. But I don´t know the right way to do this on Quasar. I tried using boot files but failed

I just want to call notifyError() from a global class/mixin/boot or whatever. Something like this:

const notifyError = () => {

$q.notify({
          message: 'Jim just pinged you.',
          color: 'primary',
          avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
          actions: [
            { label: 'Reply', color: 'yellow', handler: () => { /* ... */ } },
            { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
          ]
        })

}
quasar-framework vuejs3 vue.js
2 Answers

You can define a utility for notifications like this:

// If you're not using Quasar CLI, you probably have a quasar.js file that you'll need to import inside main.js
import Vue from 'vue';
import { Quasar, Notify } from 'quasar';

Vue.use(Quasar, {
  // You can configure here how notify works
  config: {
    notify: {
    position: 'top-right',
    timeout: 2000,
  },
  // You need to import the plugin
  plugins: {
    Notify,
  },
});

// If you're using Quasar CLI, you need to add the Notify plugin in quasar.conf.js
module.exports = function () {
  return {
    framework: {
      plugins: [
        'Notify',
      ],
    },
  };
};

// util/notify.js
import { Notify } from 'quasar';

const error = (message) => {
  Notify.create({
    message,
    color: 'primary',
    actions: [
      { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } },
    ],
  });
};

const primary = (message) => {
  Notify.create({
    message,
    color: 'primary',
    avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
    actions: [
      { label: 'Reply', color: 'yellow', handler: () => { /* ... */ } },
      { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } },
    ],
  });
};

export default {
  error,
  primary,
};

// Home.vue
<template>
  ...
</template>

<script>
import notify from '@/notify';

export default {
  name: 'Home',
  async created() {
    notify.primary('message');
  },
};
</script>
user_82277020

In quasar there is boot folder you can create your own file for example :

// src/boot/Notify.js


import { boot } from 'quasar/wrappers'
import { Notify} from 'quasar'
export default boot(async ({ app }) => {   
  const notifyError = () => {

        Notify.create({
          message: 'Jim just pinged you.',
          color: 'primary',
          avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
          actions: [
              { label: 'Reply', color: 'yellow', handler: () => { /* ... */ } },
              { label: 'Dismiss', color: 'white', handler: () => { /* ... */ } }
            ]
          })

  }

 app.config.globalProperties.$notifyError = notifyError 
}

Second you should Add this file in quasar.conf.js

boot: [
      'i18n',//already exist
      'axios',//already exist
      'Notify'//NEW : Our File Name  in boot folder 
    ],

Now you can access this function in your component like that :

this.$notifyError()

in the same way, you can create how many functions you want and also boot files ...

user_141558570
Related