Building a multi-language website with Kuroco and Nuxt.js

This tutorial explains how to build a multi-language website with your Nuxt.js project using Kuroco.

Before starting this tutorial, you should have already built a Nuxt.js project with Kuroco. If you haven't done so, see Tutorial: Creating a content list page with Kuroco and Nuxt.js on how to build one.

1. Install nuxt-i18n

First, install nuxt-i18n. In your terminal, go to the directory of the target project and execute the following command:

npm i nuxt-i18n

2. Create a locales folder

Next, create a locales folder in the project directory and save the locale file for each language in JSON format. For this tutorial, we will create the files locales/en.json and locales/en.json to support English- and Japanese-language displays.

fetched from Gyazo

The basic contents of the locale files are as follows:

locales/en.json
{
  "links": {
    "home": "Home",
    "news": "News",
    "en": "English",
    "ja": "Japanese"
  },
  "home": {
    "title": "front_kuroco_sample_support"
  }
}
locales/ja.json
{
  "links": {
    "home": "ホーム",
    "news": "お知らせ",
    "en": "英語",
    "ja": "日本語"
  },
  "home": {
    "title": "フロントKurocoサンプル"
  }
}

(Note: Other items may be added as needed.)

3. Modify nuxt.config.js

Then, add the code below to the modules section of nuxt.config.js:

nuxt.config.js
   [
      'nuxt-i18n',
      {
        strategy: 'prefix_and_default',
        // Define the language options
        locales: [
          { code: 'ja', file: 'ja.json' },
          { code: 'en', file: 'en.json' },
        ],
        // Set the default language
        defaultLocale: 'ja',
        vueI18nLoader: true,
        lazy: true,
        // Specify the directory for the JSON file
        langDir: 'locales/',
      },
    ],

4. Multi-language support for the front-end

The next step is to configure the actual display.

A. Multi-language page titles

Modify the text to be displayed in multiple languages by placing $t before it. Here, we change the main heading of the pages/index.vue file which displays the home page as follows:

pages/index.vue
<h1 class="title">{{ $t('home.title') }}</h1>

B. Language buttons

Also, we need to configure the language buttons. Under the <template> section of layouts/default.vue, add the <header> tag below:

layouts/default.vue
<template>
  <div>
    <header>
      <nuxt-link :to="switchLocalePath('en')">{{ $t('links.en') }}</nuxt-link>|<nuxt-link :to="switchLocalePath('ja')">{{ $t('links.ja') }}</nuxt-link>
    </header>
    <Nuxt />
  </div>
</template>

Afterwards, verify that you can now switch languages on the home page.

fetched from Gyazo

5. Multi-language support for the back-end (Kuroco)

Next, we will add multi-language support for the /news/ page created in Tutorial: Creating a content list page with Kuroco and Nuxt.js.

A. Enable multi-language settings

In the left sidebar menu of the Kuroco admin panel, click [Environment] -> [Localization].

fetched from Gyazo

In the Multi-language field, select your primary and secondary languages, and then click [Update].

fetched from Gyazo

B. Add secondary language content

The next step is to add content in the secondary language. In the [Content] module, click the existing category [お知らせ].

fetched from Gyazo

On the content list screen, click the title of the content you want to localize.

fetched from Gyazo

If you have set up multiple languages in the localization module, the tabs for the secondary languages will be displayed on the content editor screen. Click the [English] tab.

fetched from Gyazo

Enter the English version of the content and click [Update] to apply the changes.

fetched from Gyazo

Repeat the above steps to add content in other secondary languages.

C. Verify the API response for each language setting

Verify the secondary language API response using Swagger UI. Under the [API] module, go to the endpoint list that contains news and newsdetail endpoints.

fetched from Gyazo

On the endpoint list screen, click [Swagger UI].

fetched from Gyazo

Expand the Swagger UI for the newsdetail endpoint and click [Try it out].

fetched from Gyazo

Enter the topic ID and click [Execute].

fetched from Gyazo

Verify the response in the primary language.

fetched from Gyazo

Next, enter en in the _lang field and click [Execute].

fetched from Gyazo

Then verify the response in the second language.

fetched from Gyazo

As the request URL shows, you can add ?_lang=en after the endpoint to retrieve the English-language data.

fetched from Gyazo

Also, verify the response in the secondary language (en) for the news endpoint.

fetched from Gyazo

6. Front-end fixes

Finally, fix the description of the response from Kuroco's API to match the display language. To do this, modify pages/news/index.vue and pages/news/_slug.vue as follows:

pages/news/index.vue
<template>
  <div>
    <div v-for="n in response.list" :key="n.slug">
      <nuxt-link :to="localePath('/news/'+ n.slug)">{{n.ymd}} {{n.subject}}</nuxt-link>
    </div>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios, app }) {
    if(app.i18n.locale === 'ja'){
      try {
       const response = await $axios.$get(
         process.env.BASE_URL + '/rcms-api/1/news'
       )
       console.log(response)
       return { response }
      } catch (e) {
       console.log(e.message)
       }
    }
    else{
      try {
       const response = await $axios.$get(
         process.env.BASE_URL + '/rcms-api/1/news?_lang=en'
       )
       console.log(response)
       return { response }
      } catch (e) {
        console.log(e.message)
       }
    }
  },
}
</script>
pages/news/_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, app }) {
        if(app.i18n.locale === 'ja'){
            try {
                const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/1/newsdetail/' + `${params.slug}`)
                console.log(response);
                return { response }
                }catch (e) {
                    console.log(e.message)
                    }
        }
        else{
            try {
                const response = await $axios.$get(process.env.BASE_URL + '/rcms-api/1/newsdetail/' + `${params.slug}` + '?_lang=en')
                console.log(response);
                return { response }
                }catch (e) {
                    console.log(e.message)
                    }
        }
    },
}
</script>

Substitute the request URL in the above code (process.env.BASE_URL + '/rcms-api/1/newsdetail/' + '${params.slug}') with your own site.

Verify the display on http://localhost:3000/news. You will be able to change the display language of the content using the buttons at the top of the page.

fetched from Gyazo

If you have any other questions, please use our contact form or Slack workspace.