Ziaqkh Vue Laravel Pagination

This component provides a responsive and easy-to-use pagination solution for your Vue.js applications, designed to work with standard Laravel pagination responses. It displays pagination links with "Previous" and "Next" navigation, as well as ellipses to shorten long page lists, showing only about 5 page links at a time around the current page.

Features

• Full Navigation: Supports "Previous", "Next", and page number links.
• Compact Display: Automatically displays ellipses (...) to shorten the list of pages, focusing on the current page and a few surrounding pages (maximum 5 page number links).
• Responsive: Designed with Tailwind CSS for an adaptive layout across various screen sizes.
• Accessibility: Includes descriptive aria-label attributes to enhance accessibility.
• Easy Integration: Designed to accept a standard Laravel pagination object.

Installation

To use this component in your Vue.js project, install it via npm:

npm i ziaqkh-pagination-vue-laravel

After installation, import and use the component in your Vue files.

Prerequisites
This component relies on Tailwind CSS for its styling.
Please ensure that Tailwind CSS is properly installed and configured in your project before using this pagination component.

Usage

Props

This component accepts one prop:

• pagination (Object, required):
  An object containing pagination information, structured like a standard Laravel pagination response (e.g., current_page, last_page, and links).

Example Pagination Object Structure

{
  "current_page": 1,
  "data": [],
  "first_page_url": "http://localhost?page=1",
  "from": 1,
  "last_page": 10,
  "last_page_url": "http://localhost?page=10",
  "links": [
    { "url": null, "label": "« Previous", "active": false },
    { "url": "http://localhost?page=1", "label": "1", "active": true },
    { "url": "http://localhost?page=2", "label": "2", "active": false },
    { "url": "http://localhost?page=3", "label": "3", "active": false },
    { "url": "http://localhost?page=4", "label": "4", "active": false },
    { "url": "http://localhost?page=5", "label": "5", "active": false },
    { "url": "http://localhost?page=6", "label": "6", "active": false },
    { "url": "http://localhost?page=7", "label": "7", "active": false },
    { "url": "http://localhost?page=8", "label": "8", "active": false },
    { "url": "http://localhost?page=9", "label": "9", "active": false },
    { "url": "http://localhost?page=10", "label": "10", "active": false },
    { "url": "http://localhost?page=2", "label": "Next »", "active": false }
  ],
  "next_page_url": "http://localhost?page=2",
  "path": "http://localhost",
  "per_page": 15,
  "prev_page_url": null,
  "to": 15,
  "total": 149
}

Emits

• page-changed (number)
  Emitted when the user clicks a pagination link. The event payload is the new page number.

Example Implementation

<template>
  <div>
    <!-- Display your data here -->
    <div v-for="item in items" :key="item.id">
      {{ item.name }}
    </div>

    <!-- Pagination Component -->
    <Pagination :pagination="paginationData" @page-changed="handlePageChange" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Pagination from './Pagination.vue'; // Adjust path if necessary

const items = ref([]);
const paginationData = ref({});

// Function to fetch data from the API
const fetchData = async (page = 1) => {
  try {
    const response = await fetch(`https://api.example.com/data?page=${page}`);
    const data = await response.json();

    items.value = data.data;
    paginationData.value = data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

// Handler when the page changes
const handlePageChange = (pageNumber) => {
  console.log('Changing page to:', pageNumber);
  fetchData(pageNumber);
};

// Fetch data when the component is first mounted
onMounted(() => {
  fetchData();
});
</script>

Styling

This component uses Tailwind CSS for styling.
Ensure Tailwind is correctly configured in your Vue project for the styles to apply properly.

You can customize the appearance by modifying the Tailwind classes within the component’s template or by adding custom styles in the <style scoped> section if needed.

Contributions

If you have suggestions or find bugs, feel free to open an issue or submit a pull request on the GitHub repository.