Creating content list page with Kuroco and Nuxt.js

This tutorial explains how to set up a Nuxt.js project using Kuroco.
We will display the list and details page of "News" topic group in Nuxt.js.

Installing Nuxt.js

First, we need to install Nuxt.js.
To do that, it's necessary to install vue-cli first.
Execute the following in the terminal.

npm install -g vue-cli

Now that we can use Vue commands, we can create new projects using the nuxt/starter template.
Next, execute the following command:

npm init nuxt-app project-name

Note) Enter the desired name for project-name.

Next, there will be a multiple-questions prompt. Please enter the following:

Project name: project-name
Programming language: JavaScript
Package manager: Npm
UI framework: None
Nuxt.js modules: Axios
Linting tools: None
Testing framework: None
Rendering mode: Universal (SSR / SSG)
Deployment target: Static (Static/Jamstack hosting)
Development tools: None
What is your GitHub username? (Your own Git username)
Version control system: Git

After answering all the questions, the project-name directory will be created.
Navigate to the created directory.

cd project-name

Execute the following to install Nuxt.js.

npm install
npm run dev

Nuxt.js is now installed. The following will be displayed on the terminal.

Image (fetched from Gyazo)

In the above case, accessing http://localhost:3000/ will display the following screen.

Image (fetched from Gyazo)

axios-module installation

Next, install the Axios Module.
Reference) For details on the Axios Module, please refer to the Introduction to nuxt/axios page.

Execute the following to install the axios-module.

npm install --save @nuxtjs/axios

Next, add the following to nuxt.config.js.

nuxt.config.js
  modules: [
    '@nuxtjs/axios'
  ],

This completes the installation of axios-module.

Using the env file

Next, create an env file.

When using the API, a third party may be able to see the URL, API KEY, etc. that is written in the Vue file.
To prevent such security risks, create an env file and include information in the env file that you do not want others to see.

Creating an .env file

Create .env directly under the Nuxt.js installation directory. In .env, write the URL of Kuroco's management screen.

.env
BASE_URL = https://example.kuroco.app

Note) In example.g.kuroco.app, enter the API domain on your Kuroco management screen. You can check the API domain from the [API] page of the Kuroco administration screen.

Image (fetched from Gyazo)

Note) When managing files on GitHub, please do not publish the env file in .gitignore.

Install dotenv

Execute the following command in the Nuxt.js installation directory to install dotenv.

npm install @nuxtjs/dotenv

Adding dotenv to nuxt.config.js

Add the following to nuxt.config.js.

nuxt.config.js
require('dotenv').config();
const { BASE_URL } = process.env;

Also, add the following in module.exports.

nuxt.config.js
  env: {
    BASE_URL
  }

It will be as follows.
Image (fetched from Gyazo)

This completes the Nuxt.js settings.

Kuroco settings

Next, log in to the Kuroco management screen and configure Kuroco settings.

Creating content

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

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

Image (fetched from Gyazo)

This completes the content creation.

Setting up basic API settings

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

Image (fetched from Gyazo)

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

Note)
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 Original 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].

Image (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

Image (fetched from Gyazo)

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

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

Image (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:Respective group ID

Image (fetched from Gyazo)

Image (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.

pages
 - 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:

index.vue
<template>
  <div>
    <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>

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

Image (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:

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

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

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

Image (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)

Summary

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.