Setup vue-sweetalert2 as a global helper in Vue 2

This article will show you how to install and configure vue-sweetalert2 as a global helper in Vue 2 with 4 simple steps that you can follow. Vue sweetalert2 is a simple alert system package for your Vue projects. Moreover, it also has a dialog popup that you can use to confirm any user's action for example the confirmation of the deleted item, etc.

Step 1 - Installing the package

Install the vue-sweetalert2 package with npm. The –save specify the package will install to the dependency of the package.json file.

npm install vue-sweetalert2 --save

Step 2 - Setting up the alert system

Adding the vue-sweetalert2 package to your Vue project. This will integrate the package into your Vue project.

In the /src/main.js add the 3 three lines of code to initialize the sweetalert2 to your project

import VueSweetalert2 from 'vue-sweetalert2';

// If you don't need the styles, do not connect
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);

Step 3 - Setup the global helper for alert

Creating global helpers that can easily call anywhere from your Vue project.

In the /src folder create a helpers folder containing the index.js 

In your /src/helpers/index.js

import Vue from 'vue';

export default {
    confirmDialog(
        message, 
        onConfirm = () => {}, 
        onCancel = () => {},
        confirmText = 'Submit', 
        cancelText = 'Cancel') {
        Vue.swal.fire({
            title: message,
            showCancelButton: true,
            cancelButtonText: cancelText,
            confirmButtonText: confirmText
        }).then((result) => {
            result.isConfirmed ? onConfirm() : onCancel();
        });
    },
    toast(message, type, timer = 2500) {
        Vue.swal.fire({
            position: 'top-right',
            text: message,
            icon: type,
            type: type,
            toast: true,
            timer: timer,
            showConfirmButton: false
        });
    }
}

Adding the helpers to your /src/main.js

import Vue from 'vue';
import App from './App.vue';
import router from './routes';
import helpers from './helpers'; // <--
import VueSweetalert2 from 'vue-sweetalert2';

// If you don't need the styles, do not connect
import 'sweetalert2/dist/sweetalert2.min.css';

Vue.use(VueSweetalert2);

const plugins = { // <--
    install() { // <--
        Vue.helpers = helpers; // <--Vue.prototype.$helpers = helpers; // <--
    }
} // <--
Vue.use(plugins); // <--

Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

Step 4 - Usage

This is the simple usage of the alert helpers that we set up along the way. In any of your Vue template you can call the VueSweetAlert2 by this.$helpers.toast() or Vue.helpers.toast()

<template>
    <div>
        <button @click="alertSuccess">Success</button>
        <button @click="alertFail">Fail</button>
        <button @click="confirmDialog">Confirm</button>
    </div>
</template>

<script>
export default {
    methods: {
        alertSuccess() {
            this.$helpers.toast('Created', 'success');
        },
        alertFail() {
            this.$helpers.toast('Create fail', 'error');
        },
        onConfirm() {
            this.$helpers.toast('Confirm', 'success');
        },
        onCancel() {
            this.$helpers.toast('Cancel', 'error');
        },
        confirmDialog() {
            this.$helpers.confirmDialog(
                'Are you sure you want to delete this?',
                this.onConfirm,
                this.onCancel
            );
        }
    }
}
</script>

Conclusion

To set up a global alert/dialog system in Vue with vue-sweetalert2 package there are 4 steps as shown in this article.

1. Installing the vue-sweetalert2 package
2. Integrate the package into your Vue application
3. Set up a global helper function that calls to vue-sweetalert2.
4. The usage of the setup itself.

Now you will have a nice setup for the alert with vue-sweetalert2.