nuxt3 애플리케이션에 i18n 지원 추가

이 글을 쓰고 있는 시점에서 최신 nuxt 버전은 -> v3.0.0-rc.8입니다.

이미 nuxt3 프로젝트가 있는 경우 이 섹션을 건너뜁니다.

설치

 npx nuxi init nuxt-i18n

npm i를 사용하여 종속성을 설치합니다.

@intlify/nuxt3 추가

아래 명령을 실행하여 @intlify/nuxt3를 dev 종속성으로 설치한 다음 nuxt.config.ts의 모듈 섹션에 @intlify/nuxt3를 추가합니다.

 npm install --save-dev @intlify/nuxt3

modules: ["@intlify/nuxt3"];

이제 모듈 아래에 @intlify/nuxt3에 대한 옵션을 추가하십시오. 이 패키지는 vueI18n 위에 빌드되므로 vueI18n 옵션도 제공할 수 있습니다.

 intlify: {
        localeDir: 'locales', // this the path for languages json files
        vueI18n: {
            // you can add vueI18n option here
        }
    }

언어 파일 만들기

locales라는 프로젝트의 루트 폴더 안에 새 디렉토리를 만듭니다. 참고: 이 이름은 intlify:'locales'에 제공된 것과 동일해야 합니다. 이것은 이 패키지가 json 파일을 찾을 디렉토리이기 때문입니다.

이 두 json 파일 안에 변경하려는 언어 키와 값을 추가합니다.

//en.json
{
    "hello": "Hello {name}!",
    "language": "Language"
}

//fr.json
{
    "hello": "Bonjour, {name}!",
    "language": "Langue"
}

테스트 준비

$t(<key>,{<param>})라는 이 패키지에서 제공하는 전역 기능이 있습니다.

<template>
    <div>
        <h1>{{ $t("hello", { name: "Fazail" }) }}</h1>
        <form>
            <label for="locale-select">{{ $t("language") }} </label>
            <select id="locale-select" v-model="$i18n.locale">
                <option value="en">en</option>
                <option value="fr">fr</option>
            </select>
        </form>
    </div>
</template>

위의 코드에서 "hello"는 키이고 name은 "{keyword}" Check here more details 내부에서 사용된 동일한 키워드로 대체될 매개변수입니다. 전역 $i18n.locale 변수를 v-model과 바인딩했습니다. 따라서 새로운 가치 언어를 선택할 때마다 변경됩니다. 참고: select의 옵션 값은 해당 언어 파일의 이름과 동일해야 합니다.