HDTuto.com

How to Use Sweet Alert in Vue JS?



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




May 10, 2020 | Category : Vue.js



Blog Search