Internationalization (i18n)

Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.

Usage

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:

app.vue

<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

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

Each locale has a code property (e.g., en, en-GB, fr) that determines the date/time format in components like Calendar, InputDate and InputTime.

Custom locale

You can create your own locale using the defineLocale utility:

app.vue

<script setup lang="ts">
import type { Messages } from '@nuxt/ui'

const locale = defineLocale<Messages>({
  name: 'My custom locale',
  code: 'en',
  dir: 'ltr',
  messages: {
    // implement pairs
  }
})
</script>

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

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 utility:

app.vue

<script setup lang="ts">
import { en } from '@nuxt/ui/locale'

const locale = extendLocale(en, {
  code: 'en-AU',
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

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

Dynamic locale

To dynamically switch between languages, you can use the Nuxt I18n module.

Install the Nuxt I18n package

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

Add the Nuxt I18n module in your `nuxt.config.ts`

nuxt.config.ts

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

Set the `locale` prop using `useI18n`

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>

Automatic link localization Soon

When @nuxtjs/i18n is installed, the Link component automatically localizes internal links using the $localePath helper. This means you don't need to manually wrap your links with localePath() or localeRoute().

<template>
  <!-- Automatically becomes /en/about or /fr/about based on current locale -->
  <ULink to="/about">About</ULink>
  <UButton to="/contact">Contact</UButton>
</template>

External links and absolute URLs are automatically detected and skip localization. You can still manually use localePath() or localeRoute() if needed.

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 <html> element dynamically based on the user's locale, which you can do with the useHead composable:

app.vue

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()

const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir
  }
})
</script>

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

Supported languages

By default, the en locale is used.

🇸🇦

العربية

Code: ar

🇦🇿

Azərbaycanca

Code: az

🇧🇾

Беларуская

Code: be

🇧🇬

Български

Code: bg

🇧🇩

বাংলা

Code: bn

🇪🇸

Català

Code: ca

🇮🇶

کوردی

Code: ckb

🇨🇿

Čeština

Code: cs

🇩🇰

Danish

Code: da

🇩🇪

Deutsch

Code: de

🇨🇭

Schweizerdeutsch

Code: de-CH

🇬🇷

Ελληνικά

Code: el

🇺🇸

English

Code: en

🇬🇧

English (United Kingdom)

Code: en-GB

🇪🇸

Español

Code: es

🇪🇪

Eesti

Code: et

🇪🇸

Euskera

Code: eu

🇮🇷

فارسی

Code: fa-IR

🇫🇮

Suomeksi

Code: fi

🇫🇷

Français

Code: fr

🇪🇸

Galego

Code: gl

🇮🇱

Hebrew

Code: he

🇮🇳

Hindi

Code: hi

🇭🇷

Hrvatski

Code: hr

🇭🇺

Magyar

Code: hu

🇦🇲

Հայերեն

Code: hy

🇮🇩

Bahasa Indonesia

Code: id

🇮🇸

Icelandic

Code: is

🇮🇹

Italiano

Code: it

🇯🇵

日本語

Code: ja

🇬🇪

ქართული

Code: ka

🇰🇿

Қазақша

Code: kk

🇰🇭

ភាសាខ្មែរ

Code: km

🇰🇷

한국어

Code: ko

🇰🇬

Кыргызча

Code: ky

🇱🇺

Lëtzebuergesch

Code: lb

🇱🇦

ລາວ

Code: lo

🇱🇹

Lietuvių

Code: lt

🇲🇳

Монгол

Code: mn

🇲🇾

Melayu

Code: ms

🇳🇴

Norsk Bokmål

Code: nb-NO

🇳🇱

Nederlands

Code: nl

🇵🇱

Polski

Code: pl

🇵🇹

Português

Code: pt

🇧🇷

Português (Brasil)

Code: pt-BR

🇷🇴

Română

Code: ro

🇷🇺

Русский

Code: ru

🇸🇰

Slovenčina

Code: sk

🇸🇮

Slovenščina

Code: sl

🇦🇱

Shqip

Code: sq

🇸🇪

Svenska

Code: sv

🇹🇭

ไทย

Code: th

🇹🇯

Тоҷикӣ

Code: tj

🇹🇷

Türkçe

Code: tr

🇨🇳

ئۇيغۇرچە

Code: ug-CN

🇺🇦

Українська

Code: uk

🇵🇰

Urdu

Code: ur

🇺🇿

Oʻzbek

Code: uz

🇻🇳

Tiếng Việt

Code: vi

🇨🇳

简体中文

Code: zh-CN

🇹🇼

繁體中文

Code: zh-TW

If you need additional languages, you can contribute by creating a PR to add a new locale in src/runtime/locale/.

You can use the nuxt-ui CLI to create a new locale:

nuxt-ui make locale --code "en" --name "English"

Color Mode

Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.

Content

Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.