定義Locale
アプリケーションのカスタムロケールを作成するユーティリティです。
使用法
自動インポートされたdefineLocaleユーティリティを使用して、独自の翻訳を含むカスタムロケールを作成します。
<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>
API
defineLocale<M>(options: DefineLocaleOptions<M>): Locale<M>
オプションで新しいロケールオブジェクトを作成します。
パラメータ
options
DefineLocaleOptions<M> required
次のプロパティを持つlocale構成オブジェクト:
name
string required
ロケールの表示名例
'English'``'Français'。code
string required
ロケールのISOコード例
'en'``'fr'``'de-AT'。dir
'ltr' | 'rtl'
ロケールのテキスト方向。デフォルトは
'ltr'です。messages
M required
translation messagesオブジェクト。型の安全性のために
@nuxt/uiからMessages型を使用します。戻り値 A Locale<M> App コンポーネントのlocale propに渡すことができるオブジェクト。
例
カスタムロケールを作成する完全な例を以下に示します:
<script setup lang="ts">
import type { Messages } from '@nuxt/ui'
const locale = defineLocale<Messages>({
name: 'Español',
code: 'es',
dir: 'ltr',
messages: {
alert: {
close: 'Cerrar'
},
modal: {
close: 'Cerrar'
},
commandPalette: {
back: 'Atrás',
close: 'Cerrar',
noData: 'Sin datos',
noMatch: 'Sin resultados',
placeholder: 'Escribe un comando o busca…'
}
// ... other component messages
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>