videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Vue.js 3 VueToastify Tutorial to Show Toast & Notification Alert Messages in Browser Using TS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/a83fb93490694d5f47040768196200c9
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you yet
0:04
another toast uh library inside W vi3
0:08
you can display
0:10
error notification
0:13
warning in various directions bottom
0:16
left bottom right bottom center you will
0:19
see all these toast notification
0:22
messages you can display so the name of
0:24
the package is View toasttify and if you
0:27
just go to npmjs.com just search for
0:30
this package view3 toasttify
0:33
this is actually the package and I've
0:36
already installed
0:39
it so this is the command it's almost
0:42
got 23,000 weekly downloads so they do
0:46
offer their own website you can check
0:48
out their documentation so view3
0:50
toasttify jsb bridge.com
0:53
and uh so here you can get
0:58
started so I will show you the
1:01
instruction how to get started uh so
1:04
after installing it just inside your
1:07
app. viw
1:08
file we will have a template tag and
1:12
inside this we will
1:14
have a various buttons so first of all
1:18
show a default toast
1:21
method a button and bind this on click
1:24
listener to it so when you click this it
1:27
will execute a method show default toast
1:31
so now inside our typescript script tag
1:34
we just need
1:36
to import this package first of all so
1:38
we simply import this like
1:41
this which is coming from this
1:52
view3
1:54
to5 so once you import this we also need
1:57
to import it uh C SS file as
2:03
well so after that we just need to
2:07
export this
2:11
component the setup file which will
2:14
contain
2:16
the in definition for that function so
2:19
show default toast it's a arrow function
2:22
so right here we Define this we simply
2:25
call this toast and here we pass this is
2:30
a
2:32
default toast like
2:36
this we pass the error message and then
2:40
the second argument it takes an object
2:42
autoc close so it basically closes after
2:45
2 second and
2:49
now we can return this
2:54
basically just add this return statement
2:57
and we will return use this method show
3:00
default toast so if you refresh now so
3:03
what happens if I refresh we have this
3:06
now it's a default toast it doesn't
3:08
contain the success the icon it appears
3:12
for 2 seconds and goes away and now
3:14
let's suppose if you also want to
3:16
display
3:18
uh success call back so you will say
3:22
success and this is a success toast and
3:26
then it also takes one other attribute
3:30
is a position you can say all these
3:33
positions are supported bottom left
3:36
bottom right so let's suppose I choose
3:39
the bottom center position so now what
3:43
happens you will see that so it appears
3:47
like this so all these positions are
3:50
supported
3:56
and if I change it to warning
4:01
so it appears
4:05
inside this warning icon will show so
4:08
all these icons
4:09
FS same goes with the
4:16
error so in this way you can show it and
4:20
lastly we have the info so four types
4:23
are there inside your toast notification
4:26
so it has various colors so you can uh
4:31
check out their documentation to read
4:33
more about it
4:37
so so positioning I showed you various
4:40
positions how to customize it so this
4:44
was actually the tutorial guys on how to
4:47
use this package inside view3 so thank
4:50
you very much for watching this video
4:52
and do check out my website as well uh
4:55
free mediat tools.com which contains
4:57
thousands of tools regarding audio video
4:59
and image and I will be seeing you guys
5:02
in the next video
#Educational Software
#Other