videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Vue.js 3 Emoji Picker With Live Preview Component in Browser Using vue3-emoji-picker in TS
Jan 17, 2025
Get the full source code of application here:
https://codingshiksha.com/vue/build-a-vue-js-3-emoji-picker-with-live-preview-component-in-browser-using-vue3-emoji-picker-in-ts/
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 how to
0:04
integrate this Emoji picker inside your
0:07
view3 application using a custom module
0:10
that I will show you in this video so
0:12
you can pick any emojis you can search
0:15
here and then as soon as you select the
0:18
Emoji it will print your selected
0:21
Emoji you can even customize the color
0:24
as well so all these emojis it will if
0:28
you want to integrate this the name of
0:30
the package is if you go to npmjs.com
0:33
just search for this package which is
0:36
view3 Emoji picker so if you go to the
0:40
search field so just write here view3
0:43
Emoji
0:44
picker so this is actually the module
0:48
here uh so you just need to install this
0:51
so the command is very simple I've
0:53
already installed it so it's almost got
0:56
13,000 weekly downloads so the themes
0:59
are there you can see Dark theme is also
1:01
supported so now to get started uh we
1:05
need to first of all integrate this
1:07
module just go to your main.ts
1:11
file either you can register here or you
1:14
can directly inside your app. view you
1:18
can directly write this inside your
1:20
template and then inside your typescript
1:23
code in the script section first of all
1:25
we need to require
1:27
this so for requiring this we use the
1:32
import
1:33
statement Define
1:35
component the base packages then we
1:38
import this Emoji
1:43
picker from this package view3 emoi
1:46
picker you can just explicitly tell the
1:49
language is
1:50
typescript and then we also need to
1:52
import this CSS
1:57
file after that we can export this comp
2:04
component and we can register this so
2:08
Emoji Pi so
2:09
we now we have the setup function so
2:13
here we actually declare the varibles
2:16
which will be required for this
2:18
application so selected Emoji which will
2:20
be null so by default no Emoji will be
2:24
selected and then now we go to the
2:27
template section where we need to render
2:29
this
2:30
so we write the
2:32
HTML give it a div ID
2:37
app give it a simple ID uh heading view3
2:42
Emoji
2:44
picker so then we use this component
2:47
which is Emoji picker and it actually
2:50
takes some parameters first of all the
2:52
native which will be true and then as
2:55
soon as you pick a Emoji this call back
2:58
function will execute
3:01
add the rate
3:03
select and here we binded this custom
3:06
function on select Emoji so right here
3:09
we need to Define this
3:14
function so here we can Define this on
3:17
select Emoji so the Emoji will be there
3:20
in this
3:23
automatically so you say selected Emoji
3:26
do value is equal to Emoji
3:30
and then we just need to return this so
3:32
that we can
3:35
use selected emoji
3:42
and
3:43
so if you refresh now uh your
3:46
application you will see this Emoji
3:48
pickle and
3:51
uh so now to select and render the Emoji
3:54
that is selected you can inside your
3:56
template just after this
3:59
we can have a if condition that V if if
4:04
this variable is initialized then only
4:07
execute this so you simply say your
4:09
selected
4:12
Emoji so I have given all the source
4:15
code in the description of this video so
4:17
selected Emoji do
4:23
I and then the actual value
4:34
so you can see this is your emojis which
4:37
are selected so in this way you can
4:40
integrate this Emoji picker very
4:44
easily and thank you very much guys for
4:46
watching this
4:47
video If you like this video then please
4:50
hit that like button subscribe the
4:52
channel as well and also check out my
4:56
website as well free mediat tools.com uh
4:59
which contains thousands of tools
5:01
regarding audio video and image and I
5:04
will be seeing you guys in the next
5:06
video
#Online Media
#Online Video