Splitting your contents list into multiple pages using Kuroco and Nuxt.js

When you have a large number of content entries, you may wish to split the contents list into multiple pages. Since Kuroco's topics list endpoints include the number of contents, current page, total page count, and other information in their responses, you can implement pagination without having to calculate the page count on the front-end.

This tutorial uses Kuroco and Nuxt.js to split the contents list created in this earlier tutorial.

info

To use this tutorial, you should have already built your project with Kuroco and Nuxt.js and created a contents list page. If you have not yet done so, refer to the tutorials below:

• Beginner's guide to Kuroco
• Creating content list page with Kuroco and Nuxt.js

Setting the number of contents per page on Kuroco

The number of contents displayed per page is fixed. You can set up this parameter in Kuroco's admin panel. The admin panel passes information about the pages to be displayed to the endpoints as parameters, enabling you to receive the responses for each page.

First, navigate to the endpoint list screen for the target contents list (for this tutorial, we will use the news list as an example).

Click [Update] next to the news list endpoint (in this case /rcms-api/2/news).

In the endpoint configuration dialog, enter the number of entries per page in the "cnt" field (for this tutorial, enter 4). Then click [Update] to save these settings.

Verifying that Swagger UI can retrieve the information for each page

Next, verify the endpoint response. Go to the endpoint list screen containing the news list endpoint.

Click [Swagger UI].

Under "Content", select the news list endpoint and click [Try it out].

Enter 1 in the "pageID" field.

Then, click [Execute].

In the response body, you should see 4 entries for the first page under pageInfo.

Similarly, enter a different page ID and click [Execute] to view the respective pageInfo response. Use this method to implement pagination on the front-end.

Creating dynamic pages

Nuxt.js allows you to create dynamic pages by setting directory and file names starting with _ (underscore).
Paste the file index.vue into the /news/list/ directory and rename it to _page.vue.

For dynamic pages, the 1 in /news/list/1 can be displayed as {{ this.$route.params.page }} when accessed via the URL. Add the line <p>News list page {{ this.$route.params.page }}</p> as follows:

<template>
  <div>
    <p>News list page{{ this.$route.params.page }}</p>
    <div v-for="n in response.list" :key="n.slug">
      <nuxt-link :to="'/news/' + n.slug">{{ n.ymd }} {{ n.subject }}</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    try {
      const response = await $axios.$get(
        process.env.BASE_URL + '/rcms-api/2/news'
      );
      return { response };
    } catch (e) {
      console.log(e.message);
    }
  },
};
</script>

Verify that the current page number is displayed on http://localhost:3000/news/list/** as follows.

At this stage, no page number information has been sent to the endpoint to Kuroco. Therefore, the news content displayed is identical no matter which URL is used to access the site.

Adding current page information to the parameters

The next step is to add information about the current page to the parameters to obtain the response for each page.
Modify _page.vue as follows:

<template>
  <div>
    <p>News list page{{ this.$route.params.page }}</p>
    <div v-for="n in response.list" :key="n.slug">
      <nuxt-link :to="'/news/' + n.slug">{{ n.ymd }} {{ n.subject }}</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    try {
      const response = await $axios.$get(
        process.env.BASE_URL + '/rcms-api/2/news',
        {
          params: {
            pageID: params.page,
          },
        }
      );
      return { response };
    } catch (e) {
      console.log(e.message);
    }
  },
};
</script>

Now you should see the news list displaying changing based on the access URL.

Displaying page transition links

Next, we need to create links to transition between the pages.
The pageInfo for the endpoint response contains information about the current page number and the last page. We will use this information.

For example, we can insert the simple description below:

<template>
  <div>
    <p>News list page{{ this.$route.params.page }}</p>
    <div v-for="n in response.list" :key="n.slug">
      <nuxt-link :to="'/news/' + n.slug">{{ n.ymd }} {{ n.subject }}</nuxt-link>
    </div>

    <ul style="list-style: none; display: flex">
      <li v-if="response.pageInfo.pageNo === 1">Previous</li>
      <li v-else>
        <nuxt-link :to="'/news/list/' + (response.pageInfo.pageNo - 1)"
          >Previous</nuxt-link
        >
      </li>
      <li v-for="i in response.pageInfo.totalPageCnt" :key="i">
        <nuxt-link :to="'/news/list/' + i">{{ i }}</nuxt-link>
      </li>
      <li v-if="response.pageInfo.pageNo === response.pageInfo.totalPageCnt">
        Next
      </li>
      <li v-else>
        <nuxt-link :to="'/news/list/' + (response.pageInfo.pageNo + 1)"
          >Next</nuxt-link
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    try {
      const response = await $axios.$get(
        process.env.BASE_URL + '/rcms-api/2/news',
        {
          params: {
            pageID: params.page,
          },
        }
      );
      return { response };
    } catch (e) {
      console.log(e.message);
    }
  },
};
</script>

This adds [Previous] and [Next] links to each page.

Finally, create index.vue by copying _page.vue so that it can also be accessed at the /news/list/ URL.

pages
 - news
   - list
     - _page.vue
     - index.vue