@nanaaikinson24/vt-pagination v1.0.1

vt-pagination

vt-pagination is a lightweight Vue 3 tailwind pagination component.

Usage

First install the package using your preferred package manager

npm install --save @nanaaikinson24/vt-pagination

yarn add @nanaaikinson24/vt-pagination

then you can import the component with its styling like so

<script>
import {VtPagination} from "@nanaaikinson24/vt-pagination";
import "@nanaaikinson24/vt-pagination/dist/style.css";
</script>

Component Reference

Props

Full usage

JavaScript

<template>
  <div>
    <VtPagination
        :current-page="currentPage"
        :per-page="perPage"
        :total-items="totalItems"
        v-on:update:currentPage="onChangeCurrentPage"
    />
  </div>
</template>

<script>
import {defineComponent, ref} from "vue";
import {VtPagination} from "@nanaaikinson24/vt-pagination";
import "@nanaaikinson24/vt-pagination/dist/style.css";

export default defineComponent({
  name: "MyComponent",
  components: {VtPagination},
  setup() {
    const currentPage = ref(1);
    const perPage = ref(20);
    const totalItems = ref(2000);

    const onChangeCurrentPage = (page) => {
      currentPage.value = page;
    }

    return {currentPage, perPage, totalItems, onChangeCurrentPage}
  }
})
</script>

Typescript

<template>
  <div>
    <VtPagination
        :current-page="currentPage"
        :per-page="perPage"
        :total-items="totalItems"
        v-on:update:currentPage="onChangeCurrentPage"
    />
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {VtPagination} from "@nanaaikinson24/vt-pagination";
import "@nanaaikinson24/vt-pagination/dist/style.css";

export default defineComponent({
  name: "MyComponent",
  components: {VtPagination},
  setup() {
    const currentPage = ref<number>(1);
    const perPage = ref<number>(20);
    const totalItems = ref<number>(2000);

    const onChangeCurrentPage = (page: number) => {
      currentPage.value = page;
    }

    return {currentPage, perPage, totalItems, onChangeCurrentPage}
  }
})
</script>

Simplified version

<template>
  <div>
    <VtPagination
        v-model:current-page="currentPage"
        :per-page="perPage"
        :total-items="totalItems"
    />
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {VtPagination} from "@nanaaikinson24/vt-pagination";
import "@nanaaikinson24/vt-pagination/dist/style.css";

const currentPage = ref<number>(1);
const perPage = ref<number>(20);
const totalItems = ref<number>(2000);
</script>

Todo

• Publish v1
• Update the Docs (README.md)
• Add go to page functionality
• Enable styling to be updated