Welcome folks today in this blog post we will be showing the popup toast and alert messages in browser using vue.js 3 in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new react.js app using the below command
vue create sampleapp
cd sampleapp
And after that you need to install the below library using the npm command as shown below
npm i sweetalert2
And after that you will see the below directory structure of the react.js project as shown below
And now we need to copy paste the below code inside the App.vue code as shown below
App.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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<template> <div> <h1>SweetAlert2 Dialog Box Examples</h1> <button @click="handleAlertClick">Alert Dialog</button> <button @click="handleConfirmClick">Confirm Dialog</button> <button @click="handlePromptClick">Prompt Dialog</button> <button @click="handleSuccessClick">Success Dialog</button> <button @click="handleErrorClick">Error Dialog</button> <button @click="handleWarningClick">Warning Dialog</button> <button @click="handleInfoClick">Info Dialog</button> <button @click="handleQuestionClick">Question Dialog</button> </div> </template> <script> import Swal from 'sweetalert2'; export default { name: 'SweetAlert2Demo', methods: { handleAlertClick() { Swal.fire('This is an alert dialog box!'); }, handleConfirmClick() { Swal.fire({ title: 'Are you sure?', text: 'You won\'t be able to revert this!', icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', reverseButtons: true }).then((result) => { if (result.isConfirmed) { Swal.fire('Deleted!', 'Your file has been deleted.', 'success'); } else if (result.dismiss === Swal.DismissReason.cancel) { Swal.fire('Cancelled', 'Your file is safe :)', 'error'); } }); }, handlePromptClick() { Swal.fire({ title: 'Enter your name', input: 'text', inputLabel: 'Name', inputPlaceholder: 'Enter your name', showCancelButton: true, inputValidator: (value) => { if (!value) { return 'You need to enter a name!'; } } }).then((result) => { if (result.isConfirmed) { Swal.fire(`Hello ${result.value}!`); } }); }, handleSuccessClick() { Swal.fire('Success!', 'Your action has been completed.', 'success'); }, handleErrorClick() { Swal.fire('Error!', 'Something went wrong.', 'error'); }, handleWarningClick() { Swal.fire('Warning!', 'Please be careful.', 'warning'); }, handleInfoClick() { Swal.fire('Info!', 'This is an informative message.', 'info'); }, handleQuestionClick() { Swal.fire({ title: 'Are you sure?', text: 'Do you want to continue?', icon: 'question', showCancelButton: true, confirmButtonText: 'Yes', cancelButtonText: 'No' }).then((result) => { if (result.isConfirmed) { Swal.fire('Confirmed!', 'You have clicked Yes.', 'success'); } else if (result.dismiss === Swal.DismissReason.cancel) { Swal.fire('Cancelled', 'You have clicked No.', 'error'); } }); } } }; </script> |
As you can see we are importing the sweetalert2 library at the top and then we are showing the buttons where we are showing all the popup alert messages supported by sweetalert2 library. And then we are defining the functions whenever we hit the button. And we are using the Swal.fire() method to display the popup messages as shown below
