Boot files with global Mixin



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



  • 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


Log in to reply