Skip to content
On this page

Components

BaseFormatProps

BaseFormat Props for Components that is offered Vue I18n

Signature:

typescript
export interface BaseFormatProps

Details

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

locale

Signature:

typescript
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:

typescript
scope?: ComponetI18nScope;

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:

typescript
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:

typescript
DatetimeFormat: {
    name: string;
    props: {
        value: {
            type: (NumberConstructor | DateConstructor)[];
            required: boolean;
        };
        format: {
            type: (ObjectConstructor | StringConstructor)[];
        };
    } & {
        tag: {
            type: (ObjectConstructor | StringConstructor)[];
        };
        locale: {
            type: StringConstructor;
        };
        scope: {
            type: StringConstructor;
            validator: (val: "parent" | "global") => boolean;
            default: "parent" | "global";
        };
    };
    setup(props: DatetimeFormatProps, context: SetupContext): RenderFunction;
}

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

DatetimeFormatProps

DatetimeFormat Component Props

Signature:

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

FormattableProps

Formattable Props

Signature:

typescript
export interface FormattableProps<Value, Format> extends BaseFormatProps

Details

The props used in DatetimeFormat, or NumberFormat component

format

Signature:

typescript
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:

typescript
value: Value;

Details

The value specified for the target component

NumberFormat

Number Format Component

Signature:

typescript
NumberFormat: {
    name: string;
    props: {
        value: {
            type: NumberConstructor;
            required: boolean;
        };
        format: {
            type: (ObjectConstructor | StringConstructor)[];
        };
    } & {
        tag: {
            type: (ObjectConstructor | StringConstructor)[];
        };
        locale: {
            type: StringConstructor;
        };
        scope: {
            type: StringConstructor;
            validator: (val: "parent" | "global") => boolean;
            default: "parent" | "global";
        };
    };
    setup(props: NumberFormatProps, context: SetupContext): RenderFunction;
}

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

NumberFormatProps

NumberFormat Component Props

Signature:

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

Translation

Translation Component

Signature:

typescript
Translation: {
    name: string;
    props: {
        keypath: {
            type: StringConstructor;
            required: boolean;
        };
        plural: {
            type: (StringConstructor | NumberConstructor)[];
            validator: (val: any) => boolean;
        };
    } & {
        tag: {
            type: (ObjectConstructor | StringConstructor)[];
        };
        locale: {
            type: StringConstructor;
        };
        scope: {
            type: StringConstructor;
            validator: (val: "parent" | "global") => boolean;
            default: "parent" | "global";
        };
    };
    setup(props: TranslationProps, context: SetupContext): RenderFunction;
}

Details

See the following items for property about details

See Also

Examples

html
<div id="app">
  <!-- ... -->
  <i18n path="term" tag="label" for="tos">
    <a :href="url" target="_blank">{{ $t('tos') }}</a>
  </i18n>
  <!-- ... -->
</div>
js
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:

typescript
export interface TranslationProps extends BaseFormatProps

keypath

Signature:

typescript
keypath: string;

Details

The locale message key can be specified prop

plural

Signature:

typescript
plural?: number | string;

Details

The Plural Choosing the message number prop