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.
Support
If you have any other questions, please contact us or check out Our Slack Community.