国際化（i18n）

Nuxt UIは50以上のロケールと多方向（LTR/RTL）国際化をサポートしています。

使用法

Nuxt UIはAppコンポーネントを提供し、アプリケーションをラップしてlocale propを含むグローバル設定を提供します。

Locale

@nuxt/ui/localeから使用したいロケールでlocaleプロパティを使用します：

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、InputTimeのようなコンポーネントの日付/時刻形式を決定します。

カスタムロケール

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>

動的ロケール

言語を動的に切り替えるには、Nuxt I 18 nモジュールを使用します。

Nuxt I18nパッケージをインストールする

pnpm add @nuxtjs/i18n

yarn add @nuxtjs/i18n

npm install @nuxtjs/i18n

bun add @nuxtjs/i18n

x`nuxt.config.ts`に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'
    }]
  }
})

`useI18n`を使用して`locale`プロパティを設定する

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()を使用できます。

ダイナミック方向

各ロケールにはdirプロパティがあり、Appコンポーネントがすべてのコンポーネントの方向性を設定するために使用します。

多言語アプリケーションでは、<html>要素のlang属性とdir属性をユーザのロケールに基づいて動的に設定したいかもしれません。これは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>

対応言語

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.