국제화 (i18n)

Nuxt UI는 50개 이상의 로케일 및 다중 방향(LTR/RTL) 국제화를 지원합니다.

사용법

Nuxt UI는 locale prop를 포함한 전역 구성을 제공하기 위해 앱을 래핑하는 **Appxph05x 구성 요소를 제공합니다.Nuxt UI prop prop prop including global configurations.

로케 일

@nuxt/ui/locale에서 사용할 로케일과 함께 locale prop을 사용합니다.

app.vue

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

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

각 로케일에는 code 속성(예: en, en-GB, fr)이 있으며, Calendar, InputDate 및 xputTimph3031x와 같은 구성 요소의 날짜/시간 형식을 결정합니다.

사용자 지정 로케일

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>

code 매개 변수를 보면 언어의 ISO 코드를 전달해야합니다. 예를 들어 다음과 같습니다.

hi 힌디어 (언어)
de-AT: 오스트리아 (지역)에서 사용되는 독일어 (언어)

Extend 로캘

extendLocale 유틸리티를 사용하여 messages 또는 code를 재지정하여 기존 로케일을 사용자 정의할 수 있습니다.

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>

Dynamic 로케일

언어 간에 동적으로 전환하려면 Nuxt I18n 모듈을 사용할 수 있습니다.

Nuxt I18n 패키지 설치하기

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

xx`nuxt.config.ts`xph13x에 Nuxt I18n 모듈을 추가합니다.

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'
    }]
  }
})

x`useI18n`를 사용하여 `locale` Prop 설정

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>

자동 링크 지역화: badge{label="4.7+" class="align-text-top"}

@nuxtjs/i18n를 설치하면 Link 구성 요소가 $localePath 도우미를 사용하여 내부 링크를 자동으로 현지화합니다. 즉, localePath() 또는 localeRoute()로 링크를 수동으로 래핑할 필요가 없습니다.

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

외부 링크 및 절대 URL은 자동으로 감지되고 지역화를 건너뜁니다. 필요한 경우 localePath() 또는 localeRoute()를 수동으로 사용할 수 있습니다.

Dynamic 방향

각 로케일에는 dir 속성이 있으며 App 구성 요소가 모든 구성 요소의 방향성을 설정하는 데 사용됩니다.

다국어 응용 프로그램에서는 useHead 컴포지션을 사용하여 사용자의 로케일을 기반으로 <html> 요소의 lang 및 dir 속성을 동적으로 설정할 수 있습니다.

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>

지원 언어

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.