Nuxt에서 Vue I18n으로 국제화(다국어) 적용하기

개요

다국어 적용

 

1. package install

$ yarn add @nuxtjs/i18n

 

2. plugins로 type 확장시키기 (이건 vue용)

 

tsconfig.json

{
  "compilerOptions": {
    "types": [
      "@nuxt/types",
      "@nuxtjs/i18n",
    ]
  }
}

 

nuxt.confing.js

modules: [
  // https://go.nuxtjs.dev/axios
  '@nuxtjs/axios',
  // '@nuxtjs/firebase', 타입적용이 어려워서 nuxtjs/firebase는 안쓰는쪽으로함
  // https://i18n.nuxtjs.org
  [
    '@nuxtjs/i18n',
    {
      // 대응할 언어들 셋팅
      locales: [
        { code: 'ko', name: 'Korean', iso: 'ko_KR', file: 'ko/index.js' },
        { code: 'ja', name: 'Japanese', iso: 'ja_JP', file: 'ja/index.js' },
      ],
      defaultLocale: 'ko',
      langDir: 'locales/',
      strategy: 'prefix_except_default',
      vueI18n: {
        fallbackLocale: 'ko',
      },
      lazy: true,
      vueI18nLoader: true,
      vuex: false,
    },
  ],
],

 

3. locales 디렉터리에 언어별로 파일 정의

// ko/index.js
export default {
  dayLabels: ['일', '월', '화', '수', '목', '금', '토'],
}

// ja/index.js
export default {
  dayLabels: ['日', '月', '火', '水', '木', '金', '土'],
}

 

4. Usage

<div class="flex">
  <div v-for="(day, i) in $t('dayLabels')" :key="i">
    {{ day }}
  </div>
</div>