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

前置き

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で設定💫

または


使い方

Basic Usage

基本的な使い方

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

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

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

表示はWelcomeとなります。

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

dataやmethods内でも使用可能

this.$tを使用します。

ネストした部分も表示可能

登録するメッセージはネストすることも可能です。

nuxt-linkで使用する場合

localePath
これが必要です。

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

または


言語の切り替え

パターン1

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

パターン2

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


まとめ

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

-
-,

© 2021 aLiz Nuxt