In some cases you might want to rendered your translation as an HTML message and not a static string.

var locales = {
  en: {
    message: {
      hello: 'hello <br> world'
    }
  }
}

Template the following for Vue 1 (notice the triple brackets):

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

Or for Vue 2 (triple brackets are deprecated in vue 2.0 and replaced by v-html):

<p v-html="$t('message.hello')"></p>

Output the following (instead of the message pre formatted)

<p>hello
<!--<br> exists but is rendered as html and not a string-->
world</p>

Locale the following:

var locales = {
  en: {
    message: {
      hello: '{msg} world'
    }
  }
}

Template the following:

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

Output the following:

<p>hello world</p>

Locale the following:

var locales = {
  en: {
    message: {
      hello: '{0} world'
    }
  }
}

Template the following:

<p>{{ $t('message.hello', ['hello']) }}</p>

Output the following:

<p>hello world</p>

Locale the following:

var locales = {
  en: {
    message: {
      hello: '%{msg} world'
    }
  }
}

Template the following:

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>

Output the following:

<p>hello world</p>

If the provided formatter doesn't meet your needs, you can also register a custom formatter,

Vue.config.i18nFormatter = function (string, ...arguments) {
  //...
  //return formattedString;
}