Translate

To translate a word from your translation object you can either use the $t method in your html or in the scope of you component.

translations object

{
   translations: {
      'en' : {
         'message': 'hello'      
      }       
   }    
}

<p>{{ $t('message') }}</p>

result will be

<p>hello</p>

Dynamic content

It is possible to pass variables in the translation, using the second argument of the $t method

translations object

{
   translations: {
      'en' : {
         'message': 'hello, {name}'      
      }       
   }    
}

<p>{{ $t('message', { name: 'Bob' }) }}</p>

result will be

<p>hello, Bob</p>

Nested elements

It possible to nest translations, just like a normal object syntax

translations object

{
   translations: {
      'en' : {
         'article': {
            'text': 'Lorem ipsum dolor sit amet'
         }      
      }       
   }    
}

<p>{{ $t('article.text') }}</p>

result will be

<p>Lorem ipsum dolor sit amet</p>