In this example, we will see vue js sweetalert modal notification tutorial. vue.js wrapper for sweetalert2. with support SSR. Also, I will show you how to use sweetalert2 in vue.js. vue-sweetalert2 npm package will provide a method to generate sweet alert notifications like show, success, info, error, and register.
Sweetalert2 is very easy to use and implements in any frontend framework like laravel, vue.js, react.js and etc. Sweetalert2 is a beautiful, responsive, customizable, and accessible replacement for javascript's popup boxes. So, I will give you examples of how to install sweetalert2 in vue.js or how to integrate sweetalert2 in vue.js. In this vue js sweetalert, we are use a special CLI. So, install it on your system.
So, let's see vue js sweetalert modal notification tutorial.
In this step, we need to create vue CLI app using the below command.
vue create sweetAlert2Example
Now, we will install vue-sweetalert2 npm package that will allow making the HTTP requests.
npm install -S 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({
el: '#app',
render: h => h(App)
});
Now in the main app, you can access all the methods of Vue-Sweetalert2 using the $swal function.
src/components/app.vue
<template>
<button @click="showAlert">Hello world</button>
</template>
<script>
export default {
methods: {
showAlert() {
// Use sweetalert2
this.$swal('Hello Vue world!!!');
},
},
};
</script>
If you want a modal / popup that can accept user input, simply use the input key in the configuration passed to $swal.
<template>
<button v-on:click="sweetAlert">Click Me!</button>
</template>
<script>
export default {
data() {
return {}
},
methods: {
sweetAlert() {
this.$swal({
title: 'What is your Name?',
input: 'text',
inputPlaceholder: 'Enter your name here...',
showCloseButton: true,
});
}
}
}
</script>
Also, you can set custom positioned dialog using position parameter.
this.$swal({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
A confirm dialog, with a function attached to the "Confirm" button.
<template>
<div class="container">
<div class="large-12 medium-12 small-12 cell">
<h1 style="font-family:ubuntu">Vue Js Sweetalert Modal Notification Tutorial - Websolutionstuff</h1>
<button v-on:click="showAlert">Show Message</button>
<button v-on:click="showAlertConfirm">Confirm Me</button>
</div>
</div>
</template>
<script>
export default {
methods: {
showAlert(){
this.$swal('This is text message!');
},
showAlertConfirm(){
this.$swal({
title: 'Are you sure?',
text: "Are you sure want to delete this item!",
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 the vue.js app by using the following command.
npm run serve
The documentation for sweetalert2
, you can find here.
You might also like :
In this small post i will show you how to disable right click using jquery. Here, we will disable right click on pa...
Aug-18-2021
In this article, we will see how to add a column to the existing table in laravel 10 migration. Here, we will learn...
Apr-24-2023
In today's digital age, where security is paramount, user authentication has become a cornerstone concern for web ap...
Aug-21-2023
Hello Dev, In this example we will see how to push array element in node.js example. I will share some example about&...
Oct-11-2021