No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Boot files with global Mixin

    Framework
    2
    2
    1294
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      damonjanis last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by 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

        1 Reply Last reply Reply Quote -1
        • First post
          Last post