Vue Js Sweetalert Modal Notification Tutorial

In this example, we will see vue js sweetalert modal notification tutorial. vue.js wrapper for sweetalert2. with support SSR. Also, I will show you how to use sweetalert2 in vue.js. 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 implements 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 or how to integrate sweetalert2 in vue.js. In this vue js sweetalert, we are use a special CLI. So, install it on your system.

So, let's see vue js sweetalert modal notification tutorial.

In this step, we need to create vue CLI app using the below command.

vue create sweetAlert2Example

Now, we will install 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 custom positioned dialog using position parameter.

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">Vue Js Sweetalert Modal Notification Tutorial - Websolutionstuff</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 here.

You might also like :

• Read More : Laravel 8 Google Bar Chart Example
• Read More : Generate Dynamic Sitemap in Laravel
• Read More : How To Create Dynamic Pie Chart In Laravel
• Read More : Laravel 8 Socialite Login with Facebook Account