videocam_off
This livestream is currently offline
Check back later when the stream goes live
Up next in 10
Build a Vue 3 Pagination Project to Paginate Multiple Images With Controls Using v-page in TS
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/c8b929760755485e9af2195570eeea40
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you how to
0:04
implement pagination from a series of
0:07
images that are stored inside your
0:10
directory inside your VJs project so we
0:13
have these local images so I'm just
0:15
showing the two images per page so you
0:18
can see the pagination controls out
0:20
there we have the first page last page
0:23
and then we are on the first page which
0:25
we have highlighted and then if I go to
0:28
the second page the next two image will
0:30
come you will see that same goes with
0:33
the third page as well so we will
0:34
implement this pagination I will show
0:36
you this module which is there
0:38
specifically built for vuejs 3
0:41
application so a simple pagination bar
0:43
component for view3 and the command is
0:46
very simple you just need to install
0:49
this I've already installed it it's
0:50
almost having 269 weekly
0:53
downloads and they have a nice little
0:56
documentation so first of all in order
0:58
to register this you need to go to your
1:00
main.ts file in typescript so right here
1:04
you need to first of all globally
1:06
register this component so at the very
1:09
top here you
1:11
will simply import this so I have given
1:15
all the source code in the description
1:17
of this video so you can check out the
1:18
source code and pagination bar you will
1:21
simply import this like this from this
1:24
plug-in V page and it's almost 6.62
1:28
kiloby so we add this import statement
1:31
and then we can simply use it by
1:33
registering it by using the component
1:37
function and here we provide the
1:40
component name which is pagination bar
1:42
and then we pass this component which is
1:44
pagination bar that's all uh that's all
1:48
that we need to do in this file you can
1:49
now close this now we come to the app.
1:52
view file I will show you from scratch
1:55
so first of all I will um
2:00
write our typescript
2:02
code so inside this we will first of all
2:05
import the requirements the necessary
2:08
packages which is reference and computed
2:11
which is there in the built-in view
2:14
package we import this and then we
2:18
basically put the images that we want to
2:20
page inate using reference we will
2:22
create this variable this empty this
2:26
array of objects so each object will Cor
2:30
respond to one image which will contain
2:31
two properties ID and actually the
2:34
source so where your images are located
2:37
so my images are located in
2:40
my source directory so I have just
2:44
you'll see inside source we have the
2:46
assets folder and we have all these six
2:49
images that I will be using for the
2:51
pagination so what I will do I will
2:55
simply copy
2:57
paste so you will add adjust your path
3:00
accordingly so after you get your images
3:04
now I will declare some more variable
3:08
for the pagination so the current page
3:10
value will be one you will on the first
3:13
page and then how many items you want to
3:15
display items per page so it will be two
3:18
so I will be displaying two images per
3:21
page you can even modify that as well so
3:23
then we will calculate the total rows
3:26
which will be required for the
3:27
pagination so this will be images. value
3:31
do
3:33
length so how many images are there so
3:37
we have six images so the total rows
3:39
will be six and now we need
3:44
to Loop through and display all the
3:47
images so right in the template we will
3:49
display the
3:51
images inside this div section we will
3:53
give it a class here of image
3:56
gallery and right here will will be
3:59
looping
4:01
through the images using this V for
4:04
directive so image in and you'll be
4:07
making this page uh computed property
4:09
which is paginated
4:11
images so just wait I will Define that
4:14
in the types script so then we
4:20
will also attach the source attribute
4:23
which is image.
4:25
source so right here what we are doing
4:27
we are looping through all the images
4:29
and and
4:30
then uh right here we are attaching The
4:33
Source property and the actual key
4:35
property as well so now we need to
4:38
Simply make this computed property which
4:40
is paginated images right in your
4:43
typescript
4:44
code this is your computed property
4:47
which will
4:48
calculate the pagination for us so when
4:52
so this is a computed property this is
4:54
not a function it's a property so which
4:56
is computed every time when we render
4:59
content so we for this we need to
5:01
calculate the starting
5:04
index so whatever is your current page
5:06
value we will subtracted minus one and
5:09
then multiply it by how many items you
5:11
want to display this is a simple formula
5:14
for the pagination and then for the
5:16
ending index
5:18
we start plus items per page and then we
5:22
return only those
5:23
images we use the slice function which
5:26
is a JavaScript function and we return
5:29
the only the array we slice it starting
5:32
and adding index so now what happens the
5:36
images will display if you refresh
5:46
it uh it is saying that paginated images
5:48
was accessed during render but it is not
5:51
defined on
5:52
instance uh me just refresh
5:58
it just make sure that
6:03
you paginated images sorry this I made a
6:07
spelling mistake right here this is
6:09
paginated
6:15
images paginated
6:18
images I think some paginated
6:27
images I think some kind of typo mistake
6:30
I have done because this is not accessed
6:32
if you see this is not highlighted uh
6:35
that's why it is creating some kind of
6:38
problem let me paste it once again I
6:41
think I made some kind of spelling
6:44
mistake
7:02
so if you just refresh here now uh we
7:06
have given this stylesheet code all this
7:08
code is given in the description of this
7:10
video so we have this pagination
7:13
controls out there inside this
7:17
uh so if you now see now we are looping
7:22
through the
7:23
images
7:25
so if I go to the browser here uh you
7:28
will see now two images will be
7:31
displayed these are the two images so I
7:34
can now resize
7:37
it by applying some CSS code
7:40
here so uh we have given this class here
7:44
which you can see which is image gallery
7:47
so we can go to the CSS and just resize
7:50
these images so just style it somewhat
7:54
so you just put style tag and paste the
7:57
CSS
8:00
so if you refresh now you will see the
8:01
images will get resized we just pasted
8:05
the CSS we're just making the width 200
8:08
High
8:10
200 and now for showing the pag Nation
8:13
controls just after this div tag we will
8:17
be
8:18
showing just give it a class here which
8:21
is pagination
8:23
container and for the pag controls we
8:26
have this uh plugin here pagination
8:34
bar and it actually takes these
8:36
parameters we need to attach it one by
8:39
one so which is V model which is
8:41
correspond to the current page value
8:44
then we need to provide the value which
8:46
is total row which is we have also
8:48
created this variable which is total
8:51
rows and then it takes how many page
8:55
size so this corresponds to how many
8:58
items you want to display
9:00
this also we have created this variable
9:02
if you see early on so we created these
9:05
variables which is items per page total
9:07
rows and the current page so we're just
9:10
attaching these inside this plug-in one
9:12
by one and then we can even bind an
9:15
onchange event handler as well so
9:18
whenever you change the page in the pag
9:20
Nation this call back function will
9:22
execute and we can even give it a class
9:26
as well which is pagination bar if you
9:28
want to style it so now I just need to
9:30
Define this function which is on page
9:33
change so now it
9:36
executes as soon as you click on a
9:39
particular page number to navigate to a
9:41
different
9:44
page so this function will actually have
9:48
this page
9:50
info
9:52
and Page info is if you see
9:58
uh so
10:00
is Page info
10:03
is imported from this module V
10:10
page so inside this now we now need to
10:14
one by one render out the buttons so
10:18
first of button is your pagination uh
10:21
first
10:24
page so pagination first page is a rade
10:28
component or or button component if you
10:30
see pagination first page so it is
10:32
coming from this plug-in V page so if
10:36
you refresh it now you will see the
10:37
first page
10:41
appearing similarly we will be rendering
10:45
all these buttons one by one
10:51
so so we have the first page previous
10:55
page page numbers this is for the paging
10:57
Nation page numbers then we have the
10:59
next page and the last page so all these
11:02
components are pre-built and we are
11:05
simply importing it if you see we are
11:07
importing all these from this package
11:10
which is V page so if you refresh
11:17
now and for this pagination container we
11:21
do need to paste all the CSS necessary
11:24
CSS so what I will do I will
11:28
copy the Styles here so just to align
11:32
the pagination controls right in the
11:33
center position so I will paste all
11:35
these Styles so now if you see the
11:38
pagination appears in the center
11:40
position and we are on the first page as
11:42
we reload the application so first of
11:44
all we will be the first page will be
11:46
highlighted and we are showing two
11:48
images and then I navigate to the second
11:51
page third page and now the last page is
11:54
disabled similarly on the first page the
11:57
first page is disabled so in this this
11:59
way guys you can implement this
12:00
pagination very easily using this vuejs
12:03
3 package and the nice thing is that uh
12:07
if you want to change the number of
12:09
images that you want to display on per
12:11
page you can change this variable items
12:14
per page so now what happens it will
12:17
automatically allocate the number of
12:19
pages so total six images are there so
12:22
on the first page we are displaying
12:24
three images and then on the second page
12:27
the next three images so in this way you
12:29
can implement the pag nation in VJs 3
12:32
using this plugin I have given all the
12:34
source code in the description of this
12:38
video so if you need the full source
12:40
code of this project you can go to the
12:41
description so thank you very much for
12:43
watching this video please hit that like
12:45
button subscribe the channel and also
12:48
check out my website as well free mediat
12:50
tools.com uh which contains thousands of
12:53
tools regarding audio video and image
12:57
and I will be seeing you guys in the
12:58
next video