Internationalization (i18n)

Learn how to internationalize your Vue 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">
    <RouterView />
  </UApp>
</template>

Custom locale

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

App.vue
<script setup lang="ts">
import { defineLocale } from '@nuxt/ui/runtime/composables/defineLocale'

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

<template>
  <UApp :locale="locale">
    <RouterView />
  </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 Vue I18n plugin.

Install the Vue I18n package

pnpm add vue-i18n@10

Use the Vue I18n plugin in your main.ts

main.ts
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages: {
    en: {
      // ...
    },
    de: {
      // ...
    }
  }
})

const app = createApp(App)

app.use(i18n)
app.use(ui)

app.mount('#app')

Set the locale prop using useI18n

App.vue
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()
</script>

<template>
  <UApp :locale="locales[locale]">
    <RouterView />
  </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 { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
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]">
    <RouterView />
  </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: ja
🇰🇷
한국어
Code: ko
🇳🇱
Nederlands
Code: nl
🇵🇱
Polski
Code: pl
🇵🇹
Português
Code: pt
🇧🇷
Português (Brasil)
Code: pt-BR
🇷🇺
Русский
Code: ru
🇸🇰
Slovenčina
Code: sk
🇹🇷
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"