---
navigation.title: Nuxt
title: Internationalization (i18n) in a Nuxt app
description: 'Learn how to internationalize your Nuxt 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
---

::note{to="/components/app"}
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">
    <NuxtPage />
  </UApp>
</template>
```

### Custom locale

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

```vue [app.vue]
<script setup lang="ts">
const locale = defineLocale('My custom locale', 'en', {
  // implement pairs
})
</script>

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

::tip
Look at the second parameter, there you need to pass the iso code of the language. Example:
* `hi` Hindi (language)
* `de-AT`: German (language) as used in Austria (region)
::

### Dynamic locale

To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.

::steps{level="4"}

#### Install the Nuxt I18n package

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

```bash [pnpm]
pnpm add @nuxtjs/i18n@next
```

```bash [yarn]
yarn add @nuxtjs/i18n@next
```

```bash [npm]
npm install @nuxtjs/i18n@next
```

```bash [bun]
bun add @nuxtjs/i18n@next
```

::

#### Add the Nuxt I18n module in your `nuxt.config.ts`{lang="ts-type"}

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n'
  ],
  i18n: {
    locales: [{
      code: 'de',
      name: 'Deutsch'
    }, {
      code: 'en',
      name: 'English'
    }, {
      code: 'fr',
      name: 'Français'
    }]
  }
})
```

#### Set the `locale` prop using `useI18n`

```vue [app.vue]
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

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

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

::

### Supported languages

:supported-languages

## 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 VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.

::steps{level="4"}

#### 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
```

::

#### Set the `dir` prop using `useTextDirection`

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

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

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

::