Vue.js Sweetalert Modal Notification Example

What is Vue.js?

Vue .js is an open-source model - view - ViewModel front-end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You and is maintained by him and the rest of the active core team members.

What is Toast Notification?

A toast notification is a message object that presents timely information, including confirmation of actions, alerts, and errors.

In most projects, We are use sweetalert2 for toast notifications. Sweetalert2 is very easy to use and implements in any frontend framework like Vue.js, React.js and etc.

Today we will learn how to integrate SweetAlert2 in Vue.js. We know that SweetAlert2 is a beautiful, responsive, customizable, and accessible replacement for JavaScript's popup boxes. Let's integrate it into our vue.js project.

You can find a blog that is related to How to Install Node.js and NPM On Ubuntu 20.04. You can check this out.

In this Vue Sweetalert Blog we are going to utilize a special CLI so be sure to install it as follows:

npm install -g @vue/cli

Or you can read this guide from the developers: https://cli.vuejs.org/guide/installation.html

Create a new Vue project and get inside the project folder

vue create vue-sweetalert && cd vue-sweetalert

With the package installed, all you'll need is to add the VueSweetalert2 component to your main.js file:

import Vue from 'vue'
import VueSweetalert2 from 'vue-sweetalert2';
import App from './App.vue';

Vue.use(VueSweetalert2);

new Vue({
  el: '#app',
  render: h => h(App)
});

Now in the main app, you can access all the methods of Vue-Sweetalert2 using the $swal function:

<template>
  <!-- button used to trigger event -->
  <button v-on:click="sweetAlert">Click me</button>
</template>

<script>
  export default {
    data() {
      return {
        text: ''
      }
    },
    methods: {
      sweetAlert() {
        this.$swal('Heading', 'this is a Heading', 'OK');
      }
    }
  }
<script>

If you want a modal / popup that can accept user input, simply use the input key in the configuration passed to $ swal:

<template>
  <button v-on:click="sweetAlert">Click Me!</button>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
        sweetAlert() {
        this.$swal({
          title: 'What is your Name?',
          input: 'text',
          inputPlaceholder: 'Enter your name here',
          showCloseButton: true,
        });
      }
    }
  }
</script>

You can also add your own markup as part of the modal. Simply use the html key in the configuration:

<template>
  <button v-on:click="sweetAlert">Click Me!</button>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      sweetAlert() {
        this.$swal({
              title: '<i>Custom HTML</i>',
          html:`This is an <em> emaphazied text </em>, <a href="#">links</a><strong>And other tags</strong>`,
          showCloseButton: true,
          showCancelButton: true,
          focusConfirm: false,
        })
      }
    }
  }
</script>

In the following example, we display a success prompt if the promise resolves with a truthy value, and otherwise we display another alert prompt displaying an alternative message:

<template>
  <button v-on:click="sweetAlert">Click Me!</button>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      sweetAlert() {
        this.$swal({
          title: 'Are you sure?',
          text: 'You can\'t revert your action',
          type: 'warning',
          showCancelButton: true,
          confirmButtonText: 'Yes Delete it!',
          cancelButtonText: 'No, Keep it!',
          showCloseButton: true,
          showLoaderOnConfirm: true
        }).then((result) => {
          if(result.value) {
            this.$swal('Deleted', 'You successfully deleted this file', 'success')
          } else {
            this.$swal('Cancelled', 'Your file is still intact', 'info')
          }
        })
      }
    }
  }
</script>