Custom Styles not working after update

[harishphk]

I previously used confirmButtonClass which worked before and not working after the update.

const options = {
	buttonsStyling: false,
	confirmButtonClass: 'btn white-text error',
	cancelButtonClass: 'btn white-text success'
}
Vue.use(VueSweetalert2, options)

I also tried this but still not working:

const options = {
	customClass: {
		confirmButton: 'v-btn white--text success',
		cancelButton: 'v-btn white--text error',
	},
	buttonsStyling: false,
}
Vue.use(VueSweetalert2, options)

What is the issue after update? am i missing something?

[jordanboston]

I just setup this in my project, and it works fine, but I am also not able to alter anything by passing in the options. Not sure if it needs something else or if it is just broken right now.

[harishphk]

@jordanboston Yes, that is the issue here. Unable to use options.

[picbenoit]

Same for me,

Vue.use(VueSweetalert2, {
    cancelButtonText: "Annuler"
});

But the cancel button still is "Cancel".

Is it a bug from last version ?

[phlegx]

I have the same problem! @avil13 any idea how to solve this bug? Here the commit that changes the behavior: ecf942c

[picbenoit]

Waiting a correction, you can do like :

window.Swal = require('sweetalert2/dist/sweetalert2.js'); // Without CSS (add it one your sass build)
Vue.use({
    install(Vue, options) {
        let mySwal = Swal.mixin({
            cancelButtonText: "Annuler",
            showCancelButton: true
        });
        Vue.prototype.$swal = mySwal.fire.bind(mySwal);
    }
});

[jordanboston]

I'm wondering if this was a bug and if there is a solid fix for it, since I have not been able to set styles the way the documentation shows to? Any news on this?

[avil13]

Sorry. How do you connect styles? Today I removed this option, and now it is necessary to connect the individual import

[jordanboston]

Like this:

const alertOptions = {
confirmButtonText: 'Confirm',
confirmButtonColor: '#4BAECC',
cancelButtonColor: '#fde06e'
}
// Plugin installation
Vue.use(VueSweetalert2, alertOptions)

I just import and use the plugin, I don't have anything else that is special for style setup. Do I need to?

[avil13]

Need a debug sweetalert library. Now in version v2.1.0 Vue-sweetalert2 this should work. I am again far from the computer, but thanks I need reopen issue

[phlegx]

Upgrade to v2.1.0 don't solves the problem. I install vue-sweetalert2 with options defined in sweetalert2 v8.x from here sweetalert2.github.io/#configuration:

Vue.use(VueSweetalert2, {
  buttonsStyling: false,
  customClass: {
    confirmButton: 'btn btn-primary',
    cancelButton: 'btn btn-warning',
  }
})

[jordanboston]

Works for me now in v2.1.1 . --Thanks @avil13 !