vue-select/docs/guide/localization.md

Localization / i18n

Translations

There are a number of strings used within the component that can all be translated. Out of the box, Vue Select has translations for the following languages/locales that can be found in src/locales:

• English (default)
• French
• Spanish

Translations can be set individually for each component instance, or globally for all instances in your app. Both methods will use the locale prop to determine the text to be used throughout the component.

Locale Prop

The locale prop accepts a function and should return an object of translated strings. The function receives the default english translations for the component. This allows you to override the whole object, or change just the values you need. The structure of the returned locale object is described below.

Locale Object

The object returned from the locale prop requires specific keys to be set. Below is an example from the english locale that ships with Vue Select:

<<< @/../src/locales/en.js

View this file on GitHub

Examples

---

Translate a Single Instance

Translating a single instance of Vue Select can be accomplished by setting the locale function to return an object with the translations you need. In the example below, we use the french locale object that ships with Vue Select.

<<< @/.vuepress/components/TranslationFrench.vue

Modifying Specific Text

You can also use the locale prop to override just the text that you'd like to change. In this example, the text in the no-options slot is updated to say 'No Options found!!'.

<<< @/.vuepress/components/TranslationSingleKey.vue

Translate all Instances

If you'd like to translate the text for all Vue Select instances in your app, you can override the default prop when registering the component. In the example below, all instances of Vue Select will be translated to Spanish.

<<< @/.vuepress/components/TranslationSpanish.vue

Right to Left

Vue Select supports RTL using the standard HTML API using the dir prop.

<v-select dir="rtl"></v-select>

The dir prop accepts the same values as the HTML spec:

• rtl
• ltr
• auto

Contributing Languages

If you'd like to see Vue Select translated to a new language, submit a PR with a new locale file in the src/locales folder. The file name should match the ISO 639-1 code for the language, and export a locale object.