Integrating preview page with Kuroco and Nuxt.js

In this exercise, we will learn how to use the preview functionality in a Nuxt.js project using Kuroco.

Note)
It is assumed that you have already built a project with Kuroco and Nuxt.js. If the project has not been built yet, please see here.

What is preview

It is a function to preview a topic. It is a convenient function that allows us to see the result of creating or editing an ariticle without actually applying the changes.

It allows the user preview an article by clicking the [Preview] button in Edit topics. Article content that is being edited can be previewed instantly without using the [Update/Save as draft] button to update the article.

This function will not work in the initial state. Various settings and coding on the front-end side are required.

In this exercise, we will modify the content of the project of Kuroco and Nuxt.js, Below describes the steps to enable the preview function.

Setting the preview page URL

The URL of the preview page will be set in the [Page URL handling preview] field on the Edit topic group page.

Set the link here to http://localhost:3000/news.

One of the URLs below is set to the link destination of the Preview button.

• If a relative path is specified, [Front end domain] + URL of the relative path
• If a URL containing a protocol is specified, then that URL is used

The link will have a URL query parameter that will generate new one-time tokens.

${URL}?preview_token=aaaAAA000999&validUntil=123456789

Note) About absolute path and relative path

An absolute path has been specified in the above excercise. However, if a relative path is specified, and the [Front End Domain] is as shown below.

When the Page URL handling preview parameter is set as shown below.

The link destination of the URL will be https://kuroco-dev.web.app/sub/feed/preview/?preview_token=aaaAAA000999&validUntil=1234567890

The [Front-end Domain] can be checked or changed in Account Settings.

Verifying the settings

Verifying that the link of the preview button is the set URL. The setting should be according to the existing /news endpoint.

Clicking the [Preview] button on the News Topic Edit page will open another page.

The URL of the page should be http://localhost:3000/news?preview_token=...

Creating an endpoint for the preview page

Create/set the endpoint to get the topic data for preview.

Note) Since a one-time token will be issued, specify None for authentication.

Items Settings	Setting
Path	news/preview
	Enabled/Disabled	Enabled
Model	Category	Content
	Model	Topics
	Operation	preview
Authorization	None
topics_group_id	19

For more information on API settings, please refer to API.

Making additional corrections to the front-end

Modify the request to the news/preview code in the Nuxt.js project's [index.vue]({Nuxt Project}/pages/news/index.vue) file of the news page to redirect the user to the preview of the news page.
Overwrite the [index.vue] file with sample code below.

<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 ({ route, $axios }) {

        const requestNews = async () => {
            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/news');
            return { response };
        };
        const requestNewsPreview = async (previewToken) => {
            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/news/preview' + '?preview_token=' + previewToken);
            return { response: { list: [response.details] } };
        };

        // In the URL query,
        // point to the preview endpoint if the preview_token exists
        // point to the news endpoint if the preview_token does not exists
        try {
            const previewToken = route.query.preview_token;
            return previewToken !== undefined ?
                await requestNewsPreview(previewToken) :
                await requestNews();
        }catch (e) {
            console.log(e.message)
        }
    }
}
</script>

In addition, the code difference is as follows.

--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -8,10 +8,26 @@
 
 <script>
 export default {
-    async asyncData ({ $axios }) {
+    async asyncData ({ route, $axios }) {
+
+        const requestNews = async () => {
+            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/news');
+            return { response };
+        };
+        const requestNewsPreview = async (previewToken) => {
+            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/news/preview' + '?preview_token=' + previewToken);
+            return { response: { list: [response.details] } };
+        };
+
+        // In the URL query,
+        // point to the preview endpoint if the preview_token exists
+        // point to the news endpoint if the preview_token does not exists
+        // リクエストします。
         try {
-            const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/2/news')
-            return { response }
+            const previewToken = route.query.preview_token;
+            return previewToken !== undefined ?
+                await requestNewsPreview(previewToken) :
+                await requestNews();
         }catch (e) {
             console.log(e.message)
         }

Summary

Before actually upadting the content of a topic, it can be previewed by pressing the Preview button.