3 buttons are not possible

[kirschkern]

I'm trying to show 3 buttons using the following example:

this.$fire({
    title: 'Do you want to save the changes?',
    showDenyButton: true,
    showCancelButton: true,
    confirmButtonText: `Save`,
    denyButtonText: `Don't save`,
});

However I only get two buttons.

[kirschkern]

This seems to be caused by the used version of sweetalert2. When I install the latest sweetalert2, it works:

npm install --save sweetalert2

However the button colors has changed. This can be solved by adding the colors als global options when installing the plugin:

import VueSimpleAlert from "vue-simple-alert";
Vue.use(VueSimpleAlert, {
    "confirmButtonColor" : "rgb(255,128,0)",
    "cancelButtonColor" : "blue",
    "denyButtonColor" : "#00bb00"
});

Or by adding some global CSS:

.swal2-styled.swal2-confirm {
    background-color: rgb(255,128,0) !important;
}
.swal2-styled.swal2-deny {
    background-color: #00bb00 !important;
}

.swal2-styled.swal2-cancel {
    background-color: blue !important;
}

NOTE: If you use the global options, be aware, that they will be ignored when using the $fire method. I've solved this by overwriting the $fire method like this:

import Vue from "vue"
import Swal from "sweetalert2";

import VueSimpleAlert from "vue-simple-alert";
Vue.use(VueSimpleAlert, {
    "confirmButtonColor" : "rgb(255,128,0)",
    "cancelButtonColor" : "blue",
    "denyButtonColor" : "#00bb00"
});

Vue.prototype.$fire = function(options) {
    var mixedOptions = Object.assign(Object.assign({}, VueSimpleAlert.globalOptions), options);
    return Swal.fire(mixedOptions);
};