Change base language of vuetify UI components - vuetify.js

Question

For example :
Shown in the documentation : Vuetify documentation
We have the "Items per page" displayed in english. If i want to change the text or just select the language to translate it to french for instance, how can i do that ?

Answer 1

Despite not being explicitly mentioned the locale prop seems to be present in all the vuetify components so you can use it. See my example.
src/components/my-datatable.vue
<template>
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
locale="fr"
></v-data-table>
</template>
src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
import fr from 'vuetify/src/locale/fr.ts'
Vue.component('my-component', {
methods: {
changeLocale () {
this.$vuetify.lang.current = 'fr'
},
},
})
export default new Vuetify({
lang: {
locales: { fr },
current: 'fr',
},
})

Answer 2

<v-data-table :rows-per-page-items="rowOptions" :rows-per-page-text="rowPageText">
</v-data-table>
data () {
return {
rowOptions: [
5,
15,
25,
{ text: "$vuetify.dataIterator.rowsPerPageAll", value: -1 }
],
rowPageText: "Objets par page:"
}
}
Or you may want to check the internationalization documentation

Answer 3

Updated answer => 2022
if you are like me and don't want to set up internationalization in vuetify's config, do this instead:
(note: I have set up #nuxtjs/i18n and have access to 'this.$t()' throughout my application. you can freely use any other text instead of them.)
for headers it's easy:
<v-data-table
:headers="headers"
>
data() {
headers: [
{ text: this.$t('id'), value: 'id' },
{ text: this.$t('status'), value: 'state' },
{ text: this.$t('title'), value: 'title' },
{ text: this.$t('price'), value: 'amount' },
{ text: this.$t('date'), value: 'time' },
{ text: this.$t('gateway'), value: 'gateway' },
]
}
and for footer props:
<v-data-table
:footer-props="footerProps"
>
data() {
footerProps: {
disableItemsPerPage: true,
itemsPerPageText: this.$t('itemsPerPageText'),
itemsPerPageAllText: this.$t('all'),
}
}
this was enough for me cause my table was rather simple.
for more footer props refer to the documentation:
https://vuetifyjs.com/en/api/v-data-footer/#props