【Nuxt.js】nuxt/i18nを導入しよう

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 WPでも公開中です
https://wp.me/pc9NHC-1bw

前置き

nuxt/i18n

翻訳のできるi18n✨
導入方法と
使い方を載せていきます❤️✍️

i18nとは
国際化のことです。
Internationalizationで
最初のIと最後のnの間に
18文字あるのでi18n

i18nを使用することで
現地の言葉や表記方法で
表示できるわけです💫☝️

参考:
https://qiita.com/tiktak/items/a70ef7940fa4710f37cb
https://qiita.com/wildmouse/items/d08a6bf464ac3696c7b2
https://www.virment.com/internationalize-nuxt-js-using-nuxt-i18n/

導入方法

Setup

まずはインストール🌟
公式にはyarnしか載っていませんが
npmもできます。

// terminal
$ npm install --save nuxt-i18n

nuxt.config.jsで設定💫

{
 modules: [
   'nuxt-i18n',
 ],
 i18n: {},
}

または

{
 modules: [
   [
     'nuxt-i18n',
     { /* module options */ }
   ]
 ],
}

使い方

Basic Usage

##基本的な使い方
簡単に使う方法は
翻訳するメッセージを
登録しておくことです💽

オプションについてはこちら
Options

{
 modules: [
   'nuxt-i18n'
 ],

 i18n: {
   locales: ['en', 'fr', 'es'], // 使用言語の設定
   defaultLocale: 'en', // デフォルトの言語
   vueI18n: {
     fallbackLocale: 'en',  // // 翻訳ファイルが見つからなかった場合の言語を指定
     messages: { // 翻訳するメッセージを登録
       en: {
         welcome: 'Welcome'
       },
       fr: {
         welcome: 'Bienvenue'
       },
       es: {
         welcome: 'Bienvenido'
       }
     }
   }
 }
}

テンプレートでは
tメソッドを使って表示させます。
現在はデフォルトのen(英語)になるので…

<template>
<div class="page">
  {{ $t('welcome') }}
</div>
</template>

表示はWelcomeとなります。

fr(フランス語)と
es(スペイン語)を表示させたい場合は
言語の切り替えが必要になるので
後述します✍️

###dataやmethods内でも使用可能
this.$tを使用します。

<template>
<div class="page">
  {{ message }}
</div>
</template>

<script>
export default {
 data () {
   return {
     message: this.$t('welcome')
   }
 },
}
</script>

###ネストした部分も表示可能
登録するメッセージはネストすることも可能です。

messages: {
       en: {
         text: {
           welcome: 'Welcome'
         },
       },
},

<template>
<div class="page">
  {{ $t('text.welcome') }}
</div>
</template>

###nuxt-linkで使用する場合
localePath
これが必要です。

後述している言語の切り替えで
URLが変わるためです。

<template>
 <div class="page">
   <nuxt-link :to="localePath('index')">{{ $t('welcome') }}</nuxt-link>
 </div>
</template>

または

<template>
 <div class="page">
   <nuxt-link :to="localePath('index')">{{ message }}</nuxt-link>
 </div>
</template>

<script>
export default {
 data () {
   return {
     message: this.$t('welcome')
   }
 },
}
</script>

##言語の切り替え
###パターン1

switchLocalePath
これで切り替えることが可能です💫

<template>
<div class="page">
  <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
  <nuxt-link :to="switchLocalePath('fr')">French</nuxt-link>
  <nuxt-link :to="switchLocalePath('es')">Spain</nuxt-link>
  <p>{{ message }}</p>
</div>
</template>

<script>
export default {
 data () {
   return {
     message: this.$t('welcome')
   }
 },
}
</script>

###パターン2

Lang Switcher
これで言語設定だけしておけば
簡単に切り替えリンクが作れます💕

{
 modules: [
   'nuxt-i18n'
 ],

 i18n: {
   // 使用言語の登録
   locales: [
     {
       code: 'en',
       name: 'English'
     },
     {
       code: 'es',
       name: 'Español'
     },
     {
       code: 'fr',
       name: 'Français'
     }
   ],
   defaultLocale: 'en', // デフォルトの言語
   vueI18n: {
     fallbackLocale: 'en',  // // 翻訳ファイルが見つからなかった場合の言語を指定
     messages: { // 翻訳するメッセージを登録
       en: {
         welcome: 'Welcome'
       },
       fr: {
         welcome: 'Bienvenue'
       },
       es: {
         welcome: 'Bienvenido'
       }
     }
   }
 }
}

<template>
 <div class="page">
   <nuxt-link
     v-for="locale in availableLocales"
     :key="locale.code"
     :to="switchLocalePath(locale.code)">{{ locale.name }}
   </nuxt-link>
   <p>{{ message }}</p>
 </div>
</template>

<script>
export default {
 computed: {
   availableLocales () {
     return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
   }
 },
 data () {
   return {
     message: this.$t('welcome')
   }
 },
}
</script>

まとめ

まとめ
翻訳したいメッセージを登録しておけば
i18nで簡単に多言語化できるのは魅力的ですね✨
言語の切り替えが大変そう、、、
と思っていましたが
コピペで出来るシンプルな物で驚きでした💡🤭

🎈 WPでも公開中です
https://wp.me/pc9NHC-1bw