Internationalization (i18n)

Nuxt UI ondersteunt meer dan 50 landinstellingen en multi-directionele (LTR / RTL) internationalization.

Gebruik

Nuxt UI biedt een App-component die uw app omhult om wereldwijde configuraties te bieden, inclusief de locale-prop.

Lokaal

Gebruik de locale prop met de locale die je wilt gebruiken van @nuxt/ui/locale:

app.vue

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

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

Elke landinstelling heeft een eigenschap code (bijv. en, en-GB, fr) die de datum / tijd-indeling bepaalt in componenten zoals Calendar, InputDate en InputTime.

Aangepaste landinstelling

U kunt uw eigen landinstelling maken met het defineLocale hulpprogramma:

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>

Kijk naar de code parameter, daar moet je de iso code van de taal doorgeven. Voorbeeld:

hi Hindi (taal)
de-AT: Duits (taal) zoals gebruikt in Oostenrijk (regio)

Lokaal uitbreiden

U kunt een bestaande landinstelling aanpassen door de messages of code te overschrijven met behulp van het 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>

Dynamische landinstelling

Om dynamisch tussen talen te schakelen, kunt u de Nuxt I18n module gebruiken.

Installeer het Nuxt I18n-pakket

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

Voeg de Nuxt I18n module toe aan uw `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'
    }]
  }
})

Stel de `locale` prop in met `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>

Automatische link lokalisatie: badge{label="4.7+" class="align-text-top"}

Wanneer @nuxtjs/i18n is geïnstalleerd, lokaliseert de Link component automatisch interne links met behulp van de $localePath helper. Dit betekent dat u uw links niet handmatig hoeft in te pakken met localePath() of localeRoute().

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

Externe links en absolute URL 's worden automatisch gedetecteerd en slaan lokalisatie over. U kunt localePath() of localeRoute() indien nodig nog steeds handmatig gebruiken.

Dynamische richting

Elke landinstelling heeft een dir-eigenschap die door de App-component zal worden gebruikt om de richting van alle componenten in te stellen.

In een meertalige applicatie wilt u misschien de kenmerken lang en dir op het <html>-element dynamisch instellen op basis van de landinstelling van de gebruiker, wat u kunt doen met de useHead samen te stellen:

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>

Ondersteunde talen

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.