[Vuejs]-How to translate a property of and array of objects using vue-i18n

by

0👍

✅

You must translate the text at the moment you are going to print it on the screen. There are several ways to do this but the most comfortable from my point of view is to make the $t variable global in this way:

const i18n = createI18n({
    ... // Other options
    globalInjection: true, // Insert this line
})

Once injected globally you can use it inside your <template></template> tags without needing to import it. This way you could do something similar to this:

<template>
  <h1 v-for="header in headers" :key="header.key">{{ $t(header.title) }}</h1>
</template>

Once you have this clear you can use a custom header for your data tables, according to the Vuetify documentation you can do it with the following code:

<v-data-table
   :headers="headers"
   ... // Other options>
   <template v-slot:header="{ props: { headers } }">
       <th v-for="header in headers" :key="header.key">{{ $t(header.title) }}
   </template>
</v-data-table>

I hope you found it useful.

Leave a comment