Vue Js Sweetalert Modal Notification Tutorial

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.

Step 1 : Create Vue.js App

In this step, we need to create vue CLI app using the below command.

vue create sweetAlert2Example

Step 2 : Install vue-sweetalert2 Package

Now, we will install vue-sweetalert2 npm package that will allow making the HTTP requests.

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 = falseVue.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.

Example 1

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>

Example 2

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>

Example 3

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
})

Example 4

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 , you can find here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API. Visit Website: http://websolutionstuff.com/