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.
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.
This completes the content creation.
Basic API setup
Next, we will set the API, select [BackendAPI] under [API] selection from the Kuroco management screen.
Click [Security] and select "Cookie".
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].
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
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].
Enter the following:
- Path:news
- Category:Content
- Model:Topics
- Operation:list
Also, enter the group ID of the topic group "News" in "topics_group_id" in the center of the screen.
Reference) The group ID can be found on the topic group list screen.
After entering all the details, click "Add" at the top or bottom of the screen.
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)
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
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:
<template>
<div>
<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 }}
</nuxt-link>
</div>
</div>
</template>
<script>
export default {
async asyncData({ $axios }) {
return {
response: await $axios.$get('/rcms-api/2/news'),
};
},
};
</script>
Note)
For /rcms-api/2/news
, please enter the path specified on the Kuroco management screen.
Save the above code and access
http://localhost:3000/news
.
The following screen will be displayed.
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:
<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 }) {
return {
response: await $axios.$get(`/rcms-api/2/newsdetail/${params.slug}`),
};
},
};
</script>
Note) For /rcms-api/2/newsdetail
, please enter the path specified on the Kuroco management screen.
Save the above code and click the title of the news list screen to display the details screen as shown below.
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.
Support
If you have any other questions, please contact us or check out Our Slack Community.