Boot files with global Mixin

damonjanis

There are several functions that need to be available as a global Mixin, using vue-snotify.

I created a Quasar boot file for vue-snotify as follows:

$ quasar new boot snotify

Then updated the contents of the new snotify.js to:

import Snotify, { SnotifyPosition } from "vue-snotify";

const snotifyOptions = {
  toast: {
    position: SnotifyPosition.centerBottom,
    timeout: 3000
  }
};

export default ({ Vue }) => {
  Vue.use(Snotify, snotifyOptions);

  Vue.mixin({
    methods: {
      showError(message, title) {
        console.trace();
        this.$snotify.error(message, title, {
          timeout: 5000
        });
      },
      showSuccess(message, title) {
        this.$snotify.success(message, title, {
          timeout: 3000
        });
      },
      showInfo(message, title) {
        this.$snotify.info(message, title, {
          timeout: 2000
        });
      },
      showWarning(message, title) {
        this.$snotify.warning(message, title, {
          timeout: 5000
        });
      }
    }
  });
};

Then in quasar.conf.js I added snotify to the boot list like this:

boot: ["axios", "notify-defaults", "snotify"],

So to use the global Mixin I call it from a component like this:

this.showSuccess('this is a message', 'this is a title')

However nothing happens, it doesn’t call the showSuccess function.

How does one setup a global Mixin using boot files?

s.molinari

In general, you shouldn’t do a global mixin for this. It’s going to affect every single component with that code i.e. it adds “bloat”.

The cleaner way is to create a Vue plugin (externally) and import it via Vue.use.

Scott