In this tutorial, i will show you vue sweetalert2 example. This post will give you simple example of vue sweetalert2 example. i explained simply step by step sweetalert2 vue component. In this article, we will implement a vue js sweet alert.
You need to just follow few step to add sweetalert notification. you can also use confirm modal box with vue.
vue-sweetalert2 npm package will provide method to generate of sweet alert notifications like show, success, info, error, and register. you can also set icon with text as you want.
Step 1: Create Vue App
first we need to create vue cli app using bellow command:
vue create myApp
Step 2: Install vue-sweetalert2 Package
Here we need to install vue-sweetalert2 npm package that will allow to make http request.
npm install -S vue-sweetalert2
Step 3: Use vue-sweetalert2
We need to use vue-sweetalert2 package in main.js file of vue js app.
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
Here, we will create HelloWorld.vue component with following code.
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 - HDTuto.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>
Now you can run vue app by using following command:
npm run serve
I hope it can help you...
Do you like below Tutorials ?
- PHP Laravel 5.5 - import export data into excel and csv using maatwebsite
- Laravel 7.x and 6.x create custom facade example from scratch
- Node JS - Get Real time online users counter using socket io example
- PHP Laravel 7.x and 6.x - Bootstrap Admin Theme Integration example from scratch
- MySQL Query - How to select records of today to next Sunday ?
- Laravel 7.x and 6.x - username custom validation example
- Laravel 5.5 - Import Extract zip file using chumper/zipper package
- PHP Laravel Set Custom Validation Error Messages Example