a9c8eb3f60
Co-authored-by: hywax <me@hywax.space> Co-authored-by: Benjamin Canac <canacb1@gmail.com>
5.1 KiB
title, description, framework, navigation.icon
| title | description | framework | navigation.icon |
|---|---|---|---|
| Internationalization (i18n) | Learn how to internationalize your Vue app with multi-directional support (LTR/RTL). | vue | i-lucide-languages |
::callout{to="/getting-started/i18n/nuxt" icon="i-logos-nuxt-icon" class="hidden"} Looking for the Nuxt version? ::
Usage
::note{to="/components/app"} Nuxt UI provides an App component that wraps your app to provide global configurations. ::
Locale
::module-only
#ui :::div
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">
<RouterView />
</UApp>
</template>
:::
#ui-pro :::div
Use the locale prop with the locale you want to use from @nuxt/ui-pro/locale:
<script setup lang="ts">
import { fr } from '@nuxt/ui-pro/locale'
</script>
<template>
<UApp :locale="fr">
<RouterView />
</UApp>
</template>
::: ::
Custom locale
You also have the option to add your locale using defineLocale:
::module-only
#ui :::div
<script setup lang="ts">
import type { Messages } from '@nuxt/ui'
import { defineLocale } from '@nuxt/ui/composables/defineLocale.js'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<RouterView />
</UApp>
</template>
:::
#ui-pro :::div
<script setup lang="ts">
import type { Messages } from '@nuxt/ui-pro'
import { defineLocale } from '@nuxt/ui/composables/defineLocale.js'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<RouterView />
</UApp>
</template>
::: ::
::tip
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 Vue I18n plugin.
::steps{level="4"}
Install the Vue I18n package
::code-group{sync="pm"}
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
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
const i18n = createI18n({
legacy: false,
locale: 'en',
availableLocales: ['en', 'de'],
messages: {
en: {
// ...
},
de: {
// ...
}
}
})
app.use(router)
app.use(i18n)
app.use(ui)
app.mount('#app')
Set the locale prop using useI18n
::module-only
#ui :::div
<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>
:::
#ui-pro :::div
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui-pro/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:
::module-only
#ui :::div
<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>
:::
#ui-pro :::div
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
import * as locales from '@nuxt/ui-pro/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
:supported-languages