Search code examples
vue.jsvue-i18n

vue-i18n use more than one word to translate

Maybe the title isn't to clear so let me explain a little bit.
I am using vue-i18n with Laravel and succesfully generated translation files too.
But in my translation file I used more that one word to translate. a snap of my messages
messages:{ "Your email"="Your email", "Email"=>"Email" }
Same with other language like thai language.
Inside of vue template when I use

{{ $t('messages.Email')}}

Translation works but when i use

{{ $t('messages.Your email')}}

It shows messages.Your email
Can anyone help me to use two or more word translation??
N.B: this works in Laravel blade though

{{ trans('messages.Your email') }}

Solution

  • You can access those properties with the usual bracket syntax.

    Example in plain JS: 

    const object = { 'my key': 'ABC' }

object.my key //Syntax error
object['my key'] //ABC

    In your case with vue-i18n:

    {{ $t("messages['Your email']")}}