Configuring Multilingualism in Nuxt
NuxtHi, I’m Lovefield.
This is about multilingualism. Many of you may think of the i18n library when you say multilingualism. I don't use libraries personally. The reason is simple, I don't think it's enough technology to write a library. Rather, I tend to implement and use it myself because I can add the functions I want to use.
The principle of multilingualism is simple: organize the text by language, and then import the text according to the language you set. To implement this, we use Nuxt's store, utils, and middleware.
First, create a store. It should contain the overall settings of the site, and you'll use the language part of it.
stores/siteStore.ts
TypeScript
export const useSiteStore = defineStore("siteStore", {
state: (): => ({
language: "en-US",
}),
actions: {
setLanguage(value: string) {
this.language = value;
},
},
});
Since the store has been configured, when accessing the site in middleware, specify the language based on the header. Please pay attention to the file name as it should run globally.
middleware/application.global.ts
TypeScript
export default defineNuxtRouteMiddleware(async (to, from) => {
const siteStore = useSiteStore();
if (import.meta.server === true) {
const header = useRequestHeaders();
if (header["accept-language"] !== undefined) {
const language: string = header["accept-language"].split(",")[0];
siteStore.setLanguage(language === "ko-KR" ? "ko-KR" : "en-US");
} else {
siteStore.setLanguage("en-US");
}
}
});
Create the 'language' folder in the root directory and then create the 'ko.json' and 'en.json' files. Make sure you have information written in Korean and English, respectively.
language/ko.json
JSON
{
“site”: {
“title”: “Dico - 말하다, 표현하다”,
“description”: “개발자 부부가 개발과 일상을 기록하는 블로그입니다. 정보의 바다에서 여기 Dico라는 섬을 발견하셨다면, 개발자 부부가 만들어가는 작은 섬들을 재미있게 둘러봐 주시면 좋겠습니다.”
}
}
language/en.json
JSON
{
“site”: {
“title”: “Dico - Speak, Manifest”
“description”: “It's a blog where the developer couple records their development and their daily lives. If you've discovered an island here called Dico in the Sea of Information, I hope you enjoy taking a look at the little islands that the developer couple is building.”
}
}
Also specify the type. This is a convenience to make the key to the function easier. Please note that the import setting should be set in 'nuxt.config.ts'.
types/language.ts
TypeScript
type LanguageKey = “site.title” | “site.description”;Finally, write utils, which actually takes and returns the text from 'ko.json' and 'en.json'.
utils/getTextContent.ts
TypeScript
import ko from "@/language/ko.json";
import en from "@/language/en.json";
export const _getTextContent = (key: LanguageKey): string => {
const siteStore = useSiteStore();
const keyList: string[] = key.split(".");
let target: any = {};
if (siteStore.language === "ko-KR") {
target = ko;
} else {
target = en;
}
return getTextLogic(target, keyList);
};
function getTextLogic(target: any, keyList: string[]): string {
if (target[keyList[0]] !== undefined) {
if (keyList.slice(1).length > 0) {
return getTextLogic(target[keyList[0]], keyList.slice(1));
} else {
return target[keyList[0]];
}
} else {
return "";
}
}
All settings are complete, available on the page as follows.
pages/index.vue
HTML, XML
<template>
<p class=”text”>{{ _getTextContent(“site.title”) }}</p>
</template>
