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
new Vue({
  render: h => h(App),

Step 4: 

Updated HelloWorld Component src/components/HelloWorld.vue

  <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>
  export default {
    methods: {
            this.$swal('Hello Vue world!!!');
              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) {
                  'Your file has been deleted.',

Now you can run this example.