Vue Js Sweetalert Modal Notification Tutorial

vue create sweetAlert2Example
npm install -S vue-sweetalert2
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)

});
<template>
<button @click="showAlert">Hello world</button>
</template>
<script>
export default {
methods: {
showAlert() {
// Use sweetalert2
this.$swal('Hello Vue world!!!');
},
},
};
</script>
<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>
this.$swal({
position: 'top-end',
icon: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
<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>
npm run serve

--

--

--

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Event Base Architecture Using React

Slot Machine Js

Slot Machine Js

Destructuring in JavaScript

JavaScript Promises (fetch API)

Create an Ansible Roles for Webserver and Haproxy…

Different ways we can render a web page

CheckMe Project

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

Websolutionstuff

I am Laravel and PHP Developer. I have also Good Knowledge of JavaScript, jQuery, Bootstrap and REST API.

More from Medium

Laravel Sanctum — Restful API Authentication

Laravel Sanctum - Restful API Authentication

Build Web App Mini Sosmed with Laravel 8 [Part 5][End]

Laravel 8 Datatables Keeping Selected Page Number

How To Generate QR code in laravel 8 — Phpflow.com