FrontendDeveloper.in

Vue.js question detail

What are the types of formatting?

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

It outputs the result as below,

  1. 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

Finally it outputs the result as below,

Note: It also accepts array-like object

  1. 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 
 Morning'
}
}
}

After that use it in the html directive template as below

Finally it outputs the result as below

<!--
 exists but is rendered as html and not a string-->
Morning</p>
  1. 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

Finally it renders the output as below,

Back to all Vue.js questions
Get LinkedIn Premium at Rs 399