Up next in 10
Vue.js 3 SweetAlert2 Example to Show Alert Modal Dialogs in Browser Using vue-sweetalert2 in TS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/06c140ec97d8a3f2d33307ef2436b298
Show More Show Less View Video Transcript
0:01
uh hello guys welcome to this video so
0:03
in this video I will show you how to
0:05
integrate the sweet Alert 2 inside vuejs
0:09
3 with the specific package available so
0:12
I will show you the example here to all
0:14
show these nice little success call back
0:18
uh dialog elect boxes which is supported
0:22
by sweet aler 2 and how to integrate
0:25
inside this vuejs 3 application with the
0:28
package we have all these select this
0:32
custom alert dialog boxes which is
0:34
available inside sweet alert to so if
0:37
you just write sweet Alert 2 this is
0:41
actually a beautiful responsive
0:43
customizable dialog box is Library open
0:46
source so there is a package available
0:50
specifically built for vuejs 3 if you
0:52
just write view sweet Alert
0:57
2 and just search on npm J
1:00
. uh so this is actually the package the
1:03
command is simple I've already installed
1:06
it uh it is almost having 25,000 weekly
1:10
downloads
1:11
so first of all for integrating it just
1:14
go to your main.ts file and we need to
1:18
register this module so we need to add
1:21
some import statements so we just write
1:24
here
1:26
import view Suite aler
1:32
alert two and it will be coming from
1:35
this view site Alert 2 package it's
1:41
43
1:42
kilobytes and we are importing this view
1:45
suet alert
1:47
to and we also need the CSS file of this
1:51
package as well so we at the after this
1:55
we also import the CSS
1:57
file it's 24 k kobt and then we register
2:01
this by simply passing it to the vuejs
2:04
app app.use and then we pass this plugin
2:08
view s Alert 2 so just close this file
2:13
now it's now successfully globally
2:15
registered and now we come to the app.
2:17
view file to directly use it inside our
2:20
vuejs application so inside your
2:23
template uh
2:33
we Define a series of
2:39
buttons so I will just bind an onclick
2:42
listener
2:43
so this is for the basic
2:48
alert so we have this nice little button
2:51
bind in non click listener so when you
2:53
click this this function will execute so
2:56
now in the script types script code we
3:01
export
3:03
this the methods here which we will use
3:06
one by one so first of all the basic
3:08
alert method now we can directly use the
3:12
sweet alert package to show these dialog
3:15
boxes so we use this object and it
3:20
actually
3:21
contains this dollar sign and s w l
3:28
sweet alert
3:30
it is available here you can provide a
3:32
heading here this is a basic
3:37
alert that's all that we need to do we
3:40
Define a fun button we binded this on
3:42
click we Define this function and then
3:44
we are calling this this do
3:47
well so if you refresh your browser you
3:50
will see this button appearing if you
3:52
click it you will see this is a basic
3:54
alert so in this easy way you can use
3:57
this package to integrate sweet alert to
4:00
and
4:02
uh now in the same way we can
4:06
show more dialogue types such as success
4:10
error as
4:13
well so we binded two more buttons
4:15
success and
4:20
error I have given all the source code
4:22
in the description and now we'll be
4:25
defining success alert so
4:31
again you'll be using this
4:34
Dot and this time it takes an object
4:37
here
4:38
also you can even embed icon as well
4:41
right here the success icon and then you
4:43
can give it a customized title which is
4:46
a
4:48
success and then we can give it a text
4:52
so here your
4:55
operation
4:56
was successful
5:00
so similar way we
5:03
can show a alert window for error
5:14
message this time the icon will be for
5:24
errors so here you can say something
5:27
went drong
5:35
so we have two more buttons this now for
5:38
the success you see the success icon and
5:40
for the error you see also the icon as
5:43
well
5:44
so now uh let me just paste all this so
5:50
I just included all the examples here
5:52
which sweet supports
5:57
so so if you refresh now you will see
6:00
all these examples so I have given all
6:03
the source code in the description
6:05
so so now you can use this package which
6:09
is view site Alert 2 to integrate the
6:12
site Alert 2 package inside view 3 so
6:16
thank you very much for watching this
6:18
video and do check out my website as
6:21
well free mediat tools.com uh which
6:24
contains thousands of tools regarding
6:26
audio video and image and I will be
6:28
seeing you guys in the next video