Question

What are the types of formatting?

Answer 1

Basically there are 4 types of formatting available in i18n plugin,

1. Named formatting: First You need to define the message keys in curly braces({})

   const messages = {
     en: {
       message: {
         greeting: '{msg} Morning'
       }
     }
   }
   After that pass argument value along with key in the template

   <p>{{ $t('message.greeting', { msg: 'Good' }) }}</p>
   It outputs the result as below,

   <p>Good Morning</p>
2. List formatting: First you need to define zero index based keys in the messages,

   const messages = {
     en: {
       message: {
         greeting: '{0} Morning'
       }
     }
   }
   After that pass argument value with in an array

   <p>{{ $t('message.greeting', ['Good']) }}</p>
   Finally it outputs the result as below,

   <p>Good morning</p>
   Note: It also accepts array-like object

   <p>{{ $t('message.greeting', {'0': 'Good'}) }}</p>
3. HTML formatting: This formatting is required when want to render your translation as an HTML message and not a static string.

   const messages = {
     en: {
       message: {
         greeting: 'Good <br> Morning'
       }
     }
   }
   After that use it in the html directive template as below

   <p v-html="$t('message.greeting')"></p>
   Finally it outputs the result as below

   <p>Good
   <!--<br> exists but is rendered as html and not a string-->
   Morning</p>
4. Ruby on rails format: First you need to define with percentile and curly braces as below,

   const messages = {
     en: {
       message: {
         greeting: '%{msg} Morning'
       }
     }
   }
   After that pass argument with key similar to named formatting

   <p>{{ $t('message.greeting', { msg: 'Good' }) }}</p>
   Finally it renders the output as below,

   <p>Good Morning</p>