In this article, we will see how to use sweet alert in Vue js. Vue js wrapper for sweetalert2 with support SSR. Also, we will see Vue js sweet alert modal notification example. vue-sweetalert2 npm package will provide a method to generate sweet alert notifications like show, success, info, error, and register.

Sweetalert2 is very easy to use and implemented in any frontend framework like laravel, vue.js, react.js and etc. Sweetalert2 is a beautiful, responsive, customizable, and accessible replacement for JavaScript's popup boxes. So, I will give you examples of how to install sweetalert2 in Vue js. In this Vue js sweet alert, we are using a special CLI.

So, let's see the Vue sweetalert2 Exmple.

In this step, we will create the Vue CLI app using the below command.

vue create sweetAlert2Example

 

 

Now, we will install the vue-sweetalert2 npm package that will allow making the HTTP requests.

npm install -S vue-sweetalert2

 

src/main.js

import Vue from 'vue'

import App from './App.vue'

import VueSweetalert2 from 'vue-sweetalert2';

Vue.config.productionTip = false

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.

 

 

src/components/app.vue

<template>
  <button @click="showAlert">Hello world</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      // Use sweetalert2
      this.$swal('Hello Vue world!!!');
    },
  },
};
</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>

 

 

Also, you can set a custom-positioned dialog using the position parameters.

this.$swal({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})

 

 A confirm dialog, with a function attached to the "Confirm" button.

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
      <h1 style="font-family:ubuntu">How To Use Sweet Alert In Vue JS Tutorial - Techsolutionstuff</h1>
        <button v-on:click="showAlert">Show Message</button>
        <button v-on:click="showAlertConfirm">Confirm Me</button>
    </div>
  </div>
</template>
     
<script>
       
  export default {
    methods: {
        showAlert(){
            this.$swal('This is text message!');
        },
        showAlertConfirm(){
            this.$swal({
              title: 'Are you sure?',
              text: "Are you sure want to delete this item!",
              type: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
              if (result.value) {
                this.$swal(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'
                )
              }
            });
        }
    }
  }
</script>

Now you can run the vue.js app by using the following command.

npm run serve

The documentation for sweetalert2, you can find it here.

 

---

You might also like:

• Read Also: How To Store Multiple Checkbox Value In Database Using Laravel
• Read Also: How to Send E-mail Using Queue in Laravel 7/8
• Read Also: Laravel 8 One To Many Relationship Example
• Read Also: How To Get Current Date And Time In Node.js