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

ar - العربية
cs - Čeština
de - Deutsch
en - English (default)
es - Español
fr - Français
it - Italiano
pl - Polski
ru - Русский
zh_hans - 简体中文
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.

Vue

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