Internationalization

Vuetify supports language internationalization of its components. When installing Vuetify you can specify available locales and the currently active locale with the lang option. See the Getting started section.

API

internationalization
Name
current
Default
en
Type
string

Current locale

Name
locales
Default
{ en: VuetifyLocale }
Type
Record<string, VuetifyLocale>

Available locales

Name
t
Signature
(key: string, ...params: Array<string | number>): string
Type
Function

Translation function used internally

Getting started

To set the available locales or the current locale, supply the lang option when installing Vuetify. The provided locales property will be merged with the already existing locales. You can change the locale during runtime through the $vuetify object on the Vue instance.

Currently Vuetify provides translations in the following languages:

af - Afrikaans (Afrikaans) , ar - Arabic (اللغة العربية) , ca - Catalan (català) , de - German (Deutsch) , el - Greek (ελληνικά) , en - English , es - Spanish (Español) , et - Estonian (eesti) , fa - Persian (فارسی) , fr - French (Français) , hr - Croatian (hrvatski jezik) , hu - Hungarian (magyar) , id - Indonesian (Indonesian) , it - Italian (Italiano) , ja - Japanese (日本語) , nl - Dutch (Nederlands) , pl - Polish (język polski) , pt - Portuguese (Português) , ro - Romanian (limba română) , ru - Russian (Русский) , sl - Slovene (slovenski jezik) , srCyrl - Serbian (српски језик) , th - Thai (ไทย) , tr - Turkish (Türkçe) , uk - Ukrainian (Українська) , zhHans - Chinese (中文) , zhHant - Chinese (中文)

Create translation

To create your own translation, use the code below or copy and rename the file vuetify/src/locale/en.ts to your project and make your changes.

Custom components

If you are building custom Vuetify components that need to hook into the internationalization engine, you can use the t function which exists both directly on the $vuetify object and on $vuetify.lang.

Vue i18n

If you are using the vue-i18n package, 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 supplying a custom translation function (as seen in the example below). For a complete list of all available keys, navigate here.

An important note when using external localization plugins is that vuetify will not automatically fall back to using english if no localization exists for the current locale. So be sure to supply the plugin with the english localizations as well as your own.

RTL support

Vuetify supports RTL (right to left) languages through the rtl prop during bootstrap. This value is dynamic and will apply custom styles to change the orientation of your components.

That's it! In order to change this value dynamically, you can modify the $vuetify.rtl property at any time within your application.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore