{

Vuejs popup notification tutorial | Sweetalert2 example


In this blog post, We are going to learn How to create a popup in a vuejs application using the sweet alert framework

I already blogged about Sweetalert tutorials with examples and Alert Notifications with Angular here as follows

VueJS Alert Component

Alert is a simple popup dialog box to give useful information to the user

Vuejs is a popular progressive javascript framework for creating single-page applications.

Sweetalert is a vanilla opensource lightweight javascript to create a popup notification in javascript applications. The applications can be Jquery, Plain Javascript, or NPM-based applications like Angular, Vuejs, and Reactjs

With sweetheart, We can achieve the following alert notifications

  • Alert notifications to give success, warning, error, and informational message
  • Popup to Prompt the user to take input information
  • Confirmation alert
  • Responsive

There are a lot of Vuejs plugin wrappers for providing a sweet alert

In this blog post, We are going to integrate vue-sweetalert2 in vuejs-based applications.

This blog post covers two parts

  1. Vuejs Application Creation using Vue CLI tool
  2. Integrate Sweetalert in the Vuejs Application with examples

Vuejs Hello World Application generation

Vue framework provides a vue-cli tool to create a vue application from scratch using Vue create command.

B:\>vue create vuesweetalertdemo  
  
Vue CLI v3.0.0-rc.8  
? Please pick a preset: default (babel, eslint)  
  
Vue CLI v3.0.0-rc.8  
✨  Creating a project in B:\Workspace\blog\vuesweetalertdemo.  
⚙  Installing CLI plugins. This might take a while...  
  
> yorkie@2.0.0 install B:\Workspace\blog\vuesweetalertdemo\node_modules\yorkie  
> node bin/install.js  
  
setting up Git hooks  
can't find .git directory, skipping Git hooks installation  
added 1281 packages in 278.557s  
�  Invoking generators...  
�  Installing additional dependencies...  
  
added 3 packages in 18.413s  
⚓  Running completion hooks...  
  
�  Generating README.md...  
  
�  Successfully created project vuesweetalertdemo.  
�  Get started with the following commands:  
  
 $ cd vuesweetalertdemo  
 $ npm run serve  

This will have the vuesweetalertdemo application created with a predefined vue folder structure with the initial configuration. Go to the application folder, run npm run serve command to start Vue js application.

Install and save Dependencies to the application

To integrate SweetalertJS in Vueapplication, Go to the application root folder, vue-sweetalert2 package can be installed using npm or yarn, or bower.

  
  
npm install -save vue-sweetalert2  
or   
bower install vue-sweetalert2  
or   
yarn add vue-sweetalert2  

This command will do the following things

  • Install vue-sweetalert2 in your application and create folder node_modules\vue-sweetalert2 in the application root folder
  • Added below entry in package.json
 "dependencies": {  
 -----  
    "vue-sweetalert2": "^1.5.5"  
  },

Import VueSweetalert2 module in vue application

To make use of third-party npm package functionality, FIrst, you need to import the VueSweetalert2 module in main.js. Once imported, the Application can access sweet alert objects and their methods.
main.js

import Vue from 'vue'  
import App from './App.vue'  
import VueSweetalert2 from 'vue-sweetalert2';  
Vue.use(VueSweetalert2);  
  
Vue.config.productionTip = false  
  
new Vue({  
  render: h => h(App)  
}).$mount('#app')  

Vuejs Popup Simple alert Example

This examples application has one button, on clicking the button, It shows an alert box with a simple ok button. App.vue.

<template>  
  <div id="app">  
   <div> <img alt="Vue logo" src="./assets/logo.png"></div>  
    <button v-on:click="displaySimplePopup">Click Me</button>  
  </div>  
</template>  
  
<script>  
  export default {  
    data() {  
        return {  
          msg:''  
        };  
    },  
    methods: {  
        displaySimplePopup(){  
            // Use Sweetalert  
            this.$swal('Welcome to Vuejs Application using Sweetalert');  
        }  
    }  
  }  
</script>  
  
<style>  
#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>  

And the output of the above code is

vue sweetalert examples  popup notification

Sweetalert Modal Examples in Vuejs

The Below demo covers the following things

  • How to display a successful dialog window?
  • How to show an informational dialog window?
  • How to display the Error dialog window?
  • Modal window Prompt to take input from the user
  • Alert display position change
  • Delete popup notification
<template>  
  <div id="app">  
   <div> <img alt="Vue logo" src="./assets/logo.png"></div>  
    <button v-on:click="displaySimplePopup">Click Me</button>  
    <button v-on:click="infoAlert">Info Popup</button>  
    <button v-on:click="successAlert">Success Popup</button>  
    <button v-on:click="errorAlert">Error Popup</button>  
    <button v-on:click="AlertPassingData">Prompt Popup</button>  
    <button v-on:click="positionPopup">Custom Position Popup</button>  
    <button v-on:click="deletePopup">Delete Popup</button>  
  </div>  
</template>  
  
<script>  
  export default {  
    data() {  
        return {  
          msg:''  
        };  
    },  
    methods: {  
        displaySimplePopup(){  
            // Use Sweetalert  
            this.$swal('Welcome to Vuejs Application using Sweetalert');  
        },  
        infoAlert() {  
            this.$swal({  
                type: 'info',  
                title: 'Title Info',  
                text: 'This is an informational message  
            });  
        },  
        successAlert() {  
            this.$swal({  
                type: 'success',  
                title: 'Title Success',  
                text: 'This is a successful message'  
            });  
        },  
        errorAlert() {  
            this.$swal({  
                type: 'error',  
                title: 'Error Title ...',  
                text: 'Error Occurred!',  
                footer: '<a href>Please click this for more about this error</a>'  
            });  
        },  
        positionPopup() {  
            this.$swal({  
                position: 'top-end',  
                type: 'success',  
                title: 'Data is saved in Database',  
              showConfirmButton: false,  
              timer: 1000  
            });  
        },  
        deletePopup() {  
            this.$swal({  
                  title: "Do you want to delete this record",  
                  text: "This will be recorded from Database",  
                  type: "warning",  
                  showCancelButton: true,  
                  confirmButtonColor: "#4026e3",  
                  confirmButtonText: "Yes, remove it!"  
                  }).then((result) => { // <--  
                  if (result.value) { // <-- if accepted  
                          del('status-delete/' + id);  
                          }  
                  });  
        },  
          AlertPassingData() {  
            this.$swal({  
              title: 'Please enter String?',  
              input: 'text',  
              inputPlaceholder: 'Enter String here',  
              showCloseButton: true,  
  
            });  
        },  
    }  
  }  
</script>  
  
<style>  
#app {  
  font-family: 'Avenir', Helvetica, Arial, sans-serif;  
  -webkit-font-smoothing: antialiased;  
  -moz-osx-font-smoothing: grayscale;  
  text-align: center;  
  color: #2c3e50;  
  margin-top: 60px;  
}  
</style>  

Output is

vue sweetalert input dialog examples

Vuejs Html content in sweetalert popup

The alert dialog can also provide static content and dynamic content. Dynamic content can be placed using the HTML attribute of the $swal function. Can also contain HTML custom forms to take input from users Here is an example of HTML content in the Dialog window

<button v-on:click="htmlContentAlert ">Html contentPopup</button>  
 htmlContentAlert {  
            this.$swal({  
   title: "<i>This is title</i>",   
   HTML: "This is html text: <b>bold</b><i> italic</i>",    
   confirmButtonText: "V <u>Yes</u>",   
});;  
},  

Ajax demo usage

This is an example of ajax for asynchronous processing of a request. This shows on loading icon image on loading ajax request processing

 <button v-on:click="ajaxAlert">Ajax Popup</button>  
  
  ajaxAlert() {  
            this.$swal({  
  title: "Asynchronous example",  
  text: "Demo application for ajax example",  
  type: "info",  
  showCancelButton: true,  
  closeOnConfirm: false,  
  showLoaderOnConfirm: true  
}, function () {  
  setTimeout(function () {  
    swal("Completed!");  
  }, 2000);  
});  
        }, 

The code for this blog post can be downloaded from here

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.