Internationalization (i18n) in a Nuxt app

Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).

Usage

Nuxt UI provides an 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:

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:

app.vue

<script setup lang="ts">
const locale = defineLocale({
  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)

Dynamic locale

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

Install the Nuxt I18n package

pnpm add @nuxtjs/i18n@next

yarn add @nuxtjs/i18n@next

npm install @nuxtjs/i18n@next

bun add @nuxtjs/i18n@next

Add the Nuxt I18n module in your `nuxt.config.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`

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>

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

🇨🇿

Čeština

Code: cs

🇩🇪

Deutsch

Code: de

🇬🇧

English

Code: en

🇪🇸

Español

Code: es

🇮🇷

فارسی

Code: fa-IR

🇫🇷

Français

Code: fr

🇮🇹

Italiano

Code: it

🇰🇵

한국어

Code: ko

🇳🇱

Nederlands

Code: nl

🇵🇱

Polski

Code: pl

🇷🇺

Русский

Code: ru

🇹🇷

Türkçe

Code: tr

🇨🇳

简体中文

Code: zh-Hans

🇨🇳

繁体中文

Code: zh-Hant

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.

Internationalization (i18n) in a Vue app

Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).