국제화 (i 18 n)

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">
    <RouterView />
  </UApp>
</template>

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

사용자 지정 로케일

defineLocale 유틸리티를 사용하여 사용자 고유의 로케일을 만들 수 있습니다.

App.vue

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

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

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

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

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

Extend 로케일

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

App.vue

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

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

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

Dynamic 로케일

언어 간에 동적으로 전환하려면 Vue I18n 플러그인을 사용할 수 있습니다.

Vue I18n 패키지 설치하기

pnpm add vue-i18n@11

yarn add vue-i18n@11

npm install vue-i18n@11

bun add vue-i18n@11

x`main.ts`에서 Vue I18n 플러그인 사용

src/main.ts

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  availableLocales: ['en', 'de'],
  messages: {
    en: {
      // ...
    },
    de: {
      // ...
    }
  }
})

app.use(router)
app.use(i18n)
app.use(ui)

app.mount('#app')

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

App.vue

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()
</script>

<template>
  <UApp :locale="locales[locale]">
    <RouterView />
  </UApp>
</template>

Dynamic 방향

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

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

App.vue

<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
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]">
    <RouterView />
  </UApp>
</template>

지원 언어Comment

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 VueUse to allow for easy switching between light and dark themes.

SSR

Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.