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.

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, please refer to the tutorials below:

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).

Image from Gyazo

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

Image from Gyazo

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.

Image from Gyazo Image from Gyazo

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.

Image from Gyazo

Click [Swagger UI].

Image from Gyazo

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

Image from Gyazo

Enter 1 in the "pageID" field.

Image from Gyazo

Then, click [Execute].

Image from Gyazo

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

Image from Gyazo

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:

/pages/news/list/_page.vue
<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.

Image from Gyazo

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:

/pages/news/list/_page.vue
<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.

Image from Gyazo

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:

/pages/news/list/_page.vue
<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.

Image from Gyazo

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 

Image from Gyazo

If you have any other questions, please contact us or check out Our Slack Community.