Components

BaseFormatProps

BaseFormat Props for Components that is offered Vue I18n

Signature:

export interface BaseFormatProps

Details

The interface definitions of the underlying props of components such as Translation, DatetimeFormat, and NumberFormat.

i18n

Signature:

i18n?: Composer;

Details

A composer instance with an existing scope.

This option takes precedence over the scope option.

locale

Signature:

locale?: Locale;

Details

Specifies the locale to be used for the component.

If specified, the global scope or the locale of the parent scope of the target component will not be overridden and the specified locale will be used.

scope

Signature:

scope?: ComponentI18nScope;

Details

Specifies the scope to be used in the target component.

You can specify either global or parent.

If global is specified, global scope is used, else then parent is specified, the scope of the parent of the target component is used.

If the parent is a global scope, the global scope is used, if it's a local scope, the local scope is used.

tag

Signature:

tag?: string | object;

Details

Used to wrap the content that is distribute in the slot. If omitted, the slot content is treated as Fragments.

You can specify a string-based tag name, such as p, or the object for which the component is defined.

DatetimeFormat

Datetime Format Component

Signature:

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

Details

See the following items for property about details

DANGER

Not supported IE, due to no support Intl.DateTimeFormat#formatToParts in IE

If you want to use it, you need to use polyfill

See Also

• FormattableProps
• BaseFormatProps
• Custom Formatting

DatetimeFormatProps

DatetimeFormat Component Props

Signature:

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

FormattableProps

Formattable Props

Signature:

export interface FormattableProps<Value, Format> extends BaseFormatProps

Details

The props used in DatetimeFormat, or NumberFormat component

format

Signature:

format?: string | Format;

Details

The format to use in the target component.

Specify the format key string or the format as defined by the Intl API in ECMA 402.

value

Signature:

value: Value;

Details

The value specified for the target component

NumberFormat

Number Format Component

Signature:

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

Details

See the following items for property about details

DANGER

Not supported IE, due to no support Intl.NumberFormat#formatToParts in IE

If you want to use it, you need to use polyfill

See Also

• FormattableProps
• BaseFormatProps
• Custom Formatting

NumberFormatProps

NumberFormat Component Props

Signature:

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

Translation

Translation Component

Signature:

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

Details

See the following items for property about details

See Also

• TranslationProps
• BaseFormatProps
• Component Interpolation

Examples

<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

Translation Component Props

Signature:

export interface TranslationProps extends BaseFormatProps

keypath

Signature:

keypath: string;

Details

The locale message key can be specified prop

plural

Signature:

plural?: number | string;

Details

The Plural Choosing the message number prop