How to use i18n tags inside a computed prop in Vue

Lately I've been thinking about how every action as a developer either helps or affects how accessible the world is to others. Specially as devs, since our job is a lot about connecting people.

One great tool for inclusion is the i18n package helping us develop multi language apps with minimum effort.

This package will add dynamic translations to our app but what if we want to make it even more dynamic? What if we want to add a computed property that is based on text and have that value be translated dynamically?

Take a reservations app for example. You want to confirm to the user the status of their reservation. That is going to take a computed property that finds the status and displays the correspondent text to the user.

Assuming you already have an app started and you want to add this functionality to a component. First step, we create an array inside data() to contain the different id's and descriptions we are going to use.

data() {
    return {
      booking: {},
      statuses: [
        {
          id: 1,
          name: 'Confirmed',
          description: 'Your reservation is confirmed',
        },
        {
          id: 2,
          name: 'Past',
          description: 'This is an old reservation',
        },
        {
          id: 3,
          name: 'Canceled',
          description: 'Your reservation has been canceled',
        },
      ],
    }
  },

Now we need our logic, to match the reservation's status and choose which message to display. For this project I used Apollo GraphQL, so the query is just a simple request to the backend for a status id. I don't want to focus on the backend stuff now, so let's just say we either get a status 1, 2 or 3 on the response.

That said, we need to match the status with the id we're given and display the description.

  computed: {
    status() {
      return this.statuses.find(
        (status) =>
          status.id === this.booking.booking_status.id // we compare the info contained in statuses with the booking id we get from the backend.
      )
    },
  },

Great! Now it's time to take it a step further, and make this message available in other languages. The fun thing is, the syntax inside a computed property changes a bit when interpolating the value to display. Inside data it is not necessary to use {{ }} syntax, you can just do: this.$t("message").

So, first we change what we have in data() to reach the values in the i18n tabs so we can have translations.

data() {
    return {
      booking: {},
      statuses: [
        {
          id: 1,
          name: 'Confirmed',
          description: this.$t('confirmed'),
        },
        {
          id: 2,
          name: 'Past',
          description: this.$t('past'),
        },
        {
          id: 3,
          name: 'Canceled',
          description: this.$t('canceled'),
        },
      ],
    }
  },

Next we create the actual tag to contain the info we want to display in other languages.

<i18n>
{
  "en": {
    "confirmed": "Your reservation is confirmed.",
    "past": "This is an old reservation.",
    "canceled": "Your reservation is canceled."
  },
  "es": {
    "confirmed": "Su reserva esta confirmada.",
    "past": "Esta es una reserva pasada.",
    "canceled": "Su reserva ha sido cancelada."
  }
}
</i18n>

Awesome! Now all we need to do is show that to the user.

<p>
  {{ status.description }}
</p>

Now we're talking! 🎉
The message will display based on the status of the reservation, and that will give the user a better idea of how things are going, in whatever language we choose to add.

This is just a super simple version of what can be done. Hope you find it useful and that it helps you reach new audiences!

Recommended course >> vue school i18n