Internationalization (i18n)

Vuetify supports language Internationalization (i18n) of its components.

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.

Getting started

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>

API

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

Scoped languages

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

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>

Creating a custom locale

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,
    },
  },
})

Custom Vuetify components

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>

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-i18nin your own application. Vuetify does provide support for integrating with other libraries.

vue-i18n

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'

const messages = {
  en: {
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Items per page:',
        pageText: '{0}-{1} of {2}',
      },
    },
  },
  sv: {
    $vuetify: {
      dataIterator: {
        rowsPerPageText: 'Element per sida:',
        pageText: '{0}-{1} av {2}',
      },
    },
  },
}

const i18n = new 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')