Internationalization (i18n)
Learn how to internationalize your Vue app with multi-directional support (LTR/RTL).
Usage
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
yarn add vue-i18n@10
npm install vue-i18n@10
bun 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"