Internationalisation (i18n)

Nuxt UI prend en charge plus de 50 locales et l

Utilisation

Nuxt UI fournit un composant App qui enveloppe votre application pour fournir des configurations globales, y compris le prop locale.

Localité

Utilisez la prop locale avec la locale que vous souhaitez utiliser à partir de @nuxt/ui/locale:

app.vue

<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

<template>
  <UApp :locale="fr">
    <NuxtPage />
  </UApp>
</template>

Chaque locale possède une propriété code (par exemple, en, en-GB, fr) qui détermine le format de date/heure dans des composants tels que Calendar, InputDate et InputTime.

Custom locale (région personnalisée)

Vous pouvez créer vos propres paramètres régionaux en utilisant l'utilitaire defineLocale:

app.vue

<script setup lang="ts">
import type { Messages } from '@nuxt/ui'

const locale = defineLocale<Messages>({
  name: 'My custom locale',
  code: 'en',
  dir: 'ltr',
  messages: {
    // implement pairs
  }
})
</script>

<template>
  <UApp :locale="locale">
    <NuxtPage />
  </UApp>
</template>

Regardez le paramètre code, vous devez y passer le code iso de la langue.

xhi Hindi (langue anglaise)
xde-AT: allemand (langue) tel qu 'il est utilisé en Autriche (région)

Extend régional

Vous pouvez personnaliser une locale existante en remplaçant son messages ou code à l'aide de l'utilitaire extendLocale:

app.vue

<script setup lang="ts">
import { en } from '@nuxt/ui/locale'

const locale = extendLocale(en, {
  code: 'en-AU',
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

<template>
  <UApp :locale="locale">
    <NuxtPage />
  </UApp>
</template>

Localisation dynamique

Pour basculer dynamiquement entre les langues, vous pouvez utiliser le module Nuxt I18n.

Installer le paquet Nuxt I18n

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

Ajouter le module Nuxt I18n dans votre `nuxt.config.ts`

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/i18n'
  ],
  css: ['~/assets/css/main.css'],
  i18n: {
    locales: [{
      code: 'de',
      name: 'Deutsch'
    }, {
      code: 'en',
      name: 'English'
    }, {
      code: 'fr',
      name: 'Français'
    }]
  }
})

Définir le prop `locale` avec `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>

Localisation automatique des liens: badge{label="4.7+" class="align-text-top"}

Lorsque @nuxtjs/i18n est installé, le composant Link localise automatiquement les liens internes à l'aide de l'assistant $localePath.Cela signifie que vous n'avez pas besoin d'envelopper manuellement vos liens avec localePath() ou localeRoute().

<template>
  <!-- Automatically becomes /en/about or /fr/about based on current locale -->
  <ULink to="/about">About</ULink>
  <UButton to="/contact">Contact</UButton>
</template>

Les liens externes et les URL absolues sont détectés automatiquement et ignorent la localisation. Vous pouvez toujours utiliser manuellement localePath() ou localeRoute() si nécessaire.

Direction dynamique

Chaque locale possède une propriété dir qui sera utilisée par le composant App pour définir la directionnalité de tous les composants.

Dans une application multilingue, vous pouvez définir les attributs lang et dir sur l'élément <html> de manière dynamique en fonction des paramètres régionaux de l'utilisateur, ce que vous pouvez faire avec le composable useHead:

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>

Langues supportées

By default, the en locale is used.

🇸🇦

العربية

Code: ar

🇦🇿

Azərbaycanca

Code: az

🇧🇾

Беларуская

Code: be

🇧🇬

Български

Code: bg

🇧🇩

বাংলা

Code: bn

🇪🇸

Català

Code: ca

🇮🇶

کوردی

Code: ckb

🇨🇿

Čeština

Code: cs

🇩🇰

Dansk

Code: da

🇩🇪

Deutsch

Code: de

🇦🇹

Deutsch (Österreich)

Code: de-AT

🇨🇭

Schweizer Hochdeutsch

Code: de-CH

🇬🇷

Ελληνικά

Code: el

🇺🇸

English

Code: en

🇬🇧

English (United Kingdom)

Code: en-GB

🇪🇸

Español

Code: es

🇪🇪

Eesti

Code: et

🇪🇸

Euskara

Code: eu

🇮🇷

فارسی

Code: fa-IR

🇫🇮

Suomi

Code: fi

🇫🇷

Français

Code: fr

🇪🇸

Galego

Code: gl

🇮🇱

עברית

Code: he

🇮🇳

हिन्दी

Code: hi

🇭🇷

Hrvatski

Code: hr

🇭🇺

Magyar

Code: hu

🇦🇲

Հայերեն

Code: hy

🇮🇩

Bahasa Indonesia

Code: id

🇮🇸

Íslenska

Code: is

🇮🇹

Italiano

Code: it

🇯🇵

日本語

Code: ja

🇬🇪

ქართული

Code: ka

🇰🇿

Қазақша

Code: kk

🇰🇭

ភាសាខ្មែរ

Code: km

🇰🇷

한국어

Code: ko

🇰🇬

Кыргызча

Code: ky

🇱🇺

Lëtzebuergesch

Code: lb

🇱🇦

ລາວ

Code: lo

🇱🇹

Lietuvių

Code: lt

🇱🇻

Latviešu

Code: lv

🇲🇳

Монгол

Code: mn

🇲🇾

Melayu

Code: ms

🇳🇴

Norsk Bokmål

Code: nb-NO

🇳🇱

Nederlands

Code: nl

🇵🇱

Polski

Code: pl

🇵🇹

Português

Code: pt

🇧🇷

Português (Brasil)

Code: pt-BR

🇷🇴

Română

Code: ro

🇷🇺

Русский

Code: ru

🇸🇰

Slovenčina

Code: sk

🇸🇮

Slovenščina

Code: sl

🇦🇱

Shqip

Code: sq

🇸🇪

Svenska

Code: sv

🇹🇬

Тоҷикӣ

Code: tg

🇹🇭

ไทย

Code: th

🇹🇷

Türkçe

Code: tr

🇨🇳

ئۇيغۇرچە

Code: ug-CN

🇺🇦

Українська

Code: uk

🇵🇰

اردو

Code: ur

🇺🇿

Oʻzbek

Code: uz

🇻🇳

Tiếng Việt

Code: vi

🇨🇳

简体中文

Code: zh-CN

🇹🇼

繁體中文

Code: zh-TW

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 CLI to create a new locale:

pnpm cli make locale --code <code>

Color Mode

Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.

Content

Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.