ui/docs/content/1.getting-started/7.i18n/2.vue.md

---
navigation.title: Vue
title: Internationalization (i18n) in a Vue app
description: 'Learn how to internationalize your Vue app and support multi-directional support (LTR/RTL).'
select:
  items:
    - label: Nuxt
      icon: i-logos-nuxt-icon
      to: /getting-started/i18n/nuxt
    - label: Vue
      icon: i-logos-vue
      to: /getting-started/i18n/vue
---

## Usage

Nuxt UI provides an [App](/components/app) component that wraps your app to provide global configurations.

### Locale

Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:

```vue [App.vue]
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

<template>
  <UApp :locale="fr">
    <RouterView />
  </UApp>
</template>
```

#### Custom locale

You also have the option to add your locale using `defineLocale`:

```vue [App.vue]
<script setup lang="ts">
import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale'

const locale = defineLocale('My custom locale', {
  // implement pairs
})
</script>

<template>
  <UApp :locale="locale">
    <RouterView />
  </UApp>
</template>
```

#### Dynamic locale

To dynamically switch between languages, you can use the [VueI18n](https://vue-i18n.intlify.dev/) plugin.

1. Install the `vue-i18n` package:

::code-group{sync="pm"}

```bash [pnpm]
pnpm add vue-i18n@10
```

```bash [yarn]
yarn add vue-i18n@10
```

```bash [npm]
npm install vue-i18n@10
```

```bash [bun]
bun add vue-i18n@10
```

::

2. Define the `createI18n` instance and register the `i18n` plugin in your `main.ts` file:

```ts{3-19,22} [main.ts]
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    // ...
  },
  de: {
    // ...
  },
}

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages,
})

createApp(App)
  .use(i18n)
  .mount('#app')
```

3. Use the `locale` prop with the `useI18n` locale you want to use from `@nuxt/ui/locale`:

```vue [App.vue]
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()
</script>

<template>
  <UApp :locale="locales[locale]">
    <RouterView />
  </UApp>
</template>
```

### Direction

Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:

```vue [App.vue]
<template>
  <UApp dir="rtl">
    <NuxtPage />
  </UApp>
</template>
```

#### Dynamic direction

To dynamically change the global reading direction of your app, you can use the [useTextDirection](https://vueuse.org/core/useTextDirection/) composable.

1. Install the `@vueuse/core` package:

::code-group{sync="pm"}

```bash [pnpm]
pnpm add @vueuse/core
```

```bash [yarn]
yarn add @vueuse/core
```

```bash [npm]
npm install @vueuse/core
```

```bash [bun]
bun add @vueuse/core
```

::

2. Then in your `App.vue`:

```vue [App.vue]
<script setup lang="ts">
import { computed } from 'vue'
import { useTextDirection } from '@vueuse/core'

const textDirection = useTextDirection()
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
</script>

<template>
  <UApp :dir="dir">
    <RouterView />
  </UApp>
</template>
```

## Supported languages

:supported-languages