Internationalization with vue-i18n (Part 2)

This is part 2 of a series on internalization with vue-i18n. Find part 1 here.

Change locale programmatically

An important feature for your app is the ability to change locale.

In our component file (App.vue), let’s add a button to switch between the app’s two languages, french and english.

As the button value, we will use a computed properties that is the not currently in used locale.

On click we switch to the locale displayed in the button.

<button v-on:click="switchLocale()">{{ otherLocale }}</button>

The computed property:

displayLocale() {
  let other = 'fr'
  if (this.$i18n.locale === 'fr’) {
    other = 'en'
  }
  return other
}

If our locale is ‘fr’, the button will display ‘en’. Otherwise ‘fr’ will be displayed.

This button allows you to switch language!

The method to switch locale:

switchLocale () {
  if (this.$i18n.locale === 'fr') {
    this.$i18n.locale = 'en'
  } else {
    this.$i18n.locale = 'fr'
  }
}

In fact, all you have to do is to set the this.$i18n.locale property.

HTML formatting

You may be interested to use HTML tags, for example to add partially bold text.

const messages = {   
  en: {     
    message: {       
      bold: 'There is a <b>bold</b> text',
      hello: 'hello world'     
    }   
  },   
  fr: {     
    message: {   
      bold: 'Il y a un texte en <b>gras</b>',
      hello: 'Bonjour monde'     
    }   
  } 
}

If you try to add the text like we did in part 1, you will have:

tag appears in your screen!

That is not what you want, you want to add the message this way:

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

Great! The html tag is interpreted!

Named formatting

You can have build a translation message with one or many values.

Define your messages this way:

namedExample: 'You owe me: $ {amount}'
...
namedExample: 'Vous me devez : {amount} $'

And in your template:

<p>{{ $t("message.namedExample", { amount: 30 })}}</p>

translation message with a value

Pluralization

You can efficiently handle pluralization with just one message. You can handle no item, one item or many item.

Here are the messages to manage pluralization:

cake: 'cake | cakes',
candy: 'no candies | one candy | {count} candies',
...
cake: 'gâteau | gâteaux',
candy: 'pas de bonbons | un bonbon | {count} bonbons',

In your template, you need to add that:

<p>{{ $tc("message.cake", 1) }}</p>
<p>{{ $tc("message.cake", 2) }}</p>
<p>{{ $tc("message.candy", 0) }}</p>
<p>{{ $tc("message.candy", 1) }}</p>
<p>{{ $tc("message.candy", 10, { count: 10 }) }}</p>

Pluralization is a piece of cake ! 🍰

Datetime

Date format can be different from locale to locale. In english, the format is month, day, year and in french it’s day, month, year. Also, 12 hour format is used in english but not in french.

Fortunately, vue-i18n will help you to easily manage that.

First, define how you want to handle date and time in your app with vue-i18n:

const dateTimeFormats = {
  'en': {
     short: {
       year: 'numeric',
       month: 'short',
       day: 'numeric'
     },
     long: { 
       year: 'numeric', 
       month: 'short',
       day: 'numeric',
       weekday: 'short',
       hour: 'numeric',
       minute: 'numeric',
       hour12: true
     }
   },
 'fr': {
    short: {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    },
    long: {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'short',
      hour: 'numeric',
      minute: 'numeric'
    }
  }
}
const i18n = new VueI18n({
  locale: 'fr', // set locale
  messages, // set locale messages
  dateTimeFormats // set date and time formats
})

Then, in the template, we will add 3 example, short date, long date and how to specify a locale when using dateTimeFormats:

<p>{{ $d(new Date(), 'short') }}</p>
<p>{{ $d(new Date(), 'long') }}</p>
<p>{{ $d(new Date(), 'long', 'fr') }}</p>

short date, long date in english and the last date in french

short date, long date in french and the last date is still in french

Number formats

You can define your own number formats, for example to display currency percent or decimal.

Like we did before for messages and date time, we need to define numberFormats and set our vue-i18n instance:

const numberFormats = {
  'en': {
    currency: {
      style: 'currency', currency: 'USD'
    },
    percent: {
      style: 'percent'
    }
  },
  'fr': { 
    currency: {
      style: 'currency', currency: 'EUR'
    },
    percent: {
      style: 'percent'
    }
  }
}
const i18n = new VueI18n({
  locale: 'fr', // set locale
  messages, // set locale messages
  dateTimeFormats, // set date and time formats
  numberFormats // set number formats
})

And in your template:

<p>{{ $n(100, 'currency') }}</p>
<p>{{ $n(100, 'currency', 'fr') }}</p>
<p>{{ $n(0.53, 'percent') }}</p>

You will have this in your screen:

First number is in dollar, the second stay in french as we defined in our template and the last is a percentage

Wrapping up 🎉

This was long but we cover a lot of functionalities of vue-i18n. You know have the knowledge to exploit this great module in your Vue app!

All the features shown are available in the following github project:

jpfong/vue-i18n-tutorial-part2

VueJoy ebook is ready for preorder!

Learn VueJs with tutorial and examples.

Get new chapters as they’re completed and get updates!

Preorder now: http://www.vuejoy.com