Up next in 10
Vue.js 3 Tutorial to Show Country Flag Icons Using vue-country-flag Library in TypeScript
14K views
Jan 9, 2025
Get the full source code of application here: https://gist.github.com/gauti123456/3fd90d7137d5c0d91fa50473cbe30245
View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video I will show you a package
0:04
which inside view3 where you can
0:06
integrate it to show country flags of
0:09
all the countries so you can see United
0:11
States France India so in this way you
0:14
can use this package I will show you the
0:16
full configuration the package name is
0:19
if you go to npmjs.com and just search
0:22
for this package which is view country
0:25
flag next if you just search view
0:29
country
0:33
flag next so this is actually the
0:37
package uh just search for this
0:42
and I've already installed it
0:45
so the command is
0:48
simple and then it's almost having
0:50
11,000 weekly downloads it's a pretty
0:53
popular package and now to configure
0:55
this package you just need to open your
0:58
main.ts file uh inside your UJS project
1:01
and then you need to require this
1:05
package you need to configure it just
1:08
register it so we just need to write the
1:11
import statement import country flag and
1:15
this will be coming from the package
1:18
view country flag next and it's almost
1:22
298 kilobytes so we import this package
1:26
then we just need to register it so we
1:28
just say app. component
1:30
and then the component name which is
1:32
country flag and the pass the actual
1:36
package country flag that's all so now
1:40
you can close this file and now come to
1:42
the app. view file
1:44
so just create the template and inside
1:48
the template we
1:50
will
1:52
Define the country flags that you need
1:55
to embed so you can
1:58
directly Ed read this right here we have
2:03
the component country flag and we pass
2:06
the option so which is the country so
2:08
which country you want to display the
2:10
flag so TW letter digit code of that
2:13
country so us United States and then you
2:16
can even configure the size as well so
2:19
if you want the size of the flag to be
2:21
big so you will say size is equal to Big
2:24
so if you refresh your browser you will
2:27
see now the flag is appear in you will
2:33
see so in this way you can do this for
2:37
other countries as well
2:40
so just need the two letter digit
2:54
code so you'll see all these flags will
2:57
appear
3:00
so in this easy way you can integrate
3:02
this module uh you import this first of
3:05
all then come inside your template
3:11
just so we have these two parameters
3:14
country and the size here you we also
3:17
have normal size as well and if you also
3:22
want small size so three op three
3:24
options are there big normal big small
3:27
so you will see depend depending upon
3:30
your applications if you need the
3:33
large size you can use that as well so
3:37
this is the actual module uh very simple
3:41
module
3:42
uh you can just check out their
3:45
documentation as well
3:47
so so there is also this property
3:50
rounded so if you do want the flag to be
3:53
rounded you will put this property and
3:55
provide it to true so now it will have
3:58
rounded Corners so if you refresh you
4:00
will see now it has rounded Corners the
4:04
flag and if you do want a shadow as well
4:08
by default it is set to false but you
4:10
can even provide a shadow as well so you
4:13
can add these two
4:20
options so in this way you can add this
4:23
very
4:26
easily so it will just enhance it just
4:29
giveing giving a slight little Shadow to
4:31
the flag so now it is having this nice
4:34
little Shadow as well
4:36
so so these are all the options
4:39
it supports so thank you very much for
4:42
watching this video and do check out my
4:44
website as well free mediat tools.com uh
4:48
which contains thousands of tools
4:50
regarding audio video and image and I
4:53
will be seeing you in the next video
#Computers & Electronics
#Programming
#Software