How to Use Sweet Alert in Vue JS?

May 10, 2020 | Category : 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.


import Vue from 'vue'

import App from './App.vue'

import VueSweetalert2 from 'vue-sweetalert2';

Vue.config.productionTip = false


new Vue({

render: h => h(App),


Step 4: Updated HelloWorld Component

Here, we will create HelloWorld.vue component with following code.



<div class="container">

<div class="large-12 medium-12 small-12 cell">

<h1 style="font-family:ubuntu">Vue toastr notifications example -</h1>

<button v-on:click="showAlert">Hello world</button>

<button v-on:click="showAlertConfirm">Confirm Me</button>





export default {

methods: {


this.$swal('Hello Vue world!!!');




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



'Your file has been deleted.',









Now you can run vue app by using following command:

npm run serve

I hope it can help you...