Published - | Updated - May 18, 2021 10:09 am
261 Views
Hello Developer,
Today, i we will show you Vue JS Sweet Alert Example. This article will give you simple example of Vue JS Sweet Alert Example. you will learn Vue JS Sweet Alert Example. So let’s follow few step to create example of Vue JS Sweet Alert Example.
You need to just follow few steps to add sweetalert, so let’s see.
Step 1:- Create Vue App
1 | vue create myApp |
Step 2:- Install vue-sweetalert2 Package
1 | npm install -S vue-sweetalert2 |
Step 3:- Use vue-sweetalert2
src/main.js
1 2 3 4 5 6 7 8 9 10 | import Vue from 'vue'import App from './App.vue'import VueSweetalert2 from 'vue-sweetalert2';Vue.config.productionTip = falseVue.use(VueSweetalert2); new Vue({ render: h => h(App),}).$mount('#app') |
Step 4:- Updated HelloWorld Component
src/components/HelloWorld.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <template> <div class="container"> <div class="large-12 medium-12 small-12 cell"> <h1>Vue JS Sweet Alert Example - codeplaners.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> |
1 | npm run serve |