Question: Is there a way to inject defaults somewhere? about vue-sweetalert2

[Tragio]

@avil13 thank you very much for your awesome work. 🙂

I would love to know how can we create mixins using your plugin. The official documentation says the following: " You can easily reuse configuration by creating your own Swal with Swal.mixin({ ...options }):"

However, not sure how can we create them and execute them globally.

Really thank you and keep the good work 😄

[avil13]

You may need to create a plugin for Nuxt.
Check out the Nuxt documentation for this. Right now I can not help you, but it is possible.

[ImreC]

This could also be handy for Vue. Like doing the classic:

import Vue from 'vue'
import VueSweetalert2 from 'vue-sweetalert2'

const globalOptions = {
    confirmbuttonColor: red;
}
Vue.use(VueSweetalert2, globalOptions)

Want to create a pull request for this, but my experience in creating Vue bindings is too limited.

[avil13]

I had an idea for generating mixins in a similar way.

But he didn’t do it, because it’s not clear whether the developer needs it.

Now there is a clean wrap over Sweetalert2.
You can try to add this API.
If it is useful, then add to the master branch.

[ImreC]

Created a pull request with Nuxt options and Vue options for global defaults. I didn't update ts definitions, because I don't know typescript. @avil13 can you review and merge?

[avil13]

Thanks for the pull request.

Had the idea to change it a bit. I want to consult.

this.$swal - this is a common function for creating the alert.

What if given the opportunity to create several prepared alert or toast messages?

const options = {
    mixins: {
        // key for alert
        goodAlert: {
            type: 'success',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        }
    }
};

Vue.use(VueSweetalert2, options);

// use in vue component
export default {
    methods: {
        alert() {
            // key for alert
            this.$swal.goodAlert('Hello world');
        }
    }
}

[ImreC]

My first thought was that passing global options only is better because you usually end up requiring some minor details to change anyway and end up having a set of standard messages that you don't use. On the other hand, for some use cases it would be better to have a set of standard alerts ready. I am not sure. Maybe try the simple one first and add more complexity if other people ask for the second feature? The pull request I created covers my personal use case.

[avil13]

I apologize for such a long wait for merge.
#39

[realtebo]

Please, document this !

[fabriciozeferino]

Thanks for the pull request.

Had the idea to change it a bit. I want to consult.

this.$swal - this is a common function for creating the alert.

What if given the opportunity to create several prepared alert or toast messages?

const options = {
    mixins: {
        // key for alert
        goodAlert: {
            type: 'success',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
        }
    }
};

Vue.use(VueSweetalert2, options);

// use in vue component
export default {
    methods: {
        alert() {
            // key for alert
            this.$swal.goodAlert('Hello world');
        }
    }
}

Is this ideia working? I'm trying to implement and it says:

SweetAlert2: Unknown parameter "mixins"