Build a Vue 3 Pagination Project to Paginate Multiple Images With Controls Using v-page in TS

main.ts

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { PaginationBar } from 'v-page';

const app = createApp(App);

// Register PaginationBar globally (if needed globally)
app.component('PaginationBar', PaginationBar);

// Mount the app
app.mount('#app');

import { createApp } from 'vue';

import './style.css';

import App from './App.vue';

import { PaginationBar } from 'v-page';

const app = createApp(App);

// Register PaginationBar globally (if needed globally)

app.component('PaginationBar', PaginationBar);

// Mount the app

app.mount('#app');

App.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { PaginationBar, PaginationFirstPage, PaginationLastPage, PaginationNextPage, PaginationPageNumbers, PaginationPreviousPage, type PageInfo } from "v-page";
// Define images
const images = ref([
  { id: 1, src: "/src/assets/1.jpeg" },
  { id: 2, src: "/src/assets/2.jpeg" },
  { id: 3, src: "/src/assets/3.jpeg" },
  { id: 4, src: "/src/assets/4.jpeg" },
  { id: 5, src: "/src/assets/5.jpeg" },
  { id: 6, src: "/src/assets/6.jpeg" },
]);
// Pagination variables
const currentPage = ref(1);
const itemsPerPage = 2;
// Total rows (images count)
const totalRows = images.value.length;
// Computed for paginated images
const paginatedImages = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return images.value.slice(start, end);
});
// Handle pagination changes
function onPageChange(data: PageInfo): void {
  currentPage.value = data.pageNumber;
}
</script>

<template>
  <div>
    <!-- Display images -->
    <div class="image-gallery">
      <img v-for="image in paginatedImages" :key="image.id" :src="image.src" alt="Image" />
    </div>

    <!-- Pagination Controls -->
    <div class="pagination-container">
      <PaginationBar
        v-model="currentPage"
        :total-row="totalRows"
        :page-size="itemsPerPage"
        @change="onPageChange"
        class="pagination-bar"
      >
        <PaginationFirstPage />
        <PaginationPreviousPage />
        <PaginationPageNumbers />
        <PaginationNextPage />
        <PaginationLastPage />
      </PaginationBar>
    </div>
  </div>
</template>

<style>
.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}
.image-gallery img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination-bar {
  display: inline-flex;
  gap: 5px;
}
.pagination-bar button {
  padding: 10px 15px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination-bar button:hover {
  background-color: #ddd;
}
.pagination-bar .active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
  font-weight: bold;
  pointer-events: none;
}
</style>

import { ref, computed } from "vue";

import { PaginationBar, PaginationFirstPage, PaginationLastPage, PaginationNextPage, PaginationPageNumbers, PaginationPreviousPage, type PageInfo } from "v-page";

// Define images

const images = ref([

{ id: 1, src: "/src/assets/1.jpeg" },

{ id: 2, src: "/src/assets/2.jpeg" },

{ id: 3, src: "/src/assets/3.jpeg" },

{ id: 4, src: "/src/assets/4.jpeg" },

{ id: 5, src: "/src/assets/5.jpeg" },

{ id: 6, src: "/src/assets/6.jpeg" },

]);

// Pagination variables

const currentPage = ref(1);

const itemsPerPage = 2;

// Total rows (images count)

const totalRows = images.value.length;

// Computed for paginated images

const paginatedImages = computed(() => {

const start = (currentPage.value - 1) * itemsPerPage;

const end = start + itemsPerPage;

return images.value.slice(start, end);

});

// Handle pagination changes

function onPageChange(data: PageInfo): void {

currentPage.value = data.pageNumber;

}

</script>

<div>

</div>

<PaginationBar

v-model="currentPage"

:total-row="totalRows"

:page-size="itemsPerPage"

@change="onPageChange"

class="pagination-bar"

</PaginationBar>

</div>

</template>

<style>

.image-gallery {

display: flex;

flex-wrap: wrap;

gap: 10px;

justify-content: center;

margin-bottom: 20px;

}

.image-gallery img {

width: 200px;

height: 200px;

object-fit: cover;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.pagination-container {

display: flex;

justify-content: center;

margin-top: 20px;

}

.pagination-bar {

display: inline-flex;

gap: 5px;

}

.pagination-bar button {

padding: 10px 15px;

border: 1px solid #ddd;

background-color: #f9f9f9;

cursor: pointer;

border-radius: 4px;

transition: background-color 0.3s ease, color 0.3s ease;

}

.pagination-bar button:hover {

background-color: #ddd;

}

.pagination-bar .active {

background-color: #3498db;

color: white;

border-color: #3498db;

font-weight: bold;

pointer-events: none;

}

</style>

Build a Vue 3 Pagination Project to Paginate Multiple Images With Controls Using v-page in TS

Comments

Leave a Reply Cancel reply

Archives