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.
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
How to add Sweetalert to vue 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 open-source 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
- Vuejs Application Creation using the Vue CLI tool
- 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...
> [email protected] 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 the 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 example 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
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
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>",
});;
},
Vuejs Sweetalert Ajax demo usage
This is an example of ajax for the asynchronous processing of a request. This shows on the 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
