We will show simple example of vue js sweet alert notification using sweetalert2 vue npm plugin.


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 style="font-family:ubuntu">Vue toastr notifications example - rathorji.in</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>


Now you can run this example.