packages/docs/src/pages/en/features/internationalization.md
Vuetify supports language Internationalization (i18n) of its components.
<PageFeatures /> <PromotedEntry />When bootstrapping your application you can specify available locales and the default locale with the defaultLocale option. The locale service also supports easy integration with vue-i18n. Using a locale that has an RTL (right-to-left) language also affects the directionality of the Vuetify components.
To set the available locale messages or the default locale, supply the locale option when installing Vuetify.
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
// Translations provided by Vuetify
import { pl, zhHans } from 'vuetify/locale'
// Your own translation file
import sv from './i18n/vuetify/sv'
const app = createApp()
const vuetify = createVuetify({
locale: {
locale: 'zhHans',
fallback: 'sv',
messages: { zhHans, pl, sv },
},
})
app.use(vuetify)
app.mount('#app')
You can change the locale during runtime by using the useLocale composable.
<script setup>
import { useLocale } from 'vuetify'
const { current } = useLocale()
function changeLocale (locale) {
current.value = locale
}
</script>
If you are still using the Options API, you can access the locale settings on this.$vuetify.locale.
<script>
export default {
methods: {
changeLocale (locale) {
this.$vuetify.locale.current = locale
},
},
}
</script>
| Feature | Description |
|---|---|
| useLocale | The locale composable is used |
| v-locale-provider | The locale provider component is used to scope a portion of your application to a different locale than the default one |
Using the v-locale-provider component it is possible to scope a portion of your application to a different locale than the default one.
<template>
<v-app>
<v-select></v-select> <!-- Will use default locale -->
<v-locale-provider locale="ja">
<v-select></v-select> <!-- Will use ja locale -->
</v-locale-provider>
</v-app>
</template>
RTL (Right To Left) support is built in for all localizations that ship with Vuetify. If a supported language is flagged as RTL, all content directions are automatically switched. See the next section for information on how to add RTL support to a custom locale.
The following example demonstrates how to force RTL for a specific section of your content, without switching the current language, by using the v-locale-provider component:
<v-app>
<v-card>...</v-card> <!-- default locale used here -->
<v-locale-provider rtl>
<v-card>...<v-card> <!-- default locale used here, but with RTL active -->
</v-locale-provider>
</v-app>
To create your own locale messages, copy and paste the content of vuetify/src/locale/en.ts to a new file, and change the localized strings. You can also specify if they should be displayed RTL or not by using the rtl property of the locale options.
export default {
badge: '...',
close: '...',
...
}
import { createVuetify } from 'vuetify'
import customLocale from './locales/customLocale'
const vuetify = createVuetify({
locale: {
locale: 'customLocale',
messages: { customLocale },
rtl: {
customLocale: true,
},
},
})
If you are building custom Vuetify components that need to hook into the locale service, you can use the t function from the useLocale composable, or the $vuetify.locale property when using Options API.
<template>
<div class="my-component">
{{ text }}
</div>
</template>
<script setup>
import { useLocale } from 'vuetify'
const { t } = useLocale()
const text = t('$vuetify.my-component.text')
</script>
::: warning
The Vuetify locale service only provides a basic translation function t, and should really only be used for internal or custom Vuetify components. It is recommended that you use a proper i18n library such as vue-i18n in your own application. Vuetify does provide support for integrating with other libraries.
:::
If you are using the vue-i18n library, you can very easily integrate it with Vuetify. This allows you to keep all of your translations in one place. Simply create an entry for $vuetify within your messages and add the corresponding language changes. Then hook up vue-i18n to Vuetify by using the provided adapter function (as seen in the example below).
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
import { createI18n, useI18n } from 'vue-i18n'
import { en, sv } from 'vuetify/locale'
const messages = {
en: {
$vuetify: {
...en,
dataIterator: {
rowsPerPageText: 'Items per page:',
pageText: '{0}-{1} of {2}',
},
},
},
sv: {
$vuetify: {
...sv,
dataIterator: {
rowsPerPageText: 'Element per sida:',
pageText: '{0}-{1} av {2}',
},
},
},
}
const i18n = createI18n({
legacy: false, // Vuetify does not support the legacy mode of vue-i18n
locale: 'sv',
fallbackLocale: 'en',
messages,
})
const vuetify = createVuetify({
locale: {
adapter: createVueI18nAdapter({ i18n, useI18n }),
},
})
const app = createApp()
app.use(i18n)
app.use(vuetify)
app.mount('#app')
Currently Vuetify provides translations in the following languages: