Pagination Component in Oruga UI Vue 3 and Laravel

- Andrés Cruz

En español
Pagination Component in Oruga UI Vue 3 and Laravel

With the list with the Oruga UI table ready, the next thing to do is the pagination; to do this, we are going to use the Oruga pagination component, which receives several parameters; many of them in shape, for styles and little else:

  • @change="updatePage" Event that is executed when clicking on a paginated link, in these cases you must use it to update the list
  • :total="" Indicates the total number of records
  • v-model:current="currentPage" Indicates the v-model to be updated with the current page index
  • :range-before="2" Number of pages to appear before the current page.
  • :range-after="2" Number of pages to appear after the current page.
  • order="centered" Centered pagination.
  • size="small" Pagination type.
  • :simple="false" Layout, if simple or complete.
  • rounded="true" Rounded layout.
  • :per-page="posts.per_page" How many posts to show per page.

In Laravel, when using the paging component, we have all these parameters already defined; therefore, the integration is direct.

    <br />
      v-if="posts.current_page && > 0"
export default {
  data() {
    return {
      posts: [],
      isLoading: true,
methods: {
    setTimeout(this.listPage, 100);
    this.isLoading = true;
     this.$axios.get("/api/post?page="+this.currentPage).then((res) => {
      this.posts =;
      this.isLoading = false;
  async mounted() {
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.