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