Add pagination to Vue CLI app

@vincent15000 It's a stand alone Vue app. Am usimg Laravel for APIs

@kenprogrammer Laravel API can manage the pagination.

@vincent15000 Using Resources? and if so how do I break table listing into multiple pages on the frontend?

A code sample would be highly appreciated. See the code below on how am rendering the table.

<template>
    <div class="row" style="padding-top: 5px;">
      <div class="col-md-12">
        <router-link to="/create" class="btn btn-info" role="button">New Supplier</router-link>
      </div>
    </div>
    <div class="row" style="padding-top: 5px;">
      <div class="col-md-12">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>Name</th>
              <th>Phone</th>
              <th>Email</th>
              <th>Location</th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="supplier in suppliers" :key="supplier.id">
              <td>{{supplier.name}}</td>
              <td>{{supplier.phone}}</td>
              <td>{{supplier.email}}</td>
              <td>{{supplier.location}}</td>
              <td><router-link :to="{ name: 'Edit', params:{id: supplier.id}}" class="btn btn-info" role="button">Edit</router-link></td>
              <td><a href="#" class="btn btn-danger" role="button" @click="deleteSupplier(supplier.id)">Delete</a></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</template>

<script>
import axios from 'axios'
import Swal from 'sweetalert2'

export default {
  name: "Index",
  data() {
    return {
      suppliers:[],
    }
  },
  mounted () {
    this.showData();
  },
  computed: {
   
  },
  methods:{
    async showData(){
      try {
        const res = await axios.get(`http://localhost:8000/api/suppliers`);
        this.suppliers = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    async deleteSupplier(supplier_id){
      try{
          let confirmDelete=confirm('Are you sure you want to delete?');
          if (confirmDelete) {
            const res = await axios.delete(`http://localhost:8000/api/suppliers/${supplier_id}`);
            console.log(res.data);
            location.reload()
          }else{
              Swal.fire('Record not deleted!', '', 'info')
          }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

@kenprogrammer Yes with resources. This is an API in one of my projects.

public function list(Request $request)
{
    $levelId = isset($request->levelId) ? $request->levelId : null;
    $perPage = isset($request->perPage) ? $request->perPage : 10;
    $prices = PriceResource::collection(Price::
        with('level')
        ->with('funding')
        ->with('type')
        ->with('state')
        ->when($levelId, function($query) use ($levelId) {
            $query->where('level_id', $levelId);
        })
        ->paginate($perPage)
    );
    return $prices;
}

@vincent15000 What about the Vue side? That's where am having problems.