Hello Developer,

Today, i we will show you Vue JS Sweet Alert Example. This article will give you simple example of Vue JS Sweet Alert Example. you will learn Vue JS Sweet Alert Example. So let’s follow few step to create example of Vue JS Sweet Alert Example.

You need to just follow few steps to add sweetalert, so let’s see.

Step 1:- Create Vue App

vue create myApp

Step 2:- Install vue-sweetalert2 Package

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({
  render: h => h(App),
}).$mount('#app')

Step 4:- Updated HelloWorld Component

src/components/HelloWorld.vue

<template>
  <div class="container">
    <div class="large-12 medium-12 small-12 cell">
        <h1>Vue JS Sweet Alert Example - codeplaners.com</h1>
        <button v-on:click="showAlert">Hello world</button>
        <button v-on:click="showAlertConfirm">Confirm Me</button>
    </div>
  </div>
</template>

<script>
  export default {
    methods: {
        showAlert(){
            this.$swal('Hello Vue world!!!');
        },
        showAlertConfirm(){
            this.$swal({
              title: 'Are you sure?',
              text: "You won't be able to revert this!",
              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>

npm run serve