mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-27 02:10:40 +01:00
155 lines
2.7 KiB
Markdown
155 lines
2.7 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
|
|
---
|
|
|
|
## Usage
|
|
|
|
::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>
|
|
```
|
|
|
|
### Direction
|
|
|
|
Each locale has a default direction, but you can override it using the `dir` prop if needed.
|
|
|
|
Use the `dir` prop with `ltr` or `rtl` to set the global reading direction of your app:
|
|
|
|
```vue [app.vue]
|
|
<script setup lang="ts">
|
|
import { fr } from '@nuxt/ui/locale'
|
|
</script>
|
|
|
|
<template>
|
|
<UApp dir="rtl" :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({
|
|
name: 'My custom locale',
|
|
code: 'en',
|
|
messages: {
|
|
// implement pairs
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UApp :locale="locale">
|
|
<NuxtPage />
|
|
</UApp>
|
|
</template>
|
|
```
|
|
|
|
::tip
|
|
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 [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
|