---
title: "Internationalization (i18n)"
description: "Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization."
canonical_url: "https://ui.nuxt.com/docs/getting-started/integrations/i18n/vue"
last_updated: "2026-04-30"
---
# Internationalization (i18n)
> Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
> [!NOTE]
> See: /docs/getting-started/integrations/i18n/nuxt
>
> Looking for the **Nuxt** version?
## Usage
> [!NOTE]
> See: /docs/components/app
>
> Nuxt UI provides an **App** component that wraps your app to provide global configurations, including the `locale` prop.
### Locale
Use the `locale` prop with the locale you want to use from `@nuxt/ui/locale`:
```vue [App.vue]
```
> [!TIP]
>
> Each locale has a `code` property (e.g., `en`, `en-GB`, `fr`) that determines the date/time format in components like [Calendar](/docs/components/calendar), [InputDate](/docs/components/input-date) and [InputTime](/docs/components/input-time).
### Custom locale
You can create your own locale using the [defineLocale](/docs/composables/define-locale) utility:
```vue [App.vue]
```
> [!TIP]
>
> Look at the `code` 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)
### Extend locale
You can customize an existing locale by overriding its `messages` or `code` using the [extendLocale](/docs/composables/extend-locale) utility:
```vue [App.vue]
```
### Dynamic locale
To dynamically switch between languages, you can use the [Vue I18n](https://vue-i18n.intlify.dev/) plugin.
#### Install the Vue I18n package
```bash [pnpm]
pnpm add vue-i18n@11
```
```bash [yarn]
yarn add vue-i18n@11
```
```bash [npm]
npm install vue-i18n@11
```
```bash [bun]
bun add vue-i18n@11
```
#### Use the Vue I18n plugin in your `main.ts`
```ts [src/main.ts]
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
const i18n = createI18n({
legacy: false,
locale: 'en',
availableLocales: ['en', 'de'],
messages: {
en: {
// ...
},
de: {
// ...
}
}
})
app.use(router)
app.use(i18n)
app.use(ui)
app.mount('#app')
```
#### Set the `locale` prop using `useI18n`
```vue [App.vue]
```
### Dynamic direction
Each locale has a `dir` property which will be used by the `App` component to set the directionality of all components.
In a multilingual application, you might want to set the `lang` and `dir` attributes on the `` element dynamically based on the user's locale, which you can do with the [useHead](https://unhead.unjs.io/usage/composables/use-head) composable:
```vue [App.vue]
```
## Supported languages
*See the full list of supported languages on the documentation website.*
## Sitemap
See the full [sitemap](/sitemap.md) for all pages.