mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
184 lines
3.1 KiB
Markdown
184 lines
3.1 KiB
Markdown
---
|
|
navigation.title: Nuxt
|
|
title: Internationalization (i18n) in a Nuxt app
|
|
description: 'Learn how to internationalize your Nuxt app and support multi-directional support (LTR/RTL).'
|
|
select:
|
|
items:
|
|
- label: Nuxt
|
|
icon: i-logos-nuxt-icon
|
|
to: /getting-started/i18n/nuxt
|
|
- label: Vue
|
|
icon: i-logos-vue
|
|
to: /getting-started/i18n/vue
|
|
---
|
|
|
|
::note{to="/components/app"}
|
|
Nuxt UI provides an [App](/components/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`:
|
|
|
|
```vue [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`:
|
|
|
|
```vue [app.vue]
|
|
<script setup lang="ts">
|
|
const locale = defineLocale('My custom locale', {
|
|
// implement pairs
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UApp :locale="locale">
|
|
<NuxtPage />
|
|
</UApp>
|
|
</template>
|
|
```
|
|
|
|
### Dynamic locale
|
|
|
|
To dynamically switch between languages, you can use the [Nuxt I18n](https://i18n.nuxtjs.org/) module.
|
|
|
|
::steps{level="4"}
|
|
|
|
#### Install the Nuxt I18n package
|
|
|
|
::code-group{sync="pm"}
|
|
|
|
```bash [pnpm]
|
|
pnpm add @nuxtjs/i18n@next
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add @nuxtjs/i18n@next
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install @nuxtjs/i18n@next
|
|
```
|
|
|
|
```bash [bun]
|
|
bun add @nuxtjs/i18n@next
|
|
```
|
|
|
|
::
|
|
|
|
#### Add the Nuxt I18n module in your `nuxt.config.ts`{lang="ts-type"}
|
|
|
|
```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`
|
|
|
|
```vue [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>
|
|
```
|
|
|
|
::
|
|
|
|
### Supported languages
|
|
|
|
:supported-languages
|
|
|
|
## Direction
|
|
|
|
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
|
|
|
|
```vue [app.vue]
|
|
<template>
|
|
<UApp dir="rtl">
|
|
<NuxtPage />
|
|
</UApp>
|
|
</template>
|
|
```
|
|
|
|
### Dynamic direction
|
|
|
|
To dynamically change the global reading direction of your app, you can use VueUse's [useTextDirection](https://vueuse.org/core/useTextDirection/) composable to detect and switch between LTR and RTL text directions.
|
|
|
|
::steps{level="4"}
|
|
|
|
#### Install the `@vueuse/core` package
|
|
|
|
::code-group{sync="pm"}
|
|
|
|
```bash [pnpm]
|
|
pnpm add @vueuse/core
|
|
```
|
|
|
|
```bash [yarn]
|
|
yarn add @vueuse/core
|
|
```
|
|
|
|
```bash [npm]
|
|
npm install @vueuse/core
|
|
```
|
|
|
|
```bash [bun]
|
|
bun add @vueuse/core
|
|
```
|
|
|
|
::
|
|
|
|
#### Set the `dir` prop using `useTextDirection`
|
|
|
|
```vue [app.vue]
|
|
<script setup lang="ts">
|
|
import { useTextDirection } from '@vueuse/core'
|
|
|
|
const textDirection = useTextDirection({ initialValue: 'ltr' })
|
|
const dir = computed(() => textDirection.value === 'rtl' ? 'rtl' : 'ltr')
|
|
</script>
|
|
|
|
<template>
|
|
<UApp :dir="dir">
|
|
<NuxtPage />
|
|
</UApp>
|
|
</template>
|
|
```
|
|
|
|
::
|