Vue Js Sweetalert Modal Notification Tutorial

Websolutionstuff | Jan-12-2022 | Categories : Laravel VueJs

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.

Step 1 : Create Vue.js App

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

vue create sweetAlert2Example

 

 

Step 2 : Install vue-sweetalert2 Package

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

npm install -S vue-sweetalert2

 

Step 3 : Use 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.

 

 

Example 1

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>

 

Example 2

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>

 

 

Example 3

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
})

 

Example 4

 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 :

Recommended Post
Featured Post
How to Disable Right Click using jQuery
How to Disable Right Click usi...

In this small post i will show you how to disable right click using jquery. Here, we will disable right click on pa...

Read More

Aug-18-2021

How To Add Column In Existing Table In Laravel 10
How To Add Column In Existing...

In this article, we will see how to add a column to the existing table in laravel 10 migration. Here, we will learn...

Read More

Apr-24-2023

How To Login With OTP In Laravel 10
How To Login With OTP In Larav...

In today's digital age, where security is paramount, user authentication has become a cornerstone concern for web ap...

Read More

Aug-21-2023

How To Push Array Element In Node.js
How To Push Array Element In N...

Hello Dev, In this example we will see how to push array element in node.js example. I will share some example about&...

Read More

Oct-11-2021