---
title: "Vue Select Localization  Example | Mobiscroll"
component: "Select"
framework: "Vue"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/vue/select/localization"
---

# Localization - Vue Select demo

Vue Select component localization example supporting 37 languages, button text with full RTL capability. For Vue and Nuxt.

- [Live demo](https://demo.mobiscroll.com/vue/select/localization)
- [View SFC JS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue/tree/main/src/demos/pickers/select/localization)
- [View SFC TS code on GitHub](https://github.com/acidb/mobiscroll-demos-vue-ts/tree/main/src/demos/pickers/select/localization)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/select/localization.md), [jQuery](https://demo.mobiscroll.com/jquery/select/localization.md), [Angular](https://demo.mobiscroll.com/angular/select/localization.md), [React](https://demo.mobiscroll.com/react/select/localization.md)

## Description

All components are fully localized. In case of the select this covers button copy, rtl and more. You can see how each example shows up by clicking on the small flag icon or checking the examples below.

**All settings can be manually overridden** [See what options the localization impacts →](https://mobiscroll.com/docs/vue/select/api#localization)

## What this demo shows

- Shows a single-value select examples with different localization options.
- **Locale selector** The left side of the select shows a `Set localization to` label with a dropdown. That opens a list of available locales that updates the select component localization.
- **Localization behavior** The localized setup affects button labels, RTL layout support, and other built-in UI text and behaviors.
- **Select input** This example opens the picker when the user focuses or clicks the input.
- **Input behavior** The picker opens below the input and closes when the user clicks outside it.
- **Picker content** Show a predefined list of options in a dropdown-style popup.
- **Hover state** Hovering over an option highlights it in the picker.
- **Selection** Selecting an option marks it with a checkmark to indicate the current value.
- **Input value** Selecting an option updates the associated input with that value.

## Best for

- **Multi-language select UIs** Apps that need the same select experience in multiple languages and regional formats.
- **Region-specific experiences** Products that need translated interface copy without rebuilding the select component UI.

## Tutorial

### Set localization to

`English`

```vue
<template>
  <MbscSelect :locale="localeEn" />
</template>
```

With "Arabic":

```vue
<template>
  <MbscSelect :locale="localeAr" />
</template>
```

With "Bulgarian":

```vue
<template>
  <MbscSelect :locale="localeBg" />
</template>
```

With "Català":

```vue
<template>
  <MbscSelect :locale="localeCa" />
</template>
```

With "Cestina":

```vue
<template>
  <MbscSelect :locale="localeCs" />
</template>
```

With "Chinese":

```vue
<template>
  <MbscSelect :locale="localeZh" />
</template>
```

With "Croatian":

```vue
<template>
  <MbscSelect :locale="localeHr" />
</template>
```

With "Dansk":

```vue
<template>
  <MbscSelect :locale="localeDa" />
</template>
```

With "Deutsch":

```vue
<template>
  <MbscSelect :locale="localeDe" />
</template>
```

With "English (UK)":

```vue
<template>
  <MbscSelect :locale="localeEnGB" />
</template>
```

With "Español":

```vue
<template>
  <MbscSelect :locale="localeEs" />
</template>
```

With "Français":

```vue
<template>
  <MbscSelect :locale="localeFr" />
</template>
```

With "Greek":

```vue
<template>
  <MbscSelect :locale="localeEl" />
</template>
```

With "Hindi":

```vue
<template>
  <MbscSelect :locale="localeHi" />
</template>
```

With "Italiano":

```vue
<template>
  <MbscSelect :locale="localeIt" />
</template>
```

With "Japanese":

```vue
<template>
  <MbscSelect :locale="localeJa" />
</template>
```

With "Korean":

```vue
<template>
  <MbscSelect :locale="localeKo" />
</template>
```

With "Lietuvių":

```vue
<template>
  <MbscSelect :locale="localeLt" />
</template>
```

With "Magyar":

```vue
<template>
  <MbscSelect :locale="localeHu" />
</template>
```

With "Nederlands":

```vue
<template>
  <MbscSelect :locale="localeNl" />
</template>
```

With "Norsk":

```vue
<template>
  <MbscSelect :locale="localeNo" />
</template>
```

With "Polski":

```vue
<template>
  <MbscSelect :locale="localePl" />
</template>
```

With "Português Europeu":

```vue
<template>
  <MbscSelect :locale="localePtPT" />
</template>
```

With "Pt. Brasileiro":

```vue
<template>
  <MbscSelect :locale="localePtBR" />
</template>
```

With "Română":

```vue
<template>
  <MbscSelect :locale="localeRo" />
</template>
```

With "Serbian":

```vue
<template>
  <MbscSelect :locale="localeSr" />
</template>
```

With "Slovencina":

```vue
<template>
  <MbscSelect :locale="localeSk" />
</template>
```

With "Suomi":

```vue
<template>
  <MbscSelect :locale="localeFi" />
</template>
```

With "Svenska":

```vue
<template>
  <MbscSelect :locale="localeSv" />
</template>
```

With "Thai":

```vue
<template>
  <MbscSelect :locale="localeTh" />
</template>
```

With "Türkçe":

```vue
<template>
  <MbscSelect :locale="localeTr" />
</template>
```

With "Ukrainian":

```vue
<template>
  <MbscSelect :locale="localeUa" />
</template>
```

With "Vietnamese":

```vue
<template>
  <MbscSelect :locale="localeVi" />
</template>
```

With "Русский":

```vue
<template>
  <MbscSelect :locale="localeRu" />
</template>
```

With "Русский (UA)":

```vue
<template>
  <MbscSelect :locale="localeRuUA" />
</template>
```

With "עברית":

```vue
<template>
  <MbscSelect :locale="localeHe" />
</template>
```

With "فارسی":

```vue
<template>
  <MbscSelect :locale="localeFa" />
</template>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/vue/select/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/vue/select/api#opt-themeVariant) - option
- [`locale`](https://mobiscroll.com/docs/vue/select/api#localization-locale) - option
- [`data`](https://mobiscroll.com/docs/vue/select/api#opt-data) - option
- [`label`](https://mobiscroll.com/docs/vue/select/api#opt-label) - option
- [`display`](https://mobiscroll.com/docs/vue/select/api#opt-display) - option
- [`inputStyle`](https://mobiscroll.com/docs/vue/select/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/vue/select/api#opt-labelStyle) - option

## Code

### SFC JS

```vue
<script setup>
import { localeEs, MbscSelect, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  },
  {
    text: 'Los Angeles',
    value: 'la'
  },
  {
    text: 'New York',
    value: 'ny'
  },
  {
    text: 'Paris',
    value: 'par'
  },
  {
    text: 'San Francisco',
    value: 'sf'
  }
]
</script>

<template>
  <MbscSelect
    :locale="localeEs"
    :data="myData"
    label="Select"
    display="bottom"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please select..."
  />
</template>
```

### SFC TS

```vue
<script setup lang="ts">
import { localeEs, MbscSelect, setOptions } from '@mobiscroll/vue'

setOptions({
  theme: 'ios',
  themeVariant: 'light'
})

const myData = [
  {
    text: 'Atlanta',
    value: 'atl'
  },
  {
    text: 'Berlin',
    value: 'ber'
  },
  {
    text: 'Boston',
    value: 'bos'
  },
  {
    text: 'Chicago',
    value: 'chi'
  },
  {
    text: 'London',
    value: 'lon'
  },
  {
    text: 'Los Angeles',
    value: 'la'
  },
  {
    text: 'New York',
    value: 'ny'
  },
  {
    text: 'Paris',
    value: 'par'
  },
  {
    text: 'San Francisco',
    value: 'sf'
  }
]
</script>

<template>
  <MbscSelect
    :locale="localeEs"
    :data="myData"
    label="Select"
    display="bottom"
    inputStyle="outline"
    labelStyle="stacked"
    placeholder="Please select..."
  />
</template>
```

## Implementation notes

- The `locale` option accepts a locale object that translates the picker's built-in UI text (e.g. `Set`/`Cancel` button labels, other chrome strings) and applies RTL layout for right-to-left locales (Arabic, Hebrew, Persian). It does not translate the app-supplied option `text`/`data` - those stay whatever the app passes in.
- Locale objects are named per-language exports, not raw strings: JS/jQuery reference them off the global as `mobiscroll.locale.<code>` (e.g. `mobiscroll.locale.es`); React, Angular, and Vue import a named export per locale from their respective package, e.g. `import { localeEs } from '@mobiscroll/angular'` / `'@mobiscroll/react'` / `'@mobiscroll/vue'`.
- Per-framework binding: JS/jQuery pass `locale: mobiscroll.locale.es` inside `.select({...})`; React binds `locale={localeEs}` as a prop on `<Select>`; Angular binds `[locale]="localeEs"` on `<mbsc-select>` after importing/assigning `localeEs` on the component; Vue binds `:locale="localeEs"` on `<MbscSelect>` after importing `localeEs`.
- Switching locale at runtime (as the demo's language dropdown does) is imperative even outside JS/jQuery when driven by a control external to the component: JS/jQuery call `inst.setOptions({ locale: mobiscroll.locale[code] })` on the instance (JS: captured directly from the return value of `mobiscroll.select(...)`; jQuery: obtained via `.mobiscroll('getInst')`); in a component-driven app the equivalent is updating the bound `locale` value/prop and letting the framework re-render.
- "All settings can be manually overridden" means any individual option (e.g. custom button text) set explicitly on the picker takes precedence over the string that locale would otherwise supply - locale sets defaults, not overrides.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-vue.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config vue
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config vue --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/vue/getting-started/installation

## Related demos

- Previous: [Event hooks](https://demo.mobiscroll.com/vue/select/event-hooks.md) - Vue Select demo with event hooks for custom integration and functionality.
- Next: [RTL support](https://demo.mobiscroll.com/vue/select/rtl-right-to-left.md) - Vue Select Right-to-left rendering demo with group options for quick navigation. With full RTL language support and source.