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.