Internationalization of Vuetify data table header

Question

I'm trying to internationalize my data table header using Vuetify + I18n.

When I translate my normal code, it works correctly, but now I need to translate the header of my data table built with Vuetify.

I've already tried to add the code this.$vuetify.t('$vuetify.activity.username') or this.$t('$vuetify.activity.username') in the header, but nothing happens. The language stays English (en) always.

Does someone know how to fix it?

I send below my code.

Thank you in advance.

Activity.vue

export default {
  data () {
    return {
      headers: [
        { text: 'ID', value: 'id', width: '1%', align: 'left' },
        { text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
        ...
      ]
    }
  },
  ...
}

main.js

import messages from './assets/lang'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  messages
})

// Vue.use(Vuetify)
Vue.use(Vuetify, {
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
})

./assets/lang/index.js

module.exports = {
  en: {
    ...
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Items per page:',
        ...
      },
      ...
      activity: {
        username: 'Username'
      }
    }
  },
  pt: {
    ...
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Itens por página:',
        ...
      },
      ...
      activity: {
        username: 'Nome do usuário'
      }
    }
  }
}

Solution 1

For Vuetify 2.x

<v-data-table :headers="headers" ...

And put into the computed data

 computed: {   
    headers () {
      return [
        {
          text: this.$t('title'),
          align: 'left',
          sortable: false,
          value: 'title'
        },

For Vuetify 1.x

you can put your translation function into headerCell slot. It won't work when you put the function in the headers: object in Activity.vue, just put there your translation keys and use the template with slot.

<v-data-table>
    ....
    <template slot="headerCell" slot-scope="props">
        {{ $t(props.header.text) }}
    </template>
    ....

Solution 2

You can put your header in a computed function. When the local changes, the headers will be updated

computed:{

    headers(){
      return [
        { text: 'ID', value: 'id', width: '1%', align: 'left' },
        { text: this.$vuetify.t('$vuetify.activity.username'), value: 'username', width: '1%' },
        ...
      ]
    }
...
}

Comments

[rmmariano]

I'm sorry for answering so late. Your example worked very well. Thank you so much.