Skip to main content

Creating content page with Kuroco and Nuxt.js

This tutorial explains how to display the list and detail pages of the "News" content in Kuroco using Nuxt.js.


This tutorial assumes that you have already set up a project with Kuroco and Nuxt.js.
If you have not yet set up one, please refer to the following tutorial.
Beginner's guide to Kuroco

Kuroco settings

Creating content

First, create the content on the Kuroco management screen. Create a "News" topic group by referring to the Creating topic group(s) page.

Please check the WYSIWYG option for the Content input method.

Image from Gyazo


Note about the "News" topic, configure View/Edit restriction "No selection".
Please refer here for View/Edit restriction.

Next, create a topic from the created "News" topic group. Create it as follows.

Image from Gyazo

This completes the content creation.

Basic API setup

Next, we will set the API, select [BackendAPI] under [API] selection from the Kuroco management screen.

fetched from Gyazo Click [Security] and select "Cookie".

fetched from Gyazo When cookie(s) are used as a token for security, if the API domain and the front end domain are different, there will be a problem with the third party cookie, and the authentication will not work in browsers such as Safari.
Since it is necessary to set the front end and API domain with different subdomains, please set the API domain in Custom domain/TLS certificate and change the API domain in Account Settings.
(Since it works normally in Chrome, we recommend that you build it in Chrome first at the development and testing stages.)

If there are no problems, click [Save].

Setting up CORS

Click [Operation CORS].

fetched from Gyazo Click [Add Origin] in CORS_ALLOW_ORIGINS and add the following:

  • http://localhost:3000/

Click [Add Method] for CORS_ALLOW_METHODS and add the following:

  • GET
  • POST

Image (fetched from Gyazo) If there are no problems, click [Save].

Setting up the endpoints

Next, we need endpoints to get the content "News" created earlier.
In this exercise, we will create two endpoints, "News List" and "News Details".

First, create an endpoint for the news list.
Click [Configure Endpoint].

Image (fetched from Gyazo) Enter the following:

  • Path:news
  • Category:Content
  • Model:Topics
  • Operation:list

fetched from Gyazo Also, enter the group ID of the topic group "News" in "topics_group_id" in the center of the screen.

fetched from Gyazo Reference) The group ID can be found on the topic group list screen.

fetched from Gyazo After entering all the details, click "Add" at the top or bottom of the screen.

Image (fetched from Gyazo) This completes the endpoint creation of the "News List".

Next, create an endpoint for "News Details". Similarly to "News list", click [Configure Endpoint] and set the following.

  • Path: newsdetail
  • Category: Content
  • Model: Topics
  • Operation: details
  • topics_group_id: (target group ID)

fetched from Gyazo fetched from Gyazo After entering all the details, click "Add".

This completes the Kuroco settings.

Display content list using Nuxt.js

The content is created in Kuroco and displayed using Nuxt.js.

Vue file creation

Next, display the content that was created earlier in Nuxt.js.

Create a file in the Nuxt installation directory with the following structure.
Create a news directory under the pages directory, and create "index.vue" and "_slug.vue" files under it.

- news
- _slug.vue
- index.vue

Image (fetched from Gyazo) Create an index.vue file The index.vue file is a Vue that displays a list of topics groups "News".
It's written as follows:

<p>News list</p>
<div v-for="n in response.list" :key="n.slug">
<nuxt-link :to="`/news/${n.topics_id}`">
{{ n.ymd }} {{ n.subject }}

export default {
async asyncData({ $axios }) {
return {
response: await $axios.$get('/rcms-api/2/news'),

Note) For /rcms-api/2/news, please enter the path specified on the Kuroco management screen.

fetched from Gyazo Save the above code and access http://localhost:3000/news.
The following screen will be displayed.
Image (fetched from Gyazo) Create a _slug.vue file
The _slug.vue file is a Vue that displays the details of the topic group "News".
It's written as follows:

<h1 class="title">{{ response.details.subject }}</h1>
<div class="post" v-html="response.details.contents"></div>

export default {
async asyncData({ $axios, params }) {
return {
response: await $axios.$get(`/rcms-api/2/newsdetail/${params.slug}`),

Note) For /rcms-api/2/newsdetail, please enter the path specified on the Kuroco management screen.

fetched from Gyazo Save the above code and click the title of the news list screen to display the details screen as shown below.

Image (fetched from Gyazo)


This concludes the explanation of how to set up Kuroco and Nuxt.js.
Did it display correctly?
You can learn more from the following references:

  • Kuroco API settings
  • Viewing Kuroco content using Nuxt.js

Please utilize these to build your own site.


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