sweet-alert-vuetify

Install

npm install sweet-alert-vuetify --save

Use

import SweetAlertVuetify from 'sweet-alert-vuetify';
components: { SweetAlertVuetify }

<sweet-alert-vuetify
  v-model="showConfirm"
  @clickButtonOk="save()"
  @clickButtonCancel="cancel()"
  alertDefault="confirm"
  :config="{
    title: 'Deseja realmente continuar?',
    buttonCancel: {
      text: 'Cancelar'
    }
  }"
/>

OR

import SweetAlertVuetify from 'sweet-alert-vuetify';
Vue.use(SweetAlertVuetify, vuetify);

Use

async showAlert() {
  let confirm = await this.$swal("confirm", {
    hideOverlay: true,
    config: {
      iconVisible: false,
      title: {
        text: "Você tem certeza que deseja continuar?",
        style: {
          style: {
            fontSize: "12px",
            color: "red"
          }
        }
      },
      buttonCancel: {
        text: "Não, voltar",
        style: {
          text: false,
          color: "#687CEA",
          class: "white--text",
          depressed: true,
          width: "30%",
          maxWidth: "400px",
          rounded: true,
        },
      },
      buttonOk: {
        text: "Sim, continuar",
        style: {
          text: false,
          color: "#687CEA",
          class: "white--text",
          depressed: true,
          width: "40%",
          maxWidth: "400px",
          rounded: true,
        },
      },
    },
  });

  this.$swal("loading", {
    config: {
      loading: {
        text: "Salvando...",
      },
    },
  });

  this.$swal("success", {
    config: {
      title: {
        text: "Registro salvo com sucesso!",
      },
    },
  });

  this.$swal("error", {
    config: {
      title: {
        text: "Ocorreu algum problema ao salvar os dados.",
      },
    },
  });
});

CONFIG

//vue.config.js
module.exports = {
  transpileDependencies: ["vuetify", "sweet-alert-vuetify"]
};

Props

Thanks to:

• https://github.com/sweetalert2/sweetalert2
• https://github.com/yariksav/vuetify-confirm