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'
}
}
}
}
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>
....