vue-i18n / général / useI18n

Fonction : useI18n()

Signature d'appel

function useI18n<Options>(options?): Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, Options["locale"] extends unknown ? string : Options["locale"]>;

Paramètres de type

Paramètre de type

Type par défaut

Options extends UseI18nOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, ComposerOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, string, string, string, LocaleMessage<VueMessageType>, IntlDateTimeFormat, IntlNumberFormat, LocaleMessages<LocaleMessage<VueMessageType>, string, VueMessageType>, IntlDateTimeFormats<IntlDateTimeFormat, string>, IntlNumberFormats<IntlNumberFormat, string>>>

UseI18nOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, ComposerOptions<{ datetime: IntlDateTimeFormat; message: DefaultLocaleMessageSchema; number: IntlNumberFormat; }, string, string, string, string, LocaleMessage<VueMessageType>, IntlDateTimeFormat, IntlNumberFormat, LocaleMessages<LocaleMessage<VueMessageType>, string, VueMessageType>, IntlDateTimeFormats<IntlDateTimeFormat, string>, IntlNumberFormats<IntlNumberFormat, string>>>

Paramètres

Paramètre	Type
options?	Options

Retours

Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, Options["locale"] extends unknown ? string : Options["locale"]>

Signature d'appel

function useI18n<Schema, Locales, Options>(options?): Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, NonNullable<Options["locale"]>>;

Utilisation de l'API de composition pour Vue I18n

Paramètres de type

Paramètre de type	Type par défaut	Description
Schema	LocaleMessage<VueMessageType>	Le schéma des ressources i18n (messages, datetimeFormats, numberFormats), par défaut LocaleMessage
Locales	"en-US"	Les langues du schéma de ressource i18n, par défaut en-US
Options extends UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, ComposerOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleMessages<SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, VueMessageType>, IntlDateTimeFormats<SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>, IntlNumberFormats<SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>>>	UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, ComposerOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleMessages<SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, VueMessageType>, IntlDateTimeFormats<SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>, IntlNumberFormats<SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string>>>	-

Paramètres

Paramètre	Type	Description
options?	Options	Une option, voir UseI18nOptions

Retours

Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, NonNullable<Options["locale"]>>

Instance de Composer

Remarques

Cette fonction est principalement utilisée par setup.

Si des options sont spécifiées, une instance Composer est créée pour chaque composant et vous pouvez être localisé sur le composant.

Si les options ne sont pas spécifiées, vous pouvez être localisé en utilisant le Composer global.

Exemple

cas : localisation basée sur les ressources du composant

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>message : {{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
 setup() {
   const { t, locale } = useI18n({
     locale: 'ja',
     messages: {
       en: { ... },
       ja: { ... }
     }
   })
   // Quelque chose à faire ...

   return { ..., t, locale }
 }
}
</script>

Composition Vue I18n