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:hiHindi (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.
| Language | Code | Direction |
|---|---|---|
| العربية | ar | rtl |
| Čeština | cs | ltr |
| Deutsch | de | ltr |
| English | en | ltr |
| Español | es | ltr |
| فارسی | fa-IR | rtl |
| Français | fr | ltr |
| Italiano | it | ltr |
| 한국어 | ko | ltr |
| Polski | pl | ltr |
| Русский | ru | ltr |
| 简体中文 | zh-Hans | ltr |
| 繁体中文 | zh-Hant | ltr |
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"