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

navigation.title, title, description, select

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

Usage

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

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

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

Direction

Each locale has a default direction, but you can override it using the dir prop if needed.

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

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

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

Custom locale

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

<script setup lang="ts">
const locale = defineLocale({
  name: 'My custom locale',
  code: 'en',
  messages: {
    // implement pairs
  }
})
</script>

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

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

Dynamic locale

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

::steps{level="4"}

Install the Nuxt I18n package

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

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

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

<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