vuetify-toast-snackbar-fbits v1.0.1

Vuetify Toast Snackbar for Vuetify 2.3+

Basic Vue toast service with queue support that uses Vuetify Snackbar component. Update from https://github.com/jaredhan418/vuetify-toast-snackbar-ng

Installation

npm install vuetify-toast-snackbar-ng

Usage

Bundler (Webpack, Rollup)

import VuetifyToast from "vuetify-toast-snackbar-fbits";

Vue.use(vuetifyToast, {
    snackbarAttrs: {},
    queueable: false,
    shorts: {
        custom: {
            snackbarAttrs: {
                color: "blue",
            },
            icon: "mdi-account-box",
        },
    },
    property: "$toast", // default
});

Vue loader (e.g. Nuxt.js)

Update plugins/vuetify.js

import Vue from "vue";
import Vuetify, { VSnackbar, VBtn, VIcon } from "vuetify/lib";
import VuetifyToast from "vuetify-toast-snackbar-fbits";

Vue.use(Vuetify, {
    components: {
        VSnackbar,
        VRow,
        VCol,
        VIcon,
        VBtn,
    },
});

Vue.use(VuetifyToast);

Call

this.$toast("Default toast");

this.$toast.info("Info toast");

this.$toast("Custom options", {
    color: "green",
    dismissable: true,
    queueable: true,
});

this.$toast.custom("Custom short");

Get currently displayed Toast component

let cmp = this.$toast.getCmp();
cmp.message = "Dynamic properties";
cmp.close();

Clear Toasts queue

let queue = this.$toast.clearQueue();