I18n.md

Using i18n with the i18n module

• i18n localisation files: @/lang/*.json

Adding a new language to languages

1. create a json file in @/lang/ directory.
2. In nuxt.config.ts, add it to the locales list like such

export default defineNuxtConfig({
 modules: [
   ["@nuxtjs/i18n", {
     locales: [
       // ... other locales
       {
         code: 'xx-yy',
         file: 'xx-yy.json'
       }
     ],
   }],
 ],
})

Note the filename and import name should follow the format of lang-locale where each part is a lowercase 2 character language or locale name (e.g. en-us, zh-tw etc).

Localisation file format

The json file should be in a key value format, where the key should be a short description of what the string is, and value is the actual string. The semantics of key is not strict, and can sometimes be identical to the string itself. Use camelCase for key names. Here is an example:

// all of these are correct naming methods.
{
  "greeting": "Hello there, %s!", // descriptive name
  "inviteUser": "Invite User", // identical name
  "inviteUserName": "Invite %s", // partial identical name
  "showMoreUser": "Show More User" // obviously identical name
}

When the string depends on a specific string that is only known during runtime, leave a placeholder of %s. (Subject to change!)

Using localised string in a component

In a component, use useI18n function to hook into the i18n hook. Here's an example:

<script setup lang="ts">
const { t } = useI18n();
console.log(t("greeting"));
</script>

<template>
  <div>
    {{ $t("greeting") }} <!-- Note the $ prefix before the function `t` -->
  </div>
</template>