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.

info

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.

The basic contents of the locale files are as follows:

{
  "links": {
    "home": "Home",
    "news": "News",
    "en": "English",
    "ja": "Japanese"
  },
  "home": {
    "title": "front_kuroco_sample_support"
  }
}

{
  "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-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:

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

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

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].

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

B. Add secondary language content

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

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

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.

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

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.

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

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

Enter the topic ID and click [Execute].

Verify the response in the primary language.

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

Then verify the response in the second language.

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

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

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:

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

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

caution

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.