前置き
翻訳のできる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/
導入方法
まずはインストール🌟
公式にはyarnしか載っていませんがnpmもできます。
terminal
$ npm install --save nuxt-i18n
nuxt.config.jsで設定💫
|
1 2 3 4 5 6 |
{ modules: [ 'nuxt-i18n', ], i18n: {}, } |
または
|
1 2 3 4 5 6 7 8 |
{ modules: [ [ 'nuxt-i18n', { /* module options */ } ] ], } |
使い方
基本的な使い方
簡単に使う方法は
翻訳するメッセージを
登録しておくことです💽
オプションについてはこちら
Options
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ 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(英語)になるので…
|
1 2 3 4 5 |
<template> <div class="page"> {{ $t('welcome') }} </div> </template> |
表示はWelcomeとなります。
fr(フランス語)とes(スペイン語)を表示させたい場合は
言語の切り替えが必要になるので
後述します✍️
dataやmethods内でも使用可能
this.$tを使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div class="page"> {{ message }} </div> </template> <script> export default { data () { return { message: this.$t('welcome') } }, } </script> |
ネストした部分も表示可能
登録するメッセージはネストすることも可能です。
|
1 2 3 4 5 6 7 |
messages: { en: { text: { welcome: 'Welcome' }, }, }, |
|
1 2 3 4 5 |
<template> <div class="page"> {{ $t('text.welcome') }} </div> </template> |
nuxt-linkで使用する場合
localePath
これが必要です。
後述している言語の切り替えで
URLが変わるためです。
|
1 2 3 4 5 |
<template> <div class="page"> <nuxt-link :to="localePath('index')">{{ $t('welcome') }}</nuxt-link> </div> </template> |
または
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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
これで切り替えることが可能です💫
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<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
これで言語設定だけしておけば
簡単に切り替えリンクが作れます💕
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
{ 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' } } } } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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で簡単に多言語化できるのは魅力的ですね✨
言語の切り替えが大変そう、、、
と思っていましたが
コピペで出来るシンプルな物で驚きでした💡🤭