コンポーネント

BaseFormatProps

Vue I18nが提供するコンポーネントのBaseFormat Props

シグネチャ:

export interface BaseFormatProps

詳細

翻訳、日付形式、数値形式などのコンポーネントの基本的なプロパティのインターフェース定義。

i18n

シグネチャ:

i18n?: Composer;

詳細

既存スコープを持つコンポーザーインスタンス。

このオプションは scope オプションよりも優先されます。

locale

シグネチャ:

locale?: Locale;

詳細

コンポーネントで使用されるロケールを指定します。

指定された場合、ターゲットコンポーネントのグローバルスコープまたは親スコープのロケールはオーバーライドされず、指定されたロケールが使用されます。

scope

シグネチャ:

scope?: ComponentI18nScope;

詳細

ターゲットコンポーネントで使用されるスコープを指定します。

global または parent を指定できます。

global が指定された場合はグローバルスコープが使用され、parent が指定された場合はターゲットコンポーネントの親のスコープが使用されます。

親がグローバルスコープの場合はグローバルスコープが使用され、ローカルスコープの場合はローカルスコープが使用されます。

tag

シグネチャ:

tag?: string | object;

詳細

スロットに配布されるコンテンツをラップするために使用します。省略された場合、スロットコンテンツはフラグメントとして扱われます。

p のような文字列ベースのタグ名、またはコンポーネントが定義されているオブジェクトを指定できます。

DatetimeFormat

日付形式コンポーネント

シグネチャ:

DatetimeFormat: {
    new (): {
        $props: VNodeProps & DatetimeFormatProps & BaseFormatProps;
    };
}

詳細

プロパティに関する詳細については以下の項目を参照してください

DANGER

IEではサポートされていません。IE では Intl.DateTimeFormat#formatToParts がサポートされていないためです。

使用したい場合は、polyfill を使用する必要があります。

関連項目

• FormattableProps
• BaseFormatProps
• カスタムフォーマット

DatetimeFormatProps

DatetimeFormat コンポーネントのプロパティ

シグネチャ:

export type DatetimeFormatProps = FormattableProps<number | Date, Intl.DateTimeFormatOptions>;

FormattableProps

フォーマット可能なプロパティ

シグネチャ:

export interface FormattableProps<Value, Format> extends BaseFormatProps

詳細

DatetimeFormat または NumberFormat コンポーネントで使用されるプロパティ

format

シグネチャ:

format?: string | Format;

詳細

ターゲットコンポーネントで使用するフォーマットを指定します。

ECMA 402 の Intl API で定義されたフォーマットキー文字列またはフォーマットを指定します。

value

シグネチャ:

value: Value;

詳細

ターゲットコンポーネントに指定された値

NumberFormat

数値形式コンポーネント

シグネチャ:

NumberFormat: {
    new (): {
        $props: VNodeProps & NumberFormatProps & BaseFormatProps;
    };
}

詳細

プロパティに関する詳細については以下の項目を参照してください

DANGER

IEではサポートされていません。IE では Intl.NumberFormat#formatToParts がサポートされていないためです。

使用したい場合は、polyfill を使用する必要があります。

関連項目

• FormattableProps
• BaseFormatProps
• カスタムフォーマット

NumberFormatProps

NumberFormat コンポーネントのプロパティ

シグネチャ:

export type NumberFormatProps = FormattableProps<number, Intl.NumberFormatOptions>;

Translation

翻訳コンポーネント

シグネチャ:

Translation: {
    new (): {
        $props: VNodeProps & TranslationProps;
    };
}

詳細

プロパティに関する詳細については以下の項目を参照してください

関連項目

• TranslationProps
• BaseFormatProps
• コンポーネントの補間

例

<div id="app">
  <!-- ... -->
  <i18n keypath="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
  <!-- ... -->
</div>

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const messages = {
  en: {
    tos: 'Term of Service',
    term: 'I accept xxx {0}.'
  },
  ja: {
    tos: '利用規約',
    term: '私は xxx の{0}に同意します。'
  }
}

const i18n = createI18n({
  locale: 'en',
  messages
})

const app = createApp({
  data: {
    url: '/term'
  }
}).use(i18n).mount('#app')

TranslationProps

翻訳コンポーネントのプロパティ

シグネチャ:

export interface TranslationProps extends BaseFormatProps

keypath

シグネチャ:

keypath: string;

詳細

ロケールメッセージキーを指定できるプロパティ

plural

シグネチャ:

plural?: number | string;

詳細

メッセージ番号を選択する複数形のプロパティ