FAlert.js

import Vue from 'vue';
import { VSnackbar, VBtn, VIcon } from 'vuetify/lib';

const message = Vue.observable({
  show: false,
  message: '',
  color: 'default',
  timeout: 3000,
});

export { message };

/**
 * Show message to user
 * @param {String} sentence
 * @param {String} alertType
 * @param {Number} timeToShow
 */
export const alertUser = (sentence, alertType = 'dark', timeToShow = 3000) => {
  message.message = sentence;
  message.show = true;
  message.color = alertType;
  message.timeout = timeToShow;
};

export const showAlert = alertUser;

export default {
  name: 'FAlert',
  render(h) {
    const closeIcon = h(VIcon, {}, 'mdi-close-circle-outline');

    const closeButton = h(VBtn, {
      props: {
        icon: true,
        flat: true,
      },
      on: {
        click (e) { //eslint-disable-line
          message.show = false;
        },
      },
    }, [closeIcon]);

    const snackerOptions = {
      props: {
        timeout: message.timeout,
        color: message.color,
        right: true,
        bottom: true,
        value: message.show,
      },
      on: {
        input: (e) => {
          message.show = e
          if (!e) {
            message.timeout = 3000
          }
        }
      },
      scopedSlots: {
        action: () => closeButton
      }
    };
    return h(VSnackbar, snackerOptions, [message.message]);
  },
};