周陆军博客

Appearance

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