From 20a1442ed49e86bc4f40353e175008f73b2a39db Mon Sep 17 00:00:00 2001 From: kazuya kawaguchi Date: Mon, 27 Mar 2023 01:50:37 +0900 Subject: [PATCH] deploy --- 404.html | 21 ++ api/index.html | 186 +++++++++++++++ assets/css/0.styles.dc7beab8.css | 1 + assets/img/search.83621669.svg | 1 + assets/js/10.7a43b4a8.js | 1 + assets/js/11.d26994b0.js | 1 + assets/js/12.ce5c7b13.js | 1 + assets/js/13.ef529820.js | 1 + assets/js/14.6f977816.js | 1 + assets/js/15.c5df7d85.js | 1 + assets/js/16.65c98bce.js | 1 + assets/js/17.c40a3174.js | 1 + assets/js/18.800c38cb.js | 1 + assets/js/19.f25e213e.js | 1 + assets/js/2.6307267c.js | 1 + assets/js/20.7d9d9bba.js | 1 + assets/js/21.bd95e2eb.js | 1 + assets/js/22.76fb7a36.js | 1 + assets/js/23.78943b5d.js | 1 + assets/js/24.74209dcc.js | 1 + assets/js/25.19488045.js | 1 + assets/js/26.1ed7942f.js | 1 + assets/js/27.3353b951.js | 1 + assets/js/28.3584b2aa.js | 1 + assets/js/29.9ad131f3.js | 1 + assets/js/3.d86befc6.js | 1 + assets/js/30.8ded7976.js | 1 + assets/js/31.df024f28.js | 1 + assets/js/32.82bc72ca.js | 1 + assets/js/33.660aee85.js | 1 + assets/js/34.7ac76657.js | 1 + assets/js/35.60716dc1.js | 1 + assets/js/36.366b7eab.js | 1 + assets/js/37.f4fcca7f.js | 1 + assets/js/38.ea3048e5.js | 1 + assets/js/39.1b60c47b.js | 1 + assets/js/4.6beafeae.js | 7 + assets/js/40.ea7320be.js | 1 + assets/js/41.a7298f34.js | 1 + assets/js/42.ff58af00.js | 1 + assets/js/43.f292a86b.js | 1 + assets/js/44.a6b1ba12.js | 1 + assets/js/45.7739aa38.js | 1 + assets/js/46.0b939b46.js | 1 + assets/js/47.89e49898.js | 1 + assets/js/48.b889300e.js | 1 + assets/js/49.695e87b4.js | 1 + assets/js/5.e0528640.js | 1 + assets/js/50.f33ee15d.js | 1 + assets/js/51.bb8974c7.js | 1 + assets/js/52.66c26c9c.js | 1 + assets/js/53.31d5f521.js | 1 + assets/js/54.506748b6.js | 1 + assets/js/55.cc49e568.js | 1 + assets/js/56.207b648c.js | 1 + assets/js/57.eefc7d7a.js | 1 + assets/js/58.8ac8cd6e.js | 1 + assets/js/59.652a8ae8.js | 1 + assets/js/6.67de8626.js | 1 + assets/js/60.81079eb8.js | 1 + assets/js/61.8867d874.js | 1 + assets/js/62.388ee59a.js | 1 + assets/js/63.730d492c.js | 1 + assets/js/64.6380859c.js | 1 + assets/js/65.c2329ef7.js | 1 + assets/js/66.5d5f1029.js | 1 + assets/js/67.718c666c.js | 1 + assets/js/68.1368f4de.js | 1 + assets/js/69.93f22579.js | 1 + assets/js/7.695a0b02.js | 1 + assets/js/70.12dacca3.js | 1 + assets/js/71.ce6c1b35.js | 1 + assets/js/72.2336ec2a.js | 1 + assets/js/73.3edeb403.js | 1 + assets/js/74.33c8233f.js | 1 + assets/js/75.a3473f9d.js | 1 + assets/js/76.6c72313b.js | 1 + assets/js/77.40fcd889.js | 1 + assets/js/78.cc3f5f2a.js | 1 + assets/js/79.f31b0c4c.js | 1 + assets/js/8.6b33f1e1.js | 1 + assets/js/80.e2cf8118.js | 1 + assets/js/81.dff5333b.js | 1 + assets/js/82.9b1f1042.js | 1 + assets/js/83.308b14b3.js | 1 + assets/js/84.37fb7201.js | 1 + assets/js/9.1f21a175.js | 1 + assets/js/app.44d7034a.js | 13 + guide/component.html | 202 ++++++++++++++++ guide/datetime.html | 155 ++++++++++++ guide/directive.html | 182 ++++++++++++++ guide/fallback.html | 156 ++++++++++++ guide/formatting.html | 204 ++++++++++++++++ guide/hot-reload.html | 189 +++++++++++++++ guide/interpolation.html | 255 ++++++++++++++++++++ guide/lazy-loading.html | 164 +++++++++++++ guide/locale.html | 139 +++++++++++ guide/messages.html | 236 ++++++++++++++++++ guide/number.html | 174 ++++++++++++++ guide/pluralization.html | 205 ++++++++++++++++ guide/sfc.html | 394 +++++++++++++++++++++++++++++++ guide/tooling.html | 103 ++++++++ index.html | 109 +++++++++ installation.html | 122 ++++++++++ introduction.html | 103 ++++++++ patrons/RapidAPI.png | Bin 0 -> 62713 bytes patrons/RapidAPI.svg | 28 +++ patrons/babeledit.png | Bin 0 -> 6976 bytes patrons/babeledit.svg | 1 + patrons/crowdin.png | Bin 0 -> 7121 bytes patrons/crowdin.svg | 11 + patrons/cypress.svg | 22 ++ patrons/decibel.png | Bin 0 -> 54069 bytes patrons/localazy.svg | 12 + patrons/locize.png | Bin 0 -> 2601 bytes patrons/nuxt.png | Bin 0 -> 5527 bytes patrons/plaid.svg | 1 + patrons/sendcloud.png | Bin 0 -> 38600 bytes patrons/sendcloud.svg | 5 + patrons/storyblok.svg | 18 ++ patrons/vuemastery.png | Bin 0 -> 42675 bytes patrons/vuemastery.svg | 36 +++ patrons/zenarchitects.png | Bin 0 -> 21948 bytes pt/api/index.html | 179 ++++++++++++++ pt/guide/component.html | 195 +++++++++++++++ pt/guide/datetime.html | 147 ++++++++++++ pt/guide/directive.html | 173 ++++++++++++++ pt/guide/fallback.html | 146 ++++++++++++ pt/guide/formatting.html | 221 +++++++++++++++++ pt/guide/hot-reload.html | 181 ++++++++++++++ pt/guide/interpolation.html | 249 +++++++++++++++++++ pt/guide/lazy-loading.html | 156 ++++++++++++ pt/guide/locale.html | 130 ++++++++++ pt/guide/messages.html | 255 ++++++++++++++++++++ pt/guide/number.html | 166 +++++++++++++ pt/guide/pluralization.html | 203 ++++++++++++++++ pt/guide/sfc.html | 387 ++++++++++++++++++++++++++++++ pt/guide/tooling.html | 95 ++++++++ pt/index.html | 101 ++++++++ pt/installation.html | 114 +++++++++ pt/introduction.html | 97 ++++++++ pt/started.html | 141 +++++++++++ ru/api/index.html | 177 ++++++++++++++ ru/guide/component.html | 195 +++++++++++++++ ru/guide/datetime.html | 147 ++++++++++++ ru/guide/directive.html | 173 ++++++++++++++ ru/guide/fallback.html | 146 ++++++++++++ ru/guide/formatting.html | 221 +++++++++++++++++ ru/guide/hot-reload.html | 181 ++++++++++++++ ru/guide/interpolation.html | 249 +++++++++++++++++++ ru/guide/lazy-loading.html | 156 ++++++++++++ ru/guide/locale.html | 130 ++++++++++ ru/guide/messages.html | 254 ++++++++++++++++++++ ru/guide/number.html | 166 +++++++++++++ ru/guide/pluralization.html | 203 ++++++++++++++++ ru/guide/sfc.html | 387 ++++++++++++++++++++++++++++++ ru/guide/tooling.html | 95 ++++++++ ru/index.html | 101 ++++++++ ru/installation.html | 114 +++++++++ ru/introduction.html | 95 ++++++++ ru/started.html | 140 +++++++++++ started.html | 148 ++++++++++++ vue-i18n-logo.png | Bin 0 -> 15042 bytes zh/api/index.html | 138 +++++++++++ zh/guide/component.html | 190 +++++++++++++++ zh/guide/datetime.html | 143 +++++++++++ zh/guide/directive.html | 169 +++++++++++++ zh/guide/fallback.html | 134 +++++++++++ zh/guide/formatting.html | 192 +++++++++++++++ zh/guide/hot-reload.html | 178 ++++++++++++++ zh/guide/interpolation.html | 191 +++++++++++++++ zh/guide/lazy-loading.html | 152 ++++++++++++ zh/guide/locale.html | 127 ++++++++++ zh/guide/messages.html | 223 +++++++++++++++++ zh/guide/number.html | 152 ++++++++++++ zh/guide/pluralization.html | 191 +++++++++++++++ zh/guide/sfc.html | 379 +++++++++++++++++++++++++++++ zh/guide/tooling.html | 92 ++++++++ zh/index.html | 97 ++++++++ zh/installation.html | 109 +++++++++ zh/introduction.html | 91 +++++++ zh/started.html | 135 +++++++++++ 182 files changed, 13434 insertions(+) create mode 100644 404.html create mode 100644 api/index.html create mode 100644 assets/css/0.styles.dc7beab8.css create mode 100644 assets/img/search.83621669.svg create mode 100644 assets/js/10.7a43b4a8.js create mode 100644 assets/js/11.d26994b0.js create mode 100644 assets/js/12.ce5c7b13.js create mode 100644 assets/js/13.ef529820.js create mode 100644 assets/js/14.6f977816.js create mode 100644 assets/js/15.c5df7d85.js create mode 100644 assets/js/16.65c98bce.js create mode 100644 assets/js/17.c40a3174.js create mode 100644 assets/js/18.800c38cb.js create mode 100644 assets/js/19.f25e213e.js create mode 100644 assets/js/2.6307267c.js create mode 100644 assets/js/20.7d9d9bba.js create mode 100644 assets/js/21.bd95e2eb.js create mode 100644 assets/js/22.76fb7a36.js create mode 100644 assets/js/23.78943b5d.js create mode 100644 assets/js/24.74209dcc.js create mode 100644 assets/js/25.19488045.js create mode 100644 assets/js/26.1ed7942f.js create mode 100644 assets/js/27.3353b951.js create mode 100644 assets/js/28.3584b2aa.js create mode 100644 assets/js/29.9ad131f3.js create mode 100644 assets/js/3.d86befc6.js create mode 100644 assets/js/30.8ded7976.js create mode 100644 assets/js/31.df024f28.js create mode 100644 assets/js/32.82bc72ca.js create mode 100644 assets/js/33.660aee85.js create mode 100644 assets/js/34.7ac76657.js create mode 100644 assets/js/35.60716dc1.js create mode 100644 assets/js/36.366b7eab.js create mode 100644 assets/js/37.f4fcca7f.js create mode 100644 assets/js/38.ea3048e5.js create mode 100644 assets/js/39.1b60c47b.js create mode 100644 assets/js/4.6beafeae.js create mode 100644 assets/js/40.ea7320be.js create mode 100644 assets/js/41.a7298f34.js create mode 100644 assets/js/42.ff58af00.js create mode 100644 assets/js/43.f292a86b.js create mode 100644 assets/js/44.a6b1ba12.js create mode 100644 assets/js/45.7739aa38.js create mode 100644 assets/js/46.0b939b46.js create mode 100644 assets/js/47.89e49898.js create mode 100644 assets/js/48.b889300e.js create mode 100644 assets/js/49.695e87b4.js create mode 100644 assets/js/5.e0528640.js create mode 100644 assets/js/50.f33ee15d.js create mode 100644 assets/js/51.bb8974c7.js create mode 100644 assets/js/52.66c26c9c.js create mode 100644 assets/js/53.31d5f521.js create mode 100644 assets/js/54.506748b6.js create mode 100644 assets/js/55.cc49e568.js create mode 100644 assets/js/56.207b648c.js create mode 100644 assets/js/57.eefc7d7a.js create mode 100644 assets/js/58.8ac8cd6e.js create mode 100644 assets/js/59.652a8ae8.js create mode 100644 assets/js/6.67de8626.js create mode 100644 assets/js/60.81079eb8.js create mode 100644 assets/js/61.8867d874.js create mode 100644 assets/js/62.388ee59a.js create mode 100644 assets/js/63.730d492c.js create mode 100644 assets/js/64.6380859c.js create mode 100644 assets/js/65.c2329ef7.js create mode 100644 assets/js/66.5d5f1029.js create mode 100644 assets/js/67.718c666c.js create mode 100644 assets/js/68.1368f4de.js create mode 100644 assets/js/69.93f22579.js create mode 100644 assets/js/7.695a0b02.js create mode 100644 assets/js/70.12dacca3.js create mode 100644 assets/js/71.ce6c1b35.js create mode 100644 assets/js/72.2336ec2a.js create mode 100644 assets/js/73.3edeb403.js create mode 100644 assets/js/74.33c8233f.js create mode 100644 assets/js/75.a3473f9d.js create mode 100644 assets/js/76.6c72313b.js create mode 100644 assets/js/77.40fcd889.js create mode 100644 assets/js/78.cc3f5f2a.js create mode 100644 assets/js/79.f31b0c4c.js create mode 100644 assets/js/8.6b33f1e1.js create mode 100644 assets/js/80.e2cf8118.js create mode 100644 assets/js/81.dff5333b.js create mode 100644 assets/js/82.9b1f1042.js create mode 100644 assets/js/83.308b14b3.js create mode 100644 assets/js/84.37fb7201.js create mode 100644 assets/js/9.1f21a175.js create mode 100644 assets/js/app.44d7034a.js create mode 100644 guide/component.html create mode 100644 guide/datetime.html create mode 100644 guide/directive.html create mode 100644 guide/fallback.html create mode 100644 guide/formatting.html create mode 100644 guide/hot-reload.html create mode 100644 guide/interpolation.html create mode 100644 guide/lazy-loading.html create mode 100644 guide/locale.html create mode 100644 guide/messages.html create mode 100644 guide/number.html create mode 100644 guide/pluralization.html create mode 100644 guide/sfc.html create mode 100644 guide/tooling.html create mode 100644 index.html create mode 100644 installation.html create mode 100644 introduction.html create mode 100644 patrons/RapidAPI.png create mode 100644 patrons/RapidAPI.svg create mode 100644 patrons/babeledit.png create mode 100644 patrons/babeledit.svg create mode 100644 patrons/crowdin.png create mode 100644 patrons/crowdin.svg create mode 100644 patrons/cypress.svg create mode 100644 patrons/decibel.png create mode 100644 patrons/localazy.svg create mode 100644 patrons/locize.png create mode 100644 patrons/nuxt.png create mode 100644 patrons/plaid.svg create mode 100644 patrons/sendcloud.png create mode 100644 patrons/sendcloud.svg create mode 100644 patrons/storyblok.svg create mode 100644 patrons/vuemastery.png create mode 100644 patrons/vuemastery.svg create mode 100644 patrons/zenarchitects.png create mode 100644 pt/api/index.html create mode 100644 pt/guide/component.html create mode 100644 pt/guide/datetime.html create mode 100644 pt/guide/directive.html create mode 100644 pt/guide/fallback.html create mode 100644 pt/guide/formatting.html create mode 100644 pt/guide/hot-reload.html create mode 100644 pt/guide/interpolation.html create mode 100644 pt/guide/lazy-loading.html create mode 100644 pt/guide/locale.html create mode 100644 pt/guide/messages.html create mode 100644 pt/guide/number.html create mode 100644 pt/guide/pluralization.html create mode 100644 pt/guide/sfc.html create mode 100644 pt/guide/tooling.html create mode 100644 pt/index.html create mode 100644 pt/installation.html create mode 100644 pt/introduction.html create mode 100644 pt/started.html create mode 100644 ru/api/index.html create mode 100644 ru/guide/component.html create mode 100644 ru/guide/datetime.html create mode 100644 ru/guide/directive.html create mode 100644 ru/guide/fallback.html create mode 100644 ru/guide/formatting.html create mode 100644 ru/guide/hot-reload.html create mode 100644 ru/guide/interpolation.html create mode 100644 ru/guide/lazy-loading.html create mode 100644 ru/guide/locale.html create mode 100644 ru/guide/messages.html create mode 100644 ru/guide/number.html create mode 100644 ru/guide/pluralization.html create mode 100644 ru/guide/sfc.html create mode 100644 ru/guide/tooling.html create mode 100644 ru/index.html create mode 100644 ru/installation.html create mode 100644 ru/introduction.html create mode 100644 ru/started.html create mode 100644 started.html create mode 100644 vue-i18n-logo.png create mode 100644 zh/api/index.html create mode 100644 zh/guide/component.html create mode 100644 zh/guide/datetime.html create mode 100644 zh/guide/directive.html create mode 100644 zh/guide/fallback.html create mode 100644 zh/guide/formatting.html create mode 100644 zh/guide/hot-reload.html create mode 100644 zh/guide/interpolation.html create mode 100644 zh/guide/lazy-loading.html create mode 100644 zh/guide/locale.html create mode 100644 zh/guide/messages.html create mode 100644 zh/guide/number.html create mode 100644 zh/guide/pluralization.html create mode 100644 zh/guide/sfc.html create mode 100644 zh/guide/tooling.html create mode 100644 zh/index.html create mode 100644 zh/installation.html create mode 100644 zh/introduction.html create mode 100644 zh/started.html diff --git a/404.html b/404.html new file mode 100644 index 000000000..6d157c84c --- /dev/null +++ b/404.html @@ -0,0 +1,21 @@ + + + + + + Vue I18n + + + + + + + + + +

404

That's a Four-Oh-Four.
+ Take me home. +
+ + + diff --git a/api/index.html b/api/index.html new file mode 100644 index 000000000..af9aa464c --- /dev/null +++ b/api/index.html @@ -0,0 +1,186 @@ + + + + + + API references | Vue I18n + + + + + + + + + +
Vue I18n

# API references

# Extension of Vue

# Vue constructor options

# i18n

  • Type: I18nOptions

Component based localization option.

  • See also: VueI18n class constructor options

# Vue injected methods

# $t

  • Arguments:

    • {Path} key: required
    • {Locale} locale: optional
    • {Array | Object} values: optional

  • Return: TranslateResult

Localize the locale message of key. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified locale, localize the locale messages of locale. If you specified key of list / named formatting local messages, you must specify values too. For values more details see Formatting.

If default pluralization does not suit your needs, see pluralization rules in constructor options and custom pluralization.

Tip

Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in data options, const $t = this.$t.bind(this)).

# $tc

  • Arguments:

    • {Path} key: required
    • {number} choice: optional, default 1
    • {Locale} locale: optional
    • {string | Array | Object} values: optional

  • Return: TranslateResult

Localize the locale message of key with pluralization. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified locale, localize the locale messages of locale. If you will specify string value to values, localize the locale messages of value. If you will specify Array or Object value to values, you must specify with values of $t.

Tip

Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in data options, const $tc = this.$tc.bind(this)).

# $te

  • Arguments:

    • {Path} key: required
    • {Locale} locale: optional

  • Return: boolean

Check whether key exists. In Vue instance, If not specified component locale messages, check with global locale messages. If you specified locale, check the locale messages of locale.

Tip

Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in data options, const $te = this.$te.bind(this)).

# $d

🆕 7.0+

  • Arguments:

    • {number | Date} value: required
    • {Path | Object} key: optional
    • {Locale | Object} locale: optional

  • Return: DateTimeFormatResult

Localize the datetime of value with datetime format of key. The datetime format of key need to register to dateTimeFormats option of VueI18n class, and depend on locale option of VueI18n constructor. If you will specify locale argument, it will have priority over locale option of VueI18n constructor.

If the datetime format of key not exist in dateTimeFormats option, fallback to depend on fallbackLocale option of VueI18n constructor.

Tip

Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in data options, const $d = this.$d.bind(this)).

# $n

🆕 7.0+

  • Arguments:

    • {number} value: required
    • {Path | Object} format: optional
    • {Locale} locale: optional

  • Return: NumberFormatResult

Localize the number of value with number format of format. The number format of format need to register to numberFormats option of VueI18n class, and depend on locale option of VueI18n constructor. If you will specify locale argument, it will have priority over locale option of VueI18n constructor.

If the number format of format not exist in numberFormats option, fallback to depend on fallbackLocale option of VueI18n constructor.

If the second format argument specified as an object, it should have the following properties:

  • key {Path}: optional, number format
  • locale {Locale}: optional, locale
  • compactDisplay {string}: optional, number format option
  • currency {string}: optional, number format option
  • currencyDisplay {string}: optional, number format option
  • currencySign {string}: optional, number format option
  • localeMatcher {string}: optional, number format option
  • notation {string}: optional, number format option
  • numberingSystem {string}: optional, number format option
  • signDisplay {string}: optional, number format option
  • style {string}: optional, number format option
  • unit {string}: optional, number format option
  • unitDisplay {string}: optional, number format option
  • useGrouping {boolean}: optional, number format option
  • minimumIntegerDigits {string}: optional, number format option
  • minimumFractionDigits {string}: optional, number format option
  • maximumFractionDigits {string}: optional, number format option
  • minimumSignificantDigits {string}: optional, number format option
  • maximumSignificantDigits {string}: optional, number format option

Any specified number format options will have priority over numberFormats of VueI18n constructor.

Tip

Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in data options, const $n = this.$n.bind(this)).

# Injected properties

# $i18n

  • Type: I18n

  • Read only

Get a VueI18n instance. If you are specify.

If you have specified an i18n option at component options, you will be able to get a VueI18n instance at the component, Otherwise, you will be able get root VueI18n instance.

# VueI18n class

VueI18n class implement I18n interface of flowtype definitions (opens new window)

# Static properties

# version

  • Type: string

vue-i18n version.

# availabilities

🆕 7.0+

  • Type: IntlAvailability

Whether the following internationalization features are available:

  • {boolean} dateTimeFormat: locale sensitive datetime formatting

  • {boolean} numberFormat: locale sensitive number formatting

The above internationalization features are depends on the browser environments (opens new window), due to implement with ECMAScript Internationalization API (ECMA-402).

# Constructor options

You can specify the below some options of I18nOptions constructor options of flowtype definitions (opens new window)

# locale

  • Type: Locale

  • Default: 'en-US'

The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.

# fallbackLocale

  • Type: FallbackLocale

  • Default: false

The locale of fallback localization. For more complex fallback definitions see fallback.

# messages

  • Type: LocaleMessages

  • Default: {}

The locale messages of localization.

# dateTimeFormats

🆕 7.0+

  • Type: DateTimeFormats

  • Default: {}

The datetime formats of localization.

# numberFormats

🆕 7.0+

  • Type: NumberFormats

  • Default: {}

The number formats of localization.

# formatter

  • Type: Formatter

  • Default: Built in formatter

The formatter that implemented with Formatter interface.

# modifiers

🆕 8.15.0+

  • Type: Modifiers

  • Default: lower and upper modifiers

Modifiers functions for linked messages

# missing

  • Type: MissingHandler

  • Default: null

A handler for localization missing. The handler gets called with the localization target locale, localization path key, the Vue instance and values.

If missing handler is assigned, and occurred localization missing, it's not warned.

# fallbackRoot

  • Type: Boolean

  • Default: true

In the component localization, whether to fall back to root level (global) localization when localization fails.

If false, it's warned, and is returned the key.

# fallbackRootWithEmptyString

🆕 8.26+

  • Type: Boolean

  • Default: true

    In the component localization, whether to fall back to root level (global) localization when local message is an empty string.

    Please note the default behavior in vue-i18n 9.x is to not falling back to root for local message that is empty string.

    If false, the empty local message will not fall back to root and will be kept as empty string.

# sync

  • Type: Boolean

  • Default: true

Whether synchronize the root level locale to the component localization locale.

If false, regardless of the root level locale, localize for each component locale.

# silentTranslationWarn

6.1+, 🆙 8.13

  • Type: Boolean | RegExp

  • Default: false

Whether suppress warnings outputted when localization fails.

If true, suppress localization fail warnings. +If you use regular expression, you can suppress localization fail warnings that it match with translation key (e.g. $t).

# silentFallbackWarn

🆕 8.8+, 🆙 8.13

  • Type: Boolean | RegExp
  • Default: false

Whether suppress warnings when falling back to either fallbackLocale or root.

If true, warnings will be generated only when no translation is available at all, and not for fallbacks. +If you use regular expression, you can suppress the fallback warnings that it match key (e.g. $t).

# pluralizationRules

8.5+

  • Type: PluralizationRules

  • Default: {}

A set of rules for word pluralization in a following format:

  {
+    // Key - locale for the rule to be applied to.
+    // Value - mapping function that maps a choice index from `$tc` to the actual choice of the plural word. (See getChoiceIndex for details)
+    'pt': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'ru': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'en': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'jp': function(choice, choiceIndex) => Number/* index of the plural word */;
+  }
+

# preserveDirectiveContent

8.7+

  • Type: Boolean

  • Default: false

Whether v-t directive's element should preserve textContent after directive is unbinded.

# warnHtmlInMessage

8.11+

  • Type: WarnHtmlInMessageLevel

  • Default: off

Whether to allow the use locale messages of HTML formatting. See the warnHtmlInMessage property.

Important!!

In next major version, warnHtmlInMessage option is warn as default.

# sharedMessages

8.12+

  • Type: LocaleMessages

  • Default: undefined

The shared locale messages of localization for components. More detail see Component based localization.

# postTranslation

8.16+

  • Type: PostTranslationHandler

  • Default: null

A handler for post processing of translation. The handler gets after being called with the $t, t, $tc, and tc.

This handler is useful if you want to filter on translated text such as space trimming.

# componentInstanceCreatedListener

8.18+

  • Type: ComponentInstanceCreatedListener

  • Default: null

A handler for getting notified when component-local instance was created. The handler gets called with new and old (root) VueI18n instances.

This handler is useful when extending the root VueI18n instance and wanting to also apply those extensions to component-local instance.

# escapeParameterHtml

8.22+

  • Type: Boolean

  • Default: false

If escapeParameterHtml is configured as true then interpolation parameters are escaped before the message is translated. +This is useful when translation output is used in v-html and the translation resource contains html markup (e.g. <b> +around a user provided value). This usage pattern mostly occurs when passing precomputed text strings into UI compontents.

The escape process involves replacing the following symbols with their respective HTML character entities: <, >, ", '.

Setting escapeParameterHtml as true should not break existing functionality but provides a safeguard against a subtle +type of XSS attack vectors.

# Properties

# locale

  • Type: Locale

  • Read/Write

The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.

# fallbackLocale

  • Type: FallbackLocale

  • Read/Write

The locale of fallback localization. For more complex fallback definitions see fallback.

# messages

  • Type: LocaleMessages

  • Read only

The locale messages of localization.

# dateTimeFormats

🆕 7.0+

  • Type: DateTimeFormats

  • Read only

The datetime formats of localization.

# numberFormats

🆕 7.0+

  • Type: NumberFormats

  • Read only

The number formats of localization.

# availableLocales

🆕 8.9.0+

  • Type: Locale[]

  • Read only

The list of available locales in messages in lexical order.

# missing

  • Type: MissingHandler

  • Read/Write

A handler for localization missing.

# formatter

  • Type: Formatter

  • Read/Write

The formatter that implemented with Formatter interface.

# silentTranslationWarn

6.1+, 🆙 8.13

  • Type: Boolean | RegExp

  • Read/Write

Whether suppress warnings outputted when localization fails.

# silentFallbackWarn

🆕 8.8+, 🆙 8.13

  • Type: Boolean | RegExp

  • Read/Write

Whether suppress fallback warnings when localization fails.

# pluralizationRules

8.5+

  • Type: PluralizationRules

  • Read/Write

A set of locale-dependent rules for word pluralization.

# preserveDirectiveContent

8.7+

  • Type: Boolean

  • Read/Write

Whether v-t directive's element should preserve textContent after directive is unbinded.

# warnHtmlInMessage

8.11+

  • Type: WarnHtmlInMessageLevel

  • Read/Write

Whether to allow the use locale messages of HTML formatting.

If you set warn orerror, will check the locale messages on the VueI18n instance.

If you are specified warn, a warning will be output at console.

If you are specified error will occurred an Error.

In VueI18n instance, set the off as default.

# postTranslation

8.16+

  • Type: PostTranslationHandler

  • Read/Write

A handler for post processing of translation.

# Methods

# getChoiceIndex

  • Arguments:

    • {number} choice
    • {number} choicesLength

  • Return: finalChoice {number}

Get pluralization index for current pluralizing number and a given amount of choices. +Can be overridden through prototype mutation:

VueI18n.prototype.getChoiceIndex = /* custom implementation */
+

However, for most usages pluralizationRules constructor option should be enough.

# getLocaleMessage( locale )

  • Arguments:

    • {Locale} locale

  • Return: LocaleMessageObject

Get the locale message of locale.

# setLocaleMessage( locale, message )

  • Arguments:

    • {Locale} locale
    • {LocaleMessageObject} message

Set the locale message of locale.

NOTE

8.11+

If you set warn orerror in the warnHtmlInMessage property, when this method is executed, it will check if HTML formatting is used for locale message.

# mergeLocaleMessage( locale, message )

6.1+

  • Arguments:

    • {Locale} locale
    • {LocaleMessageObject} message

Merge the registered locale messages with the locale message of locale.

NOTE

8.11+

If you set warn orerror in the warnHtmlInMessage property, when this method is executed, it will check if HTML formatting is used for locale message.

# t( key, [locale], [values] )

  • Arguments:

    • {Path} key: required
    • {Locale} locale: optional
    • {Array | Object} values: optional

  • Return: : TranslateResult

This is the same as the Function returned with $t method. More detail see $t.

# tc( key, [choice], [values] )

  • Arguments:

    • {Path} key: required
    • {number} choice: optional, default 1
    • {string | Array | Object} values: optional

  • Return: TranslateResult

This is the same as the Function returned $tc method. More detail see $tc.

# te( key, [locale] )

  • Arguments:

    • {string} key: required
    • {Locale} locale: optional

  • Return: boolean

Check whether key path exists in global locale message. If you specified locale, check the locale message of locale.

# getDateTimeFormat ( locale )

🆕 7.0+

  • Arguments:

    • {Locale} locale

  • Return: DateTimeFormat

Get the datetime format of locale.

# setDateTimeFormat ( locale, format )

🆕 7.0+

  • Arguments:

    • {Locale} locale
    • {DateTimeFormat} format

Set the datetime format of locale.

# mergeDateTimeFormat ( locale, format )

🆕 7.0+

  • Arguments:

    • {Locale} locale
    • {DateTimeFormat} format

Merge the registered datetime formats with the datetime format of locale.

# d( value, [key], [locale] )

🆕 7.0+

  • Arguments:

    • {number | Date} value: required
    • {Path | Object} key: optional
    • {Locale | Object} locale: optional

  • Return: DateTimeFormatResult

This is the same as $d method of Vue instance method. More detail see $d.

# getNumberFormat ( locale )

🆕 7.0+

  • Arguments:

    • {Locale} locale

  • Return: NumberFormat

Get the number format of locale.

# setNumberFormat ( locale, format )

🆕 7.0+

  • Arguments:

    • {Locale} locale
    • {NumberFormat} format

Set the number format of locale.

# mergeNumberFormat ( locale, format )

🆕 7.0+

  • Arguments:

    • {Locale} locale
    • {NumberFormat} format

Merge the registered number formats with the number format of locale.

# n( value, [format], [locale] )

🆕 7.0+

  • Arguments:

    • {number} value: required
    • {Path | Object} format: optional
    • {Locale} locale: optional

  • Return: NumberFormatResult

This is the same as $n method of Vue instance method. More detail see $n.

# Directives

🆕 7.3+

# v-t

  • Expects: string | Object

  • Modifiers:

    • .preserve: (8.7.0+) preserves element textContent when directive is unbinded.

  • Details:

Update the element textContent that localized with locale messages. You can use string syntax or object syntax. string syntax can be specified as a keypath of locale messages. If you can be used object syntax, you need to specify as the object key the following params:

  • path: required, key of locale messages
  • locale: optional, locale
  • args: optional, for list or named formatting

NOTE

The element textContent will be cleared by default when v-t directive is unbinded. This might be undesirable situation when used inside transitions (opens new window). To preserve textContent data after directive unbind use .preserve modifier or global preserveDirectiveContent option.

  • Examples:
<!-- string syntax: literal -->
+<p v-t="'foo.bar'"></p>
+
+<!-- string syntax: binding via data or computed props -->
+<p v-t="msg"></p>
+
+<!-- object syntax: literal -->
+<p v-t="{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }"></p>
+
+<!-- object syntax: binding via data or computed props -->
+<p v-t="{ path: greeting, args: { name: fullName } }"></p>
+
+<!-- with preserve modifier -->
+<p v-t.preserve="'foo.bar'"></p>
+

# Components

# i18n functional component

🆕 7.0+

# Props:

  • path {Path}: required, keypath of locale messages
  • locale {Locale}: optional, locale
  • tag {string | boolean | Object}: optional, default 'span'
  • places {Array | Object}: optional (7.2+)

Important!!

In next major version, places prop is deprecated. Please switch to slots syntax.

# Usage:

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ja: {
+    tos: '利用規約',
+    term: '私は xxx の{0}に同意します。'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

# See also:

Component interpolation

# i18n-n functional component

🆕 8.10+

# Props:

  • value {number}: required, number to format
  • format {string | NumberFormatOptions}: optional, number format name or object with explicit format options
  • locale {Locale}: optional, locale
  • tag {string | boolean | Object}: optional, default 'span'

# Usage:

<div id="app">
+  <!-- ... -->
+  <i18n-n :value="money" format="currency" tag="label">
+    <span v-slot:currency="slotProps" class="font-weight: bold">{{ slotProps.currency }}<span>
+  </i18n-n>
+  <!-- ... -->
+</div>
+
var numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency', currency: 'USD'
+    }
+  },
+  'ja-JP': {
+    currency: {
+      style: 'currency', currency: 'JPY'
+    }
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en-US',
+  numberFormats
+})
+new Vue({
+  i18n,
+  data: {
+    money: 10234,
+  }
+}).$mount('#app')
+

# Scoped slots

<i18n-n> functional component can accept a number of named scoped slots. List of supported slot names is based on Intl.NumberFormat.formatToParts() output types (opens new window):

  • currency
  • decimal
  • fraction
  • group
  • infinity
  • integer
  • literal
  • minusSign
  • nan
  • plusSign
  • percentSign

Each of these named scoped slots will accept three scope parameters:

  • [slotName] {FormattedNumberPartType}: parameter of the same name as actual slot name (like integer)
  • index {Number}: index of the specific part in the array of number parts
  • parts {Array}: array of all formatted number parts

# See also:

Number custom formatting

# Special Attributes

# place

🆕 7.2+

# Expects: {number | string}

Used on component interpolation to indicate which index of list formatting or key of named formatting.

For detailed usage, see the guide section linked below.

# See also:

Component interpolation

+ + + diff --git a/assets/css/0.styles.dc7beab8.css b/assets/css/0.styles.dc7beab8.css new file mode 100644 index 000000000..a1af4cb74 --- /dev/null +++ b/assets/css/0.styles.dc7beab8.css @@ -0,0 +1 @@ +code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}.theme-default-content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.theme-default-content code .token.deleted{color:#ec5975}.theme-default-content code .token.inserted{color:#3eaf7c}.theme-default-content pre,.theme-default-content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.theme-default-content pre[class*=language-] code,.theme-default-content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;-webkit-user-select:none;user-select:none;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-docker]:before{content:"docker"}div[class~=language-dockerfile]:before{content:"dockerfile"}div[class~=language-makefile]:before{content:"makefile"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}div[class~=language-php]:before{content:"php"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.custom-block.details{display:block;position:relative;border-radius:2px;margin:1.6em 0;padding:1.6em;background-color:#eee}.custom-block.details h4{margin-top:0}.custom-block.details figure:last-child,.custom-block.details p:last-child{margin-bottom:0;padding-bottom:0}.custom-block.details summary{outline:none;cursor:pointer}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.theme-default-content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.theme-default-content:not(.custom){padding:2rem}}@media (max-width:419px){.theme-default-content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0;background-color:#fff}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:16px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.theme-default-content:not(.custom)>:first-child{margin-top:3.6rem}.theme-default-content:not(.custom) a:hover{text-decoration:underline}.theme-default-content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.theme-default-content:not(.custom) img{max-width:100%}.theme-default-content.custom{padding:0;margin:0}.theme-default-content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1rem;color:#999;border-left:.2rem solid #dfe2e5;margin:1rem 0;padding:.25rem 0 .25rem 1rem}blockquote>p{margin:0}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.theme-default-content:not(.custom)>h1,.theme-default-content:not(.custom)>h2,.theme-default-content:not(.custom)>h3,.theme-default-content:not(.custom)>h4,.theme-default-content:not(.custom)>h5,.theme-default-content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.theme-default-content:not(.custom)>h1:first-child,.theme-default-content:not(.custom)>h2:first-child,.theme-default-content:not(.custom)>h3:first-child,.theme-default-content:not(.custom)>h4:first-child,.theme-default-content:not(.custom)>h5:first-child,.theme-default-content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.theme-default-content:not(.custom)>h1:first-child+.custom-block,.theme-default-content:not(.custom)>h1:first-child+p,.theme-default-content:not(.custom)>h1:first-child+pre,.theme-default-content:not(.custom)>h2:first-child+.custom-block,.theme-default-content:not(.custom)>h2:first-child+p,.theme-default-content:not(.custom)>h2:first-child+pre,.theme-default-content:not(.custom)>h3:first-child+.custom-block,.theme-default-content:not(.custom)>h3:first-child+p,.theme-default-content:not(.custom)>h3:first-child+pre,.theme-default-content:not(.custom)>h4:first-child+.custom-block,.theme-default-content:not(.custom)>h4:first-child+p,.theme-default-content:not(.custom)>h4:first-child+pre,.theme-default-content:not(.custom)>h5:first-child+.custom-block,.theme-default-content:not(.custom)>h5:first-child+p,.theme-default-content:not(.custom)>h5:first-child+pre,.theme-default-content:not(.custom)>h6:first-child+.custom-block,.theme-default-content:not(.custom)>h6:first-child+p,.theme-default-content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:focus .header-anchor,h1:hover .header-anchor,h2:focus .header-anchor,h2:hover .header-anchor,h3:focus .header-anchor,h3:hover .header-anchor,h4:focus .header-anchor,h4:hover .header-anchor,h5:focus .header-anchor,h5:hover .header-anchor,h6:focus .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:focus,a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .theme-default-content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.theme-default-content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border-color:#3eaf7c transparent transparent #3eaf7c;border-style:solid;border-width:2px;border-radius:50%;-webkit-animation:nprogress-spinner .4s linear infinite;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@-webkit-keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.icon.outbound{color:#aaa;display:inline-block;vertical-align:middle;position:relative;top:-1px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media screen and (max-width:1300px){.content__default:before{content:"";position:relative;display:block;padding:0 0 20px 30px;margin-top:20px;margin-right:-24px}}img{max-width:100%}.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto;display:block}.home .hero{text-align:center}.home .hero img{max-width:100%;max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;height:2rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/vue-i18n/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:2rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (-ms-high-contrast:none){.search-box input{height:2rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.sidebar-button{cursor:pointer;display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title,.dropdown-wrapper .mobile-dropdown-title{display:block;font-size:.9rem;font-family:inherit;cursor:inherit;padding:inherit;line-height:1.4rem;background:transparent;border:none;font-weight:500;color:#2c3e50}.dropdown-wrapper .dropdown-title:hover,.dropdown-wrapper .mobile-dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow,.dropdown-wrapper .mobile-dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .mobile-dropdown-title{display:none;font-weight:600}.dropdown-wrapper .mobile-dropdown-title font-size inherit:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:1rem 1.5rem .45rem 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .dropdown-title{display:none}.dropdown-wrapper .mobile-dropdown-title{display:block}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper.open .nav-dropdown,.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper.open:blur{display:none}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid;border-color:#ddd #ddd #ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}.navbar .site-name{width:calc(100vw - 9.4rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.page-edit{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit{padding:2rem}}@media (max-width:419px){.page-edit{padding:1.5rem}}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#767676}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-nav{padding:2rem}}@media (max-width:419px){.page-nav{padding:1.5rem}}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}.page{padding-bottom:2rem;display:block}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading:not(.clickable){cursor:auto;color:inherit}.sidebar-group.is-sub-group{padding-left:0}.sidebar-group.is-sub-group>.sidebar-heading{font-size:.95em;line-height:1.4;font-weight:400;padding-left:2rem}.sidebar-group.is-sub-group>.sidebar-heading:not(.clickable){opacity:.5}.sidebar-group.is-sub-group>.sidebar-group-items{padding-left:1rem}.sidebar-group.is-sub-group>.sidebar-group-items>li>.sidebar-link{font-size:.95em;border-left:none}.sidebar-group.depth-2>.sidebar-heading{border-left:none}.sidebar-heading{color:#2c3e50;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:.35rem 1.5rem .35rem 1.25rem;width:100%;box-sizing:border-box;margin:0;border-left:.25rem solid transparent}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading.clickable.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-heading.clickable:hover{color:#3eaf7c}.sidebar-group-items{transition:height .1s ease-out;font-size:.95em;overflow:hidden}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-size:1em;font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar>.sidebar-links{padding:1.5rem 0}.sidebar>.sidebar-links>li>a.sidebar-link{font-size:1.1em;line-height:1.7;font-weight:700}.sidebar>.sidebar-links>li:not(:first-child){margin-top:.75rem}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar>.sidebar-links{padding:1rem 0}}.carbon-ads{min-height:102px;font-size:.75rem;position:relative;z-index:1;top:87px;right:0;max-width:740px;margin:0 auto;padding:2rem 2.5rem!important;background-color:#fff;border-radius:3px;font-size:13px}@media screen and (max-width:1300px){.carbon-ads{position:relative;top:87px;right:0;padding:2rem 2.5rem!important;max-width:740px;margin:0 auto;padding:2rem 2.5rem}}.carbon-ads a{color:#444;font-weight:400;display:inline}.carbon-ads .carbon-img{float:left;margin-right:1rem;border:1px solid var(--border-color)}.carbon-ads .carbon-img img{display:block}.carbon-ads .carbon-poweredby{color:#999;display:block;margin-top:.5em}@media (max-width:719px){.carbon-ads .carbon-img img{width:100px;height:77px}}@media (min-width:320px) and (max-width:759px){.carbon-ads{left:1.5rem!important;padding:.5rem!important}}.sponsor-button[data-v-0a314292]{text-align:center;margin:24px 0}.badge[data-v-15b7b770]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff}.badge.green[data-v-15b7b770],.badge.tip[data-v-15b7b770],.badge[data-v-15b7b770]{background-color:#42b983}.badge.error[data-v-15b7b770]{background-color:#da5961}.badge.warn[data-v-15b7b770],.badge.warning[data-v-15b7b770],.badge.yellow[data-v-15b7b770]{background-color:#e7c000}.badge+.badge[data-v-15b7b770]{margin-left:5px}.theme-code-block[data-v-759a7d02]{display:none}.theme-code-block__active[data-v-759a7d02]{display:block}.theme-code-block>pre[data-v-759a7d02]{background-color:orange}.theme-code-group__nav[data-v-deefee04]{margin-bottom:-35px;background-color:#282c34;padding-bottom:22px;border-top-left-radius:6px;border-top-right-radius:6px;padding-left:10px;padding-top:10px}.theme-code-group__ul[data-v-deefee04]{margin:auto 0;padding-left:0;display:inline-flex;list-style:none}.theme-code-group__nav-tab[data-v-deefee04]{border:0;padding:5px;cursor:pointer;background-color:transparent;font-size:.85em;line-height:1.4;color:hsla(0,0%,100%,.9);font-weight:600}.theme-code-group__nav-tab-active[data-v-deefee04]{border-bottom:1px solid #42b983}.pre-blank[data-v-deefee04]{color:#42b983} \ No newline at end of file diff --git a/assets/img/search.83621669.svg b/assets/img/search.83621669.svg new file mode 100644 index 000000000..03d83913e --- /dev/null +++ b/assets/img/search.83621669.svg @@ -0,0 +1 @@ + diff --git a/assets/js/10.7a43b4a8.js b/assets/js/10.7a43b4a8.js new file mode 100644 index 000000000..c7d4f9405 --- /dev/null +++ b/assets/js/10.7a43b4a8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{464:function(t,e,a){"use strict";a.r(e);var s=a(44),o=Object(s.a)({},(function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"api-references"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#api-references"}},[t._v("#")]),t._v(" API references")]),t._v(" "),a("h2",{attrs:{id:"extension-of-vue"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extension-of-vue"}},[t._v("#")]),t._v(" Extension of Vue")]),t._v(" "),a("h3",{attrs:{id:"vue-constructor-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vue-constructor-options"}},[t._v("#")]),t._v(" Vue constructor options")]),t._v(" "),a("h4",{attrs:{id:"i18n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n"}},[t._v("#")]),t._v(" i18n")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("I18nOptions")])])]),t._v(" "),a("p",[t._v("Component based localization option.")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("See also:")]),t._v(" "),a("code",[t._v("VueI18n")]),t._v(" class constructor options")])]),t._v(" "),a("h3",{attrs:{id:"vue-injected-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vue-injected-methods"}},[t._v("#")]),t._v(" Vue injected methods")]),t._v(" "),a("h4",{attrs:{id:"t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[t._v("#")]),t._v(" $t")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Path} key")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{Array | Object} values")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("TranslateResult")])])])]),t._v(" "),a("p",[t._v("Localize the locale message of "),a("code",[t._v("key")]),t._v(". Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified "),a("code",[t._v("locale")]),t._v(", localize the locale messages of "),a("code",[t._v("locale")]),t._v(". If you specified "),a("code",[t._v("key")]),t._v(" of list / named formatting local messages, you must specify "),a("code",[t._v("values")]),t._v(" too. For "),a("code",[t._v("values")]),t._v(" more details see "),a("RouterLink",{attrs:{to:"/guide/formatting.html"}},[t._v("Formatting")]),t._v(".")],1),t._v(" "),a("p",[t._v("If default pluralization does not suit your needs, see "),a("a",{attrs:{href:"#pluralizationrules"}},[t._v("pluralization rules in constructor options")]),t._v(" and "),a("RouterLink",{attrs:{to:"/guide/pluralization.html"}},[t._v("custom pluralization")]),t._v(".")],1),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),a("p",[t._v("Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in "),a("code",[t._v("data")]),t._v(" options, "),a("code",[t._v("const $t = this.$t.bind(this)")]),t._v(").")])]),t._v(" "),a("h4",{attrs:{id:"tc"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tc"}},[t._v("#")]),t._v(" $tc")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Path} key")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{number} choice")]),t._v(": optional, default 1")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{string | Array | Object} values")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("TranslateResult")])])])]),t._v(" "),a("p",[t._v("Localize the locale message of "),a("code",[t._v("key")]),t._v(" with pluralization. Localize in preferentially component locale messages than global locale messages. If not specified component locale messages, localize with global locale messages. If you specified "),a("code",[t._v("locale")]),t._v(", localize the locale messages of "),a("code",[t._v("locale")]),t._v(". If you will specify string value to "),a("code",[t._v("values")]),t._v(", localize the locale messages of value. If you will specify Array or Object value to "),a("code",[t._v("values")]),t._v(", you must specify with "),a("code",[t._v("values")]),t._v(" of $t.")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),a("p",[t._v("Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in "),a("code",[t._v("data")]),t._v(" options, "),a("code",[t._v("const $tc = this.$tc.bind(this)")]),t._v(").")])]),t._v(" "),a("h4",{attrs:{id:"te"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#te"}},[t._v("#")]),t._v(" $te")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Path} key")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("boolean")])])])]),t._v(" "),a("p",[t._v("Check whether key exists. In Vue instance, If not specified component locale messages, check with global locale messages. If you specified "),a("code",[t._v("locale")]),t._v(", check the locale messages of "),a("code",[t._v("locale")]),t._v(".")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),a("p",[t._v("Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in "),a("code",[t._v("data")]),t._v(" options, "),a("code",[t._v("const $te = this.$te.bind(this)")]),t._v(").")])]),t._v(" "),a("h4",{attrs:{id:"d"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#d"}},[t._v("#")]),t._v(" $d")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{number | Date} value")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Path | Object} key")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{Locale | Object} locale")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("DateTimeFormatResult")])])])]),t._v(" "),a("p",[t._v("Localize the datetime of "),a("code",[t._v("value")]),t._v(" with datetime format of "),a("code",[t._v("key")]),t._v(". The datetime format of "),a("code",[t._v("key")]),t._v(" need to register to "),a("code",[t._v("dateTimeFormats")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" class, and depend on "),a("code",[t._v("locale")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" constructor. If you will specify "),a("code",[t._v("locale")]),t._v(" argument, it will have priority over "),a("code",[t._v("locale")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" constructor.")]),t._v(" "),a("p",[t._v("If the datetime format of "),a("code",[t._v("key")]),t._v(" not exist in "),a("code",[t._v("dateTimeFormats")]),t._v(" option, fallback to depend on "),a("code",[t._v("fallbackLocale")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" constructor.")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),a("p",[t._v("Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in "),a("code",[t._v("data")]),t._v(" options, "),a("code",[t._v("const $d = this.$d.bind(this)")]),t._v(").")])]),t._v(" "),a("h4",{attrs:{id:"n"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#n"}},[t._v("#")]),t._v(" $n")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{number} value")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Path | Object} format")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("NumberFormatResult")])])])]),t._v(" "),a("p",[t._v("Localize the number of "),a("code",[t._v("value")]),t._v(" with number format of "),a("code",[t._v("format")]),t._v(". The number format of "),a("code",[t._v("format")]),t._v(" need to register to "),a("code",[t._v("numberFormats")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" class, and depend on "),a("code",[t._v("locale")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" constructor. If you will specify "),a("code",[t._v("locale")]),t._v(" argument, it will have priority over "),a("code",[t._v("locale")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" constructor.")]),t._v(" "),a("p",[t._v("If the number format of "),a("code",[t._v("format")]),t._v(" not exist in "),a("code",[t._v("numberFormats")]),t._v(" option, fallback to depend on "),a("code",[t._v("fallbackLocale")]),t._v(" option of "),a("code",[t._v("VueI18n")]),t._v(" constructor.")]),t._v(" "),a("p",[t._v("If the second "),a("code",[t._v("format")]),t._v(" argument specified as an object, it should have the following properties:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("key {Path}")]),t._v(": optional, number format")]),t._v(" "),a("li",[a("code",[t._v("locale {Locale}")]),t._v(": optional, locale")]),t._v(" "),a("li",[a("code",[t._v("compactDisplay {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("currency {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("currencyDisplay {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("currencySign {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("localeMatcher {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("notation {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("numberingSystem {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("signDisplay {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("style {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("unit {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("unitDisplay {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("useGrouping {boolean}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("minimumIntegerDigits {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("minimumFractionDigits {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("maximumFractionDigits {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("minimumSignificantDigits {string}")]),t._v(": optional, number format option")]),t._v(" "),a("li",[a("code",[t._v("maximumSignificantDigits {string}")]),t._v(": optional, number format option")])]),t._v(" "),a("p",[t._v("Any specified number format options will have priority over "),a("code",[t._v("numberFormats")]),t._v(" of "),a("code",[t._v("VueI18n")]),t._v(" constructor.")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Tip")]),t._v(" "),a("p",[t._v("Note that you need to guarantee this context equal to component instance in lifecycle methods (e.g. in "),a("code",[t._v("data")]),t._v(" options, "),a("code",[t._v("const $n = this.$n.bind(this)")]),t._v(").")])]),t._v(" "),a("h3",{attrs:{id:"injected-properties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#injected-properties"}},[t._v("#")]),t._v(" Injected properties")]),t._v(" "),a("h4",{attrs:{id:"i18n-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-2"}},[t._v("#")]),t._v(" $i18n")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("I18n")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read only")])])])]),t._v(" "),a("p",[t._v("Get a "),a("code",[t._v("VueI18n")]),t._v(" instance. If you are specify.")]),t._v(" "),a("p",[t._v("If you have specified an "),a("code",[t._v("i18n")]),t._v(" option at component options, you will be able to get a "),a("code",[t._v("VueI18n")]),t._v(" instance at the component, Otherwise, you will be able get root "),a("code",[t._v("VueI18n")]),t._v(" instance.")]),t._v(" "),a("h2",{attrs:{id:"vuei18n-class"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vuei18n-class"}},[t._v("#")]),t._v(" "),a("code",[t._v("VueI18n")]),t._v(" class")]),t._v(" "),a("p",[a("code",[t._v("VueI18n")]),t._v(" class implement "),a("code",[t._v("I18n")]),t._v(" interface of "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("flowtype definitions"),a("OutboundLink")],1)]),t._v(" "),a("h3",{attrs:{id:"static-properties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#static-properties"}},[t._v("#")]),t._v(" Static properties")]),t._v(" "),a("h4",{attrs:{id:"version"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#version"}},[t._v("#")]),t._v(" version")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("string")])])]),t._v(" "),a("p",[t._v("vue-i18n version.")]),t._v(" "),a("h4",{attrs:{id:"availabilities"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#availabilities"}},[t._v("#")]),t._v(" availabilities")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("IntlAvailability")])])]),t._v(" "),a("p",[t._v("Whether the following internationalization features are available:")]),t._v(" "),a("ul",[a("li",[a("p",[a("code",[t._v("{boolean} dateTimeFormat")]),t._v(": locale sensitive datetime formatting")])]),t._v(" "),a("li",[a("p",[a("code",[t._v("{boolean} numberFormat")]),t._v(": locale sensitive number formatting")])])]),t._v(" "),a("p",[t._v("The above internationalization features are depends on "),a("a",{attrs:{href:"http://kangax.github.io/compat-table/esintl/",target:"_blank",rel:"noopener noreferrer"}},[t._v("the browser environments"),a("OutboundLink")],1),t._v(", due to implement with ECMAScript Internationalization API (ECMA-402).")]),t._v(" "),a("h3",{attrs:{id:"constructor-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#constructor-options"}},[t._v("#")]),t._v(" Constructor options")]),t._v(" "),a("p",[t._v("You can specify the below some options of "),a("code",[t._v("I18nOptions")]),t._v(" constructor options of "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("flowtype definitions"),a("OutboundLink")],1)]),t._v(" "),a("h4",{attrs:{id:"locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#locale"}},[t._v("#")]),t._v(" locale")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Locale")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("'en-US'")])])])]),t._v(" "),a("p",[t._v("The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.")]),t._v(" "),a("h4",{attrs:{id:"fallbacklocale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fallbacklocale"}},[t._v("#")]),t._v(" fallbackLocale")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("FallbackLocale")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("false")])])])]),t._v(" "),a("p",[t._v("The locale of fallback localization. For more complex fallback definitions see "),a("RouterLink",{attrs:{to:"/guide/fallback.html"}},[t._v("fallback")]),t._v(".")],1),t._v(" "),a("h4",{attrs:{id:"messages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messages"}},[t._v("#")]),t._v(" messages")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("LocaleMessages")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("{}")])])])]),t._v(" "),a("p",[t._v("The locale messages of localization.")]),t._v(" "),a("h4",{attrs:{id:"datetimeformats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimeformats"}},[t._v("#")]),t._v(" dateTimeFormats")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("DateTimeFormats")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("{}")])])])]),t._v(" "),a("p",[t._v("The datetime formats of localization.")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("See also:")]),t._v(" "),a("code",[t._v("DateTimeFormats")]),t._v(" type of "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("flowtype definitions"),a("OutboundLink")],1)])]),t._v(" "),a("h4",{attrs:{id:"numberformats"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#numberformats"}},[t._v("#")]),t._v(" numberFormats")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("NumberFormats")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("{}")])])])]),t._v(" "),a("p",[t._v("The number formats of localization.")]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("See also:")]),t._v(" "),a("code",[t._v("NumberFormats")]),t._v(" type of "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("flowtype definitions"),a("OutboundLink")],1)])]),t._v(" "),a("h4",{attrs:{id:"formatter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatter"}},[t._v("#")]),t._v(" formatter")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Formatter")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" Built in formatter")])])]),t._v(" "),a("p",[t._v("The formatter that implemented with "),a("code",[t._v("Formatter")]),t._v(" interface.")]),t._v(" "),a("h4",{attrs:{id:"modifiers"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modifiers"}},[t._v("#")]),t._v(" modifiers")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.15.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Modifiers")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("lower")]),t._v(" and "),a("code",[t._v("upper")]),t._v(" modifiers")])])]),t._v(" "),a("p",[t._v("Modifiers functions for linked messages")]),t._v(" "),a("h4",{attrs:{id:"missing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#missing"}},[t._v("#")]),t._v(" missing")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("MissingHandler")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("null")])])])]),t._v(" "),a("p",[t._v("A handler for localization missing. The handler gets called with the localization target locale, localization path key, the Vue instance and values.")]),t._v(" "),a("p",[t._v("If missing handler is assigned, and occurred localization missing, it's not warned.")]),t._v(" "),a("h4",{attrs:{id:"fallbackroot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fallbackroot"}},[t._v("#")]),t._v(" fallbackRoot")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("true")])])])]),t._v(" "),a("p",[t._v("In the component localization, whether to fall back to root level (global) localization when localization fails.")]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("false")]),t._v(", it's warned, and is returned the key.")]),t._v(" "),a("h4",{attrs:{id:"fallbackrootwithemptystring"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fallbackrootwithemptystring"}},[t._v("#")]),t._v(" fallbackRootWithEmptyString")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.26+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("true")])]),t._v(" "),a("p",[t._v("In the component localization, whether to fall back to root level (global) localization when local message is an empty string.")]),t._v(" "),a("p",[t._v("Please note the default behavior in vue-i18n 9.x is to not falling back to root for local message that is empty string.")]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("false")]),t._v(", the empty local message will not fall back to root and will be kept as empty string.")])])]),t._v(" "),a("h4",{attrs:{id:"sync"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sync"}},[t._v("#")]),t._v(" sync")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("true")])])])]),t._v(" "),a("p",[t._v("Whether synchronize the root level locale to the component localization locale.")]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("false")]),t._v(", regardless of the root level locale, localize for each component locale.")]),t._v(" "),a("h4",{attrs:{id:"silenttranslationwarn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#silenttranslationwarn"}},[t._v("#")]),t._v(" silentTranslationWarn")]),t._v(" "),a("blockquote",[a("p",[t._v("6.1+, 🆙 8.13")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean | RegExp")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("false")])])])]),t._v(" "),a("p",[t._v("Whether suppress warnings outputted when localization fails.")]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("true")]),t._v(", suppress localization fail warnings.\nIf you use regular expression, you can suppress localization fail warnings that it match with translation "),a("code",[t._v("key")]),t._v(" (e.g. "),a("code",[t._v("$t")]),t._v(").")]),t._v(" "),a("h4",{attrs:{id:"silentfallbackwarn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#silentfallbackwarn"}},[t._v("#")]),t._v(" silentFallbackWarn")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.8+, 🆙 8.13")])]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean | RegExp")])]),t._v(" "),a("li",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("false")])])]),t._v(" "),a("p",[t._v("Whether suppress warnings when falling back to either "),a("code",[t._v("fallbackLocale")]),t._v(" or "),a("code",[t._v("root")]),t._v(".")]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("true")]),t._v(", warnings will be generated only when no translation is available at all, and not for fallbacks.\nIf you use regular expression, you can suppress the fallback warnings that it match "),a("code",[t._v("key")]),t._v(" (e.g. "),a("code",[t._v("$t")]),t._v(").")]),t._v(" "),a("h4",{attrs:{id:"pluralizationrules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pluralizationrules"}},[t._v("#")]),t._v(" pluralizationRules")]),t._v(" "),a("blockquote",[a("p",[t._v("8.5+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("PluralizationRules")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("{}")])])])]),t._v(" "),a("p",[t._v("A set of rules for word pluralization in a following format:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Key - locale for the rule to be applied to.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Value - mapping function that maps a choice index from `$tc` to the actual choice of the plural word. (See getChoiceIndex for details)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'pt'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("choice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choiceIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* index of the plural word */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'ru'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("choice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choiceIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* index of the plural word */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("choice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choiceIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* index of the plural word */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'jp'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("choice"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choiceIndex")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" Number"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* index of the plural word */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h4",{attrs:{id:"preservedirectivecontent"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#preservedirectivecontent"}},[t._v("#")]),t._v(" preserveDirectiveContent")]),t._v(" "),a("blockquote",[a("p",[t._v("8.7+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("false")])])])]),t._v(" "),a("p",[t._v("Whether "),a("code",[t._v("v-t")]),t._v(" directive's element should preserve "),a("code",[t._v("textContent")]),t._v(" after directive is unbinded.")]),t._v(" "),a("h4",{attrs:{id:"warnhtmlinmessage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#warnhtmlinmessage"}},[t._v("#")]),t._v(" warnHtmlInMessage")]),t._v(" "),a("blockquote",[a("p",[t._v("8.11+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("WarnHtmlInMessageLevel")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("off")])])])]),t._v(" "),a("p",[t._v("Whether to allow the use locale messages of HTML formatting. See the "),a("code",[t._v("warnHtmlInMessage")]),t._v(" property.")]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Important!!")]),t._v(" "),a("p",[t._v("In next major version, "),a("code",[t._v("warnHtmlInMessage")]),t._v(" option is "),a("code",[t._v("warn")]),t._v(" as default.")])]),t._v(" "),a("h4",{attrs:{id:"sharedmessages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sharedmessages"}},[t._v("#")]),t._v(" sharedMessages")]),t._v(" "),a("blockquote",[a("p",[t._v("8.12+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("LocaleMessages")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("undefined")])])])]),t._v(" "),a("p",[t._v("The shared locale messages of localization for components. More detail see "),a("RouterLink",{attrs:{to:"/guide/component.html#shared-locale-messages-for-components"}},[t._v("Component based localization")]),t._v(".")],1),t._v(" "),a("h4",{attrs:{id:"posttranslation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posttranslation"}},[t._v("#")]),t._v(" postTranslation")]),t._v(" "),a("blockquote",[a("p",[t._v("8.16+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("PostTranslationHandler")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("null")])])])]),t._v(" "),a("p",[t._v("A handler for post processing of translation. The handler gets after being called with the "),a("code",[t._v("$t")]),t._v(", "),a("code",[t._v("t")]),t._v(", "),a("code",[t._v("$tc")]),t._v(", and "),a("code",[t._v("tc")]),t._v(".")]),t._v(" "),a("p",[t._v("This handler is useful if you want to filter on translated text such as space trimming.")]),t._v(" "),a("h4",{attrs:{id:"componentinstancecreatedlistener"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#componentinstancecreatedlistener"}},[t._v("#")]),t._v(" componentInstanceCreatedListener")]),t._v(" "),a("blockquote",[a("p",[t._v("8.18+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("ComponentInstanceCreatedListener")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("null")])])])]),t._v(" "),a("p",[t._v("A handler for getting notified when component-local instance was created. The handler gets called with new and old (root) VueI18n instances.")]),t._v(" "),a("p",[t._v("This handler is useful when extending the root VueI18n instance and wanting to also apply those extensions to component-local instance.")]),t._v(" "),a("h4",{attrs:{id:"escapeparameterhtml"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#escapeparameterhtml"}},[t._v("#")]),t._v(" escapeParameterHtml")]),t._v(" "),a("blockquote",[a("p",[t._v("8.22+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Default:")]),t._v(" "),a("code",[t._v("false")])])])]),t._v(" "),a("p",[t._v("If "),a("code",[t._v("escapeParameterHtml")]),t._v(" is configured as true then interpolation parameters are escaped before the message is translated.\nThis is useful when translation output is used in "),a("code",[t._v("v-html")]),t._v(" and the translation resource contains html markup (e.g. "),a("code",[t._v("")]),t._v("\naround a user provided value). This usage pattern mostly occurs when passing precomputed text strings into UI compontents.")]),t._v(" "),a("p",[t._v("The escape process involves replacing the following symbols with their respective HTML character entities: "),a("code",[t._v("<")]),t._v(", "),a("code",[t._v(">")]),t._v(", "),a("code",[t._v('"')]),t._v(", "),a("code",[t._v("'")]),t._v(".")]),t._v(" "),a("p",[t._v("Setting "),a("code",[t._v("escapeParameterHtml")]),t._v(" as true should not break existing functionality but provides a safeguard against a subtle\ntype of XSS attack vectors.")]),t._v(" "),a("h3",{attrs:{id:"properties"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#properties"}},[t._v("#")]),t._v(" Properties")]),t._v(" "),a("h4",{attrs:{id:"locale-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#locale-2"}},[t._v("#")]),t._v(" locale")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Locale")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("The locale of localization. If the locale contains a territory and a dialect, this locale contains an implicit fallback.")]),t._v(" "),a("h4",{attrs:{id:"fallbacklocale-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fallbacklocale-2"}},[t._v("#")]),t._v(" fallbackLocale")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("FallbackLocale")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("The locale of fallback localization. For more complex fallback definitions see "),a("RouterLink",{attrs:{to:"/guide/fallback.html"}},[t._v("fallback")]),t._v(".")],1),t._v(" "),a("h4",{attrs:{id:"messages-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messages-2"}},[t._v("#")]),t._v(" messages")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("LocaleMessages")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read only")])])])]),t._v(" "),a("p",[t._v("The locale messages of localization.")]),t._v(" "),a("h4",{attrs:{id:"datetimeformats-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimeformats-2"}},[t._v("#")]),t._v(" dateTimeFormats")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("DateTimeFormats")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read only")])])])]),t._v(" "),a("p",[t._v("The datetime formats of localization.")]),t._v(" "),a("h4",{attrs:{id:"numberformats-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#numberformats-2"}},[t._v("#")]),t._v(" numberFormats")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("NumberFormats")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read only")])])])]),t._v(" "),a("p",[t._v("The number formats of localization.")]),t._v(" "),a("h4",{attrs:{id:"availablelocales"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#availablelocales"}},[t._v("#")]),t._v(" availableLocales")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.9.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Locale[]")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read only")])])])]),t._v(" "),a("p",[t._v("The list of available locales in "),a("code",[t._v("messages")]),t._v(" in lexical order.")]),t._v(" "),a("h4",{attrs:{id:"missing-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#missing-2"}},[t._v("#")]),t._v(" missing")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("MissingHandler")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("A handler for localization missing.")]),t._v(" "),a("h4",{attrs:{id:"formatter-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatter-2"}},[t._v("#")]),t._v(" formatter")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Formatter")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("The formatter that implemented with "),a("code",[t._v("Formatter")]),t._v(" interface.")]),t._v(" "),a("h4",{attrs:{id:"silenttranslationwarn-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#silenttranslationwarn-2"}},[t._v("#")]),t._v(" silentTranslationWarn")]),t._v(" "),a("blockquote",[a("p",[t._v("6.1+, 🆙 8.13")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean | RegExp")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("Whether suppress warnings outputted when localization fails.")]),t._v(" "),a("h4",{attrs:{id:"silentfallbackwarn-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#silentfallbackwarn-2"}},[t._v("#")]),t._v(" silentFallbackWarn")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.8+, 🆙 8.13")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean | RegExp")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("Whether suppress fallback warnings when localization fails.")]),t._v(" "),a("h4",{attrs:{id:"pluralizationrules-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pluralizationrules-2"}},[t._v("#")]),t._v(" pluralizationRules")]),t._v(" "),a("blockquote",[a("p",[t._v("8.5+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("PluralizationRules")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("A set of locale-dependent rules for word pluralization.")]),t._v(" "),a("h4",{attrs:{id:"preservedirectivecontent-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#preservedirectivecontent-2"}},[t._v("#")]),t._v(" preserveDirectiveContent")]),t._v(" "),a("blockquote",[a("p",[t._v("8.7+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("Boolean")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("Whether "),a("code",[t._v("v-t")]),t._v(" directive's element should preserve "),a("code",[t._v("textContent")]),t._v(" after directive is unbinded.")]),t._v(" "),a("h4",{attrs:{id:"warnhtmlinmessage-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#warnhtmlinmessage-2"}},[t._v("#")]),t._v(" warnHtmlInMessage")]),t._v(" "),a("blockquote",[a("p",[t._v("8.11+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("WarnHtmlInMessageLevel")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("Whether to allow the use locale messages of HTML formatting.")]),t._v(" "),a("p",[t._v("If you set "),a("code",[t._v("warn")]),t._v(" or"),a("code",[t._v("error")]),t._v(", will check the locale messages on the VueI18n instance.")]),t._v(" "),a("p",[t._v("If you are specified "),a("code",[t._v("warn")]),t._v(", a warning will be output at console.")]),t._v(" "),a("p",[t._v("If you are specified "),a("code",[t._v("error")]),t._v(" will occurred an Error.")]),t._v(" "),a("p",[t._v("In VueI18n instance, set the "),a("code",[t._v("off")]),t._v(" as default.")]),t._v(" "),a("h4",{attrs:{id:"posttranslation-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#posttranslation-2"}},[t._v("#")]),t._v(" postTranslation")]),t._v(" "),a("blockquote",[a("p",[t._v("8.16+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Type:")]),t._v(" "),a("code",[t._v("PostTranslationHandler")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Read/Write")])])])]),t._v(" "),a("p",[t._v("A handler for post processing of translation.")]),t._v(" "),a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods"}},[t._v("#")]),t._v(" Methods")]),t._v(" "),a("h4",{attrs:{id:"getchoiceindex"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getchoiceindex"}},[t._v("#")]),t._v(" getChoiceIndex")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{number} choice")])]),t._v(" "),a("li",[a("code",[t._v("{number} choicesLength")])])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("finalChoice {number}")])])])]),t._v(" "),a("p",[t._v("Get pluralization index for current pluralizing number and a given amount of choices.\nCan be overridden through prototype mutation:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("getChoiceIndex "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* custom implementation */")]),t._v("\n")])])]),a("p",[t._v("However, for most usages "),a("a",{attrs:{href:"#pluralizationrules"}},[t._v("pluralizationRules constructor option")]),t._v(" should be enough.")]),t._v(" "),a("h4",{attrs:{id:"getlocalemessage-locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getlocalemessage-locale"}},[t._v("#")]),t._v(" getLocaleMessage( locale )")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("LocaleMessageObject")])])])]),t._v(" "),a("p",[t._v("Get the locale message of locale.")]),t._v(" "),a("h4",{attrs:{id:"setlocalemessage-locale-message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setlocalemessage-locale-message"}},[t._v("#")]),t._v(" setLocaleMessage( locale, message )")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])]),t._v(" "),a("li",[a("code",[t._v("{LocaleMessageObject} message")])])])])]),t._v(" "),a("p",[t._v("Set the locale message of locale.")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("NOTE")]),t._v(" "),a("blockquote",[a("p",[t._v("8.11+")])]),t._v(" "),a("p",[t._v("If you set "),a("code",[t._v("warn")]),t._v(" or"),a("code",[t._v("error")]),t._v(" in the "),a("code",[t._v("warnHtmlInMessage")]),t._v(" property, when this method is executed, it will check if HTML formatting is used for locale message.")])]),t._v(" "),a("h4",{attrs:{id:"mergelocalemessage-locale-message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mergelocalemessage-locale-message"}},[t._v("#")]),t._v(" mergeLocaleMessage( locale, message )")]),t._v(" "),a("blockquote",[a("p",[t._v("6.1+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])]),t._v(" "),a("li",[a("code",[t._v("{LocaleMessageObject} message")])])])])]),t._v(" "),a("p",[t._v("Merge the registered locale messages with the locale message of locale.")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("NOTE")]),t._v(" "),a("blockquote",[a("p",[t._v("8.11+")])]),t._v(" "),a("p",[t._v("If you set "),a("code",[t._v("warn")]),t._v(" or"),a("code",[t._v("error")]),t._v(" in the "),a("code",[t._v("warnHtmlInMessage")]),t._v(" property, when this method is executed, it will check if HTML formatting is used for locale message.")])]),t._v(" "),a("h4",{attrs:{id:"t-key-locale-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t-key-locale-values"}},[t._v("#")]),t._v(" t( key, [locale], [values] )")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Path} key")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{Array | Object} values")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" : "),a("code",[t._v("TranslateResult")])])])]),t._v(" "),a("p",[t._v("This is the same as the "),a("code",[t._v("Function")]),t._v(" returned with "),a("code",[t._v("$t")]),t._v(" method. More detail see "),a("a",{attrs:{href:"#t"}},[t._v("$t")]),t._v(".")]),t._v(" "),a("h4",{attrs:{id:"tc-key-choice-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tc-key-choice-values"}},[t._v("#")]),t._v(" tc( key, [choice], [values] )")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Path} key")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{number} choice")]),t._v(": optional, default "),a("code",[t._v("1")])]),t._v(" "),a("li",[a("code",[t._v("{string | Array | Object} values")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("TranslateResult")])])])]),t._v(" "),a("p",[t._v("This is the same as the "),a("code",[t._v("Function")]),t._v(" returned "),a("code",[t._v("$tc")]),t._v(" method. More detail see "),a("a",{attrs:{href:"#tc"}},[t._v("$tc")]),t._v(".")]),t._v(" "),a("h4",{attrs:{id:"te-key-locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#te-key-locale"}},[t._v("#")]),t._v(" te( key, [locale] )")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{string} key")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("boolean")])])])]),t._v(" "),a("p",[t._v("Check whether key path exists in global locale message. If you specified "),a("code",[t._v("locale")]),t._v(", check the locale message of "),a("code",[t._v("locale")]),t._v(".")]),t._v(" "),a("h4",{attrs:{id:"getdatetimeformat-locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getdatetimeformat-locale"}},[t._v("#")]),t._v(" getDateTimeFormat ( locale )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("DateTimeFormat")])])])]),t._v(" "),a("p",[t._v("Get the datetime format of locale.")]),t._v(" "),a("h4",{attrs:{id:"setdatetimeformat-locale-format"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setdatetimeformat-locale-format"}},[t._v("#")]),t._v(" setDateTimeFormat ( locale, format )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])]),t._v(" "),a("li",[a("code",[t._v("{DateTimeFormat} format")])])])])]),t._v(" "),a("p",[t._v("Set the datetime format of locale.")]),t._v(" "),a("h4",{attrs:{id:"mergedatetimeformat-locale-format"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mergedatetimeformat-locale-format"}},[t._v("#")]),t._v(" mergeDateTimeFormat ( locale, format )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])]),t._v(" "),a("li",[a("code",[t._v("{DateTimeFormat} format")])])])])]),t._v(" "),a("p",[t._v("Merge the registered datetime formats with the datetime format of locale.")]),t._v(" "),a("h4",{attrs:{id:"d-value-key-locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#d-value-key-locale"}},[t._v("#")]),t._v(" d( value, [key], [locale] )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{number | Date} value")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Path | Object} key")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{Locale | Object} locale")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("DateTimeFormatResult")])])])]),t._v(" "),a("p",[t._v("This is the same as "),a("code",[t._v("$d")]),t._v(" method of Vue instance method. More detail see "),a("a",{attrs:{href:"#d"}},[t._v("$d")]),t._v(".")]),t._v(" "),a("h4",{attrs:{id:"getnumberformat-locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#getnumberformat-locale"}},[t._v("#")]),t._v(" getNumberFormat ( locale )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("NumberFormat")])])])]),t._v(" "),a("p",[t._v("Get the number format of locale.")]),t._v(" "),a("h4",{attrs:{id:"setnumberformat-locale-format"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#setnumberformat-locale-format"}},[t._v("#")]),t._v(" setNumberFormat ( locale, format )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])]),t._v(" "),a("li",[a("code",[t._v("{NumberFormat} format")])])])])]),t._v(" "),a("p",[t._v("Set the number format of locale.")]),t._v(" "),a("h4",{attrs:{id:"mergenumberformat-locale-format"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mergenumberformat-locale-format"}},[t._v("#")]),t._v(" mergeNumberFormat ( locale, format )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{Locale} locale")])]),t._v(" "),a("li",[a("code",[t._v("{NumberFormat} format")])])])])]),t._v(" "),a("p",[t._v("Merge the registered number formats with the number format of locale.")]),t._v(" "),a("h4",{attrs:{id:"n-value-format-locale"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#n-value-format-locale"}},[t._v("#")]),t._v(" n( value, [format], [locale] )")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Arguments:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v("{number} value")]),t._v(": required")]),t._v(" "),a("li",[a("code",[t._v("{Path | Object} format")]),t._v(": optional")]),t._v(" "),a("li",[a("code",[t._v("{Locale} locale")]),t._v(": optional")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Return:")]),t._v(" "),a("code",[t._v("NumberFormatResult")])])])]),t._v(" "),a("p",[t._v("This is the same as "),a("code",[t._v("$n")]),t._v(" method of Vue instance method. More detail see "),a("a",{attrs:{href:"#n"}},[t._v("$n")]),t._v(".")]),t._v(" "),a("h2",{attrs:{id:"directives"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#directives"}},[t._v("#")]),t._v(" Directives")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.3+")])]),t._v(" "),a("h3",{attrs:{id:"v-t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#v-t"}},[t._v("#")]),t._v(" v-t")]),t._v(" "),a("ul",[a("li",[a("p",[a("strong",[t._v("Expects:")]),t._v(" "),a("code",[t._v("string | Object")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Modifiers:")])]),t._v(" "),a("ul",[a("li",[a("code",[t._v(".preserve")]),t._v(": (8.7.0+) preserves element "),a("code",[t._v("textContent")]),t._v(" when directive is unbinded.")])])]),t._v(" "),a("li",[a("p",[a("strong",[t._v("Details:")])])])]),t._v(" "),a("p",[t._v("Update the element "),a("code",[t._v("textContent")]),t._v(" that localized with locale messages. You can use string syntax or object syntax. string syntax can be specified as a keypath of locale messages. If you can be used object syntax, you need to specify as the object key the following params:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("path")]),t._v(": required, key of locale messages")]),t._v(" "),a("li",[a("code",[t._v("locale")]),t._v(": optional, locale")]),t._v(" "),a("li",[a("code",[t._v("args")]),t._v(": optional, for list or named formatting")])]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("NOTE")]),t._v(" "),a("p",[t._v("The element "),a("code",[t._v("textContent")]),t._v(" will be cleared by default when "),a("code",[t._v("v-t")]),t._v(" directive is unbinded. This might be undesirable situation when used inside "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/transitions.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("transitions"),a("OutboundLink")],1),t._v(". To preserve "),a("code",[t._v("textContent")]),t._v(" data after directive unbind use "),a("code",[t._v(".preserve")]),t._v(" modifier or global "),a("a",{attrs:{href:"#preservedirectivecontent"}},[a("code",[t._v("preserveDirectiveContent")]),t._v(" option")]),t._v(".")])]),t._v(" "),a("ul",[a("li",[a("strong",[t._v("Examples:")])])]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- string syntax: literal --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("foo.bar"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- string syntax: binding via data or computed props --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("msg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- object syntax: literal --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{ path: "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("hi"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(", locale: "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("ja"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(", args: { name: "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("kazupon"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(" } }"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- object syntax: binding via data or computed props --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{ path: greeting, args: { name: fullName } }"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- with preserve modifier --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t.preserve")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("foo.bar"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("ul",[a("li",[a("strong",[t._v("See also:")]),t._v(" "),a("RouterLink",{attrs:{to:"/guide/directive.html"}},[t._v("Custom directive localization")])],1)]),t._v(" "),a("h2",{attrs:{id:"components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#components"}},[t._v("#")]),t._v(" Components")]),t._v(" "),a("h3",{attrs:{id:"i18n-functional-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-functional-component"}},[t._v("#")]),t._v(" i18n functional component")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("h4",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props"}},[t._v("#")]),t._v(" Props:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("path {Path}")]),t._v(": required, keypath of locale messages")]),t._v(" "),a("li",[a("code",[t._v("locale {Locale}")]),t._v(": optional, locale")]),t._v(" "),a("li",[a("code",[t._v("tag {string | boolean | Object}")]),t._v(": optional, default "),a("code",[t._v("'span'")])]),t._v(" "),a("li",[a("code",[t._v("places {Array | Object}")]),t._v(": optional (7.2+)")])]),t._v(" "),a("div",{staticClass:"custom-block danger"},[a("p",{staticClass:"custom-block-title"},[t._v("Important!!")]),t._v(" "),a("p",[t._v("In next major version, "),a("code",[t._v("places")]),t._v(" prop is deprecated. Please switch to slots syntax.")])]),t._v(" "),a("h4",{attrs:{id:"usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usage"}},[t._v("#")]),t._v(" Usage:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("path")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("term"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tos"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("url"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("target")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("_blank"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('tos') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tos")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Term of Service'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("term")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I accept xxx {0}.'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tos")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'利用規約'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("term")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'私は xxx の{0}に同意します。'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/term'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"see-also"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#see-also"}},[t._v("#")]),t._v(" See also:")]),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/guide/interpolation.html"}},[t._v("Component interpolation")])],1),t._v(" "),a("h3",{attrs:{id:"i18n-n-functional-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#i18n-n-functional-component"}},[t._v("#")]),t._v(" i18n-n functional component")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.10+")])]),t._v(" "),a("h4",{attrs:{id:"props-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props-2"}},[t._v("#")]),t._v(" Props:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("value {number}")]),t._v(": required, number to format")]),t._v(" "),a("li",[a("code",[t._v("format {string | NumberFormatOptions}")]),t._v(": optional, number format name or object with explicit format options")]),t._v(" "),a("li",[a("code",[t._v("locale {Locale}")]),t._v(": optional, locale")]),t._v(" "),a("li",[a("code",[t._v("tag {string | boolean | Object}")]),t._v(": optional, default "),a("code",[t._v("'span'")])])]),t._v(" "),a("h4",{attrs:{id:"usage-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#usage-2"}},[t._v("#")]),t._v(" Usage:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n-n")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("money"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("format")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currency"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("label"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("currency")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slotProps"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("font-weight: bold"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ slotProps.currency }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" numberFormats "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'currency'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'USD'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'ja-JP'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'currency'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'JPY'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n numberFormats\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("money")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("10234")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h4",{attrs:{id:"scoped-slots"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-slots"}},[t._v("#")]),t._v(" Scoped slots")]),t._v(" "),a("p",[a("code",[t._v("")]),t._v(" functional component can accept a number of named scoped slots. List of supported slot names is based on "),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts",target:"_blank",rel:"noopener noreferrer"}},[a("code",[t._v("Intl.NumberFormat.formatToParts()")]),t._v(" output types"),a("OutboundLink")],1),t._v(":")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("currency")])]),t._v(" "),a("li",[a("code",[t._v("decimal")])]),t._v(" "),a("li",[a("code",[t._v("fraction")])]),t._v(" "),a("li",[a("code",[t._v("group")])]),t._v(" "),a("li",[a("code",[t._v("infinity")])]),t._v(" "),a("li",[a("code",[t._v("integer")])]),t._v(" "),a("li",[a("code",[t._v("literal")])]),t._v(" "),a("li",[a("code",[t._v("minusSign")])]),t._v(" "),a("li",[a("code",[t._v("nan")])]),t._v(" "),a("li",[a("code",[t._v("plusSign")])]),t._v(" "),a("li",[a("code",[t._v("percentSign")])])]),t._v(" "),a("p",[t._v("Each of these named scoped slots will accept three scope parameters:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("[slotName] {FormattedNumberPartType}")]),t._v(": parameter of the same name as actual slot name (like "),a("code",[t._v("integer")]),t._v(")")]),t._v(" "),a("li",[a("code",[t._v("index {Number}")]),t._v(": index of the specific part in the array of number parts")]),t._v(" "),a("li",[a("code",[t._v("parts {Array}")]),t._v(": array of all formatted number parts")])]),t._v(" "),a("h4",{attrs:{id:"see-also-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#see-also-2"}},[t._v("#")]),t._v(" See also:")]),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/guide/number.html#custom-formatting"}},[t._v("Number custom formatting")])],1),t._v(" "),a("h2",{attrs:{id:"special-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#special-attributes"}},[t._v("#")]),t._v(" Special Attributes")]),t._v(" "),a("h3",{attrs:{id:"place"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#place"}},[t._v("#")]),t._v(" place")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 7.2+")])]),t._v(" "),a("h4",{attrs:{id:"expects-number-string"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expects-number-string"}},[t._v("#")]),t._v(" Expects: "),a("code",[t._v("{number | string}")])]),t._v(" "),a("p",[t._v("Used on component interpolation to indicate which index of list formatting or key of named formatting.")]),t._v(" "),a("p",[t._v("For detailed usage, see the guide section linked below.")]),t._v(" "),a("h4",{attrs:{id:"see-also-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#see-also-3"}},[t._v("#")]),t._v(" See also:")]),t._v(" "),a("p",[a("RouterLink",{attrs:{to:"/guide/interpolation.html"}},[t._v("Component interpolation")])],1)])}),[],!1,null,null,null);e.default=o.exports}}]); \ No newline at end of file diff --git a/assets/js/11.d26994b0.js b/assets/js/11.d26994b0.js new file mode 100644 index 000000000..1893a39f2 --- /dev/null +++ b/assets/js/11.d26994b0.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{463:function(t,s,a){"use strict";a.r(s);var n=a(44),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"component-based-localization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#component-based-localization"}},[t._v("#")]),t._v(" Component based localization")]),t._v(" "),a("p",[t._v("In general, locale info (e.g. "),a("code",[t._v("locale")]),t._v(","),a("code",[t._v("messages")]),t._v(", etc) is set as constructor option of "),a("code",[t._v("VueI18n")]),t._v(" instance and it sets "),a("code",[t._v("i18n")]),t._v(" option as root Vue instance.")]),t._v(" "),a("p",[t._v("Therefore you can globally translate using "),a("code",[t._v("$t")]),t._v(" or "),a("code",[t._v("$tc")]),t._v(" in the root Vue instance and any composed component. You can also manage locale info for each component separately, which might be more convenient due to Vue components oriented design.")]),t._v(" "),a("p",[t._v("Component based localization example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// setup locale info for root Vue instance")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ja'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello world'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("greeting")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'good morning'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'こんにちは、世界'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("greeting")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'おはようございます'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Define component")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" Component1 "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("template")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\n
\n

Component1 locale messages: {{ $t("message.hello") }}

\n

Fallback global locale messages: {{ $t("message.greeting") }}

\n
')]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `i18n` option, setup locale info for component")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello component1'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'こんにちは、component1'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("components")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n Component1\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('{{ $t("message.hello") }}'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("component1")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Outputs the following:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("こんにちは、世界"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("container"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Component1 locale messages: こんにちは、component1"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Fallback global locale messages: おはようございます"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("As in the example above, if the component doesn't have the locale message, it falls back to globally defined localization info. The component uses the language set in the root instance (in the above example: "),a("code",[t._v("locale: 'ja'")]),t._v(").")]),t._v(" "),a("p",[t._v("Note that, by default, falling back to root locale generates two warnings in the console:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("[vue-i18n] Value of key 'message.greeting' is not a string!\n[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.\n")])])]),a("p",[t._v("To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set "),a("code",[t._v("silentFallbackWarn: true")]),t._v(" when initializing the "),a("code",[t._v("VueI18n")]),t._v(" instance.")]),t._v(" "),a("p",[t._v("If you want to localize using the component locale, you can do that with "),a("code",[t._v("sync: false")]),t._v(" and "),a("code",[t._v("locale")]),t._v(" in the "),a("code",[t._v("i18n")]),t._v(" option.")]),t._v(" "),a("h2",{attrs:{id:"shared-locale-messages-for-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shared-locale-messages-for-components"}},[t._v("#")]),t._v(" Shared locale messages for components")]),t._v(" "),a("p",[t._v("Sometimes you may want to import shared locale messages for certain components, not fallback from global locale messages (e.g. common messages of certain feature for components.")]),t._v(" "),a("p",[t._v("You can use "),a("code",[t._v("sharedMessages")]),t._v(" options of "),a("code",[t._v("i18n")]),t._v(".")]),t._v(" "),a("p",[t._v("Common Locale Messages example:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("buttons")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("save")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Save"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("buttons")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("save")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"保存"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Components:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" commonMessage "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./locales/common'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// import common locale messages")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ServiceModal'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("template")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\n
\n
\n

This is good service

\n
\n
\n \n
\n
\n ')]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("sharedMessages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" commonMessages\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("If "),a("code",[t._v("sharedMessages")]),t._v(" option is specified along with the "),a("code",[t._v("messages")]),t._v(" option, those messages will be merged into locale messages into the VueI18n instance of the target component.")]),t._v(" "),a("h2",{attrs:{id:"translation-in-functional-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#translation-in-functional-component"}},[t._v("#")]),t._v(" Translation in functional component")]),t._v(" "),a("p",[t._v("When using a functional component, all data (including "),a("code",[t._v("props")]),t._v(", "),a("code",[t._v("children")]),t._v(", "),a("code",[t._v("slots")]),t._v(", "),a("code",[t._v("parent")]),t._v(", etc.) is passed through the "),a("code",[t._v("context")]),t._v(" containing the attributes, and it doesn't recognize the "),a("code",[t._v("this")]),t._v(" scope, so when using the vue-i18n on functional components, you must refer to "),a("code",[t._v("$t")]),t._v(" as "),a("code",[t._v("parent.$t")]),t._v(", check the example below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[t._v("...\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("#"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("target")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("_blank"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("rel")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("noopener noreferrer"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("img")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("./assets/example.jpg"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":alt")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("parent.$t("),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("message.hello"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n...\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/12.ce5c7b13.js b/assets/js/12.ce5c7b13.js new file mode 100644 index 000000000..50112a065 --- /dev/null +++ b/assets/js/12.ce5c7b13.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{459:function(t,s,a){"use strict";a.r(s);var n=a(44),r=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"datetime-localization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetime-localization"}},[t._v("#")]),t._v(" DateTime localization")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),a("p",[t._v("🆕 7.0+")])]),t._v(" "),a("p",[t._v("You can localize the datetime with your definition formats.")]),t._v(" "),a("p",[t._v("DateTime formats the below:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" dateTimeFormats "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("short")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("year")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("month")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'short'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("day")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("long")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("year")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("month")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'long'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("day")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("weekday")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'long'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hour")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("minute")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'ja-JP'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("short")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("year")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("month")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'short'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("day")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("long")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("year")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("month")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'long'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("day")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("weekday")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'long'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hour")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("minute")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'numeric'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hour12")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("As seen above, you can define named datetime format (e.g. "),a("code",[t._v("short")]),t._v(", "),a("code",[t._v("long")]),t._v(", etc), and you need to use "),a("a",{attrs:{href:"http://www.ecma-international.org/ecma-402/2.0/#sec-intl-datetimeformat-constructor",target:"_blank",rel:"noopener noreferrer"}},[t._v("the options with ECMA-402 Intl.DateTimeFormat"),a("OutboundLink")],1)]),t._v(" "),a("p",[t._v("After that, when using the locale messages, you need to specify the "),a("code",[t._v("dateTimeFormats")]),t._v(" option of the "),a("code",[t._v("VueI18n")]),t._v(" constructor:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n dateTimeFormats\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Template the below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $d(new Date(), 'short') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $d(new Date(), 'long', 'ja-JP') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output the below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Jan 18, 2021"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("2021年1月18日日曜日 午前5:47"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=r.exports}}]); \ No newline at end of file diff --git a/assets/js/13.ef529820.js b/assets/js/13.ef529820.js new file mode 100644 index 000000000..302329953 --- /dev/null +++ b/assets/js/13.ef529820.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{461:function(t,s,a){"use strict";a.r(s);var n=a(44),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"custom-directive-localization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-directive-localization"}},[t._v("#")]),t._v(" Custom directive localization")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),a("p",[t._v("🆕 7.3+")])]),t._v(" "),a("p",[t._v("You can translate not only with "),a("code",[t._v("v-t")]),t._v(" custom directive, but also with the "),a("code",[t._v("$t")]),t._v("\nmethod.")]),t._v(" "),a("h2",{attrs:{id:"string-syntax"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#string-syntax"}},[t._v("#")]),t._v(" String syntax")]),t._v(" "),a("p",[t._v("You can pass the keypath of locale messages with string syntax.")]),t._v(" "),a("p",[t._v("Javascript:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hi there!'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'こんにちは！'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#string-syntax'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Templates:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("string-syntax"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- string literal --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("hello"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- keypath binding via data --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Outputs:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("string-syntax"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hi there!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hi there!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"object-syntax"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#object-syntax"}},[t._v("#")]),t._v(" Object syntax")]),t._v(" "),a("p",[t._v("You can use object syntax.")]),t._v(" "),a("p",[t._v("Javascript:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hi {name}!'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'こんにちは、{name}！'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("computed")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("nickName")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'kazupon'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("path")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#object-syntax'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Templates:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("object-syntax"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- literal --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{ path: "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("hello"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(", locale: "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("ja"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(", args: { name: "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("kazupon"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(" } }"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- data binding via data --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{ path: path, args: { name: nickName } }"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Outputs:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("object-syntax"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("こんにちは、kazupon！"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hi kazupon!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"use-with-transitions"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-with-transitions"}},[t._v("#")]),t._v(" Use with transitions")]),t._v(" "),a("div",{staticClass:"custom-block tip"},[a("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),a("p",[t._v("🆕 8.7+")])]),t._v(" "),a("p",[t._v("When "),a("code",[t._v("v-t")]),t._v(" directive is applied to an element inside "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition",target:"_blank",rel:"noopener noreferrer"}},[a("code",[t._v("")]),t._v(" component"),a("OutboundLink")],1),t._v(", you may notice that the translated message disappears during the transition. This behavior is related to the nature of the "),a("code",[t._v("")]),t._v(" component implementation – all directives in the disappearing element inside the "),a("code",[t._v("")]),t._v(" component will be destroyed "),a("strong",[t._v("before the transition starts")]),t._v(". This behavior may result in content flickering on short animations, but is most noticeable on long transitions.")]),t._v(" "),a("p",[t._v("To make sure directive content stays un-touched during a transition, just add the "),a("RouterLink",{attrs:{to:"/api/#v-t"}},[a("code",[t._v(".preserve")]),t._v(" modifier")]),t._v(" to the "),a("code",[t._v("v-t")]),t._v(" directive definition.")],1),t._v(" "),a("p",[t._v("Javascript:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preserve")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'with preserve'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("toggle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#in-transitions'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Templates:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("in-transitions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fade"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("toggle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t.preserve")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("preserve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("toggle = !toggle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Toggle"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("It is also possible to set global settings on the "),a("code",[t._v("VueI18n")]),t._v(" instance itself, which will affect all "),a("code",[t._v("v-t")]),t._v(" directives without modifier.")]),t._v(" "),a("p",[t._v("Javascript:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preserve")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'with preserve'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preserveDirectiveContent")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("toggle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#in-transitions'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("Templates:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("in-transitions"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("transition")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("fade"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-if")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("toggle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-t")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("preserve"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("button")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("@click")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("toggle = !toggle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Toggle"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("About the above examples, see the "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/tree/dev/examples/directive",target:"_blank",rel:"noopener noreferrer"}},[t._v("example"),a("OutboundLink")],1)]),t._v(" "),a("h2",{attrs:{id:"t-vs-v-t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t-vs-v-t"}},[t._v("#")]),t._v(" "),a("code",[t._v("$t")]),t._v(" vs "),a("code",[t._v("v-t")])]),t._v(" "),a("h3",{attrs:{id:"t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#t"}},[t._v("#")]),t._v(" "),a("code",[t._v("$t")])]),t._v(" "),a("p",[a("code",[t._v("$t")]),t._v(" is an extended Vue instance method. It has the following pros and cons:")]),t._v(" "),a("h4",{attrs:{id:"pros"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pros"}},[t._v("#")]),t._v(" Pros")]),t._v(" "),a("p",[t._v("You can "),a("strong",[t._v("flexibly")]),t._v(" use mustache syntax "),a("code",[t._v("{{}}")]),t._v(" in templates and also computed props and methods in Vue instance.")]),t._v(" "),a("h4",{attrs:{id:"cons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cons"}},[t._v("#")]),t._v(" Cons")]),t._v(" "),a("p",[a("code",[t._v("$t")]),t._v(" is executed "),a("strong",[t._v("every time")]),t._v(" when re-render occurs, so it does have translation costs.")]),t._v(" "),a("h3",{attrs:{id:"v-t"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#v-t"}},[t._v("#")]),t._v(" "),a("code",[t._v("v-t")])]),t._v(" "),a("p",[a("code",[t._v("v-t")]),t._v(" is a custom directive. It has the following pros and cons:")]),t._v(" "),a("h4",{attrs:{id:"pros-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pros-2"}},[t._v("#")]),t._v(" Pros")]),t._v(" "),a("p",[a("code",[t._v("v-t")]),t._v(" has "),a("strong",[t._v("better performance")]),t._v(" than the "),a("code",[t._v("$t")]),t._v(" method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n-extensions",target:"_blank",rel:"noopener noreferrer"}},[a("code",[t._v("vue-i18n-extensions")]),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("Therefore it's possible to make "),a("strong",[t._v("more performance optimizations")]),t._v(".")]),t._v(" "),a("h4",{attrs:{id:"cons-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cons-2"}},[t._v("#")]),t._v(" Cons")]),t._v(" "),a("p",[a("code",[t._v("v-t")]),t._v(" cannot be flexibly used like "),a("code",[t._v("$t")]),t._v(", it's rather "),a("strong",[t._v("complex")]),t._v(". The translated content with "),a("code",[t._v("v-t")]),t._v(" is inserted into the "),a("code",[t._v("textContent")]),t._v(" of the element. Also, when you use server-side rendering, you need to set the "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n-extensions#directive-v-t-custom-directive-for-server-side",target:"_blank",rel:"noopener noreferrer"}},[t._v("custom directive"),a("OutboundLink")],1),t._v(" to "),a("code",[t._v("directives")]),t._v(" option of the "),a("code",[t._v("createRenderer")]),t._v(" function.")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/14.6f977816.js b/assets/js/14.6f977816.js new file mode 100644 index 000000000..fca761706 --- /dev/null +++ b/assets/js/14.6f977816.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{462:function(t,a,s){"use strict";s.r(a);var e=s(44),n=Object(e.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"fallback-localization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fallback-localization"}},[t._v("#")]),t._v(" Fallback localization")]),t._v(" "),s("p",[s("em",[t._v("Summary: Use "),s("code",[t._v("fallbackLocale: ''")]),t._v(" to choose which language to use when your preferred language lacks a translation.")])]),t._v(" "),s("h2",{attrs:{id:"implicit-fallback-using-locales"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#implicit-fallback-using-locales"}},[t._v("#")]),t._v(" Implicit fallback using locales")]),t._v(" "),s("p",[t._v("If a "),s("code",[t._v("locale")]),t._v(" is given containing a territory and an optional dialect, the implicit fallback is activated automatically.")]),t._v(" "),s("p",[t._v("For example "),s("code",[t._v("de-DE-bavarian")]),t._v(" would fallback")]),t._v(" "),s("ol",[s("li",[s("code",[t._v("de-DE-bavarian")])]),t._v(" "),s("li",[s("code",[t._v("de-DE")])]),t._v(" "),s("li",[s("code",[t._v("de")])])]),t._v(" "),s("p",[t._v("To suppress the automatic fallback, add the postfix exclamation mark "),s("code",[t._v("!")]),t._v(", for example "),s("code",[t._v("de-DE!")])]),t._v(" "),s("h2",{attrs:{id:"explicit-fallback-with-one-locale"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#explicit-fallback-with-one-locale"}},[t._v("#")]),t._v(" Explicit fallback with one locale")]),t._v(" "),s("p",[t._v("Sometimes some items will not be translated into some languages. In this example, the item "),s("code",[t._v("hello")]),t._v(" is available in English but not Japanese:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Hello, world!'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Localization without translation to `hello`")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("If you want to use (say) "),s("code",[t._v("en")]),t._v(" items when an item is not available in your desired locale, set the "),s("code",[t._v("fallbackLocale")]),t._v(" option in the VueI18n constructor:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ja'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallbackLocale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("Template:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('hello') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Output:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Hello, world!"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("By default, falling back to "),s("code",[t._v("fallbackLocale")]),t._v(" generates two console warnings:")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("[vue-i18n] Value of key 'hello' is not a string!\n[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.\n")])])]),s("p",[t._v("To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set "),s("code",[t._v("silentFallbackWarn: true")]),t._v(" when initializing the "),s("code",[t._v("VueI18n")]),t._v(" instance.")]),t._v(" "),s("h2",{attrs:{id:"explicit-fallback-with-an-array-of-locales"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#explicit-fallback-with-an-array-of-locales"}},[t._v("#")]),t._v(" Explicit fallback with an array of locales")]),t._v(" "),s("p",[t._v("It is possible to set more than one fallback locale by using an array of locales. For example")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallbackLocale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fr'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("h2",{attrs:{id:"explicit-fallback-with-decision-maps"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#explicit-fallback-with-decision-maps"}},[t._v("#")]),t._v(" Explicit fallback with decision maps")]),t._v(" "),s("p",[t._v("If more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales.\nUsing the following decision map")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallbackLocale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 1 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'de-CH'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fr'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'it'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 2 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-Hant'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'zh-Hans'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 3 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'es-CL'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'es-AR'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 4 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'es'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-GB'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 5 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'pt'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'es-AR'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* 6 */")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'da'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),s("p",[t._v("will result in the following fallback chains")]),t._v(" "),s("table",[s("thead",[s("tr",[s("th",[t._v("locale")]),t._v(" "),s("th",[t._v("fallback chains")])])]),t._v(" "),s("tbody",[s("tr",[s("td",[s("code",[t._v("'de-CH'")])]),t._v(" "),s("td",[t._v("de-CH > fr > it > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'de'")])]),t._v(" "),s("td",[t._v("de > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'zh-Hant'")])]),t._v(" "),s("td",[t._v("zh-Hant > zh-Hans > zh > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'es-SP'")])]),t._v(" "),s("td",[t._v("es-SP > es > en-GB > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'es-SP!'")])]),t._v(" "),s("td",[t._v("es-SP > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'fr'")])]),t._v(" "),s("td",[t._v("fr > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'pt-BR'")])]),t._v(" "),s("td",[t._v("pt-BR > pt > es-AR > es > en-GB > en > da")])]),t._v(" "),s("tr",[s("td",[s("code",[t._v("'es-CL'")])]),t._v(" "),s("td",[t._v("es-CL > es-AR > es > en-GB > en > da")])])])]),t._v(" "),s("h2",{attrs:{id:"fallback-interpolation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#fallback-interpolation"}},[t._v("#")]),t._v(" Fallback interpolation")]),t._v(" "),s("p",[s("em",[t._v("Summary: Set "),s("code",[t._v("formatFallbackMessages: true")]),t._v(" to do template interpolation on translation keys when your language lacks a translation for a key.")])]),t._v(" "),s("p",[t._v("Since the keys to the translations are strings, you can use a user-readable message (for a particular language) as a key.\nE.g.")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'Hello, world!'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'こんにちは、世界!'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v('This is useful because you don\'t have to specify a translation for the string "Hello, world!" into English.')]),t._v(" "),s("p",[t._v("In fact, you can even include template parameters in a key. Together with "),s("code",[t._v("formatFallbackMessages: true")]),t._v(', this lets you skip writing templates for your "base" language; the keys '),s("em",[t._v("are")]),t._v(" your templates.")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ru")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'Hello {name}'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Здравствуйте {name}'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ru'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallbackLocale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("formatFallbackMessages")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("When the template is as below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('Hello {name}', { name: 'John' }}) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("The following will be output:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Здравствуйте, John"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("The weather today is sunny!"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/15.c5df7d85.js b/assets/js/15.c5df7d85.js new file mode 100644 index 000000000..ffd9b8af6 --- /dev/null +++ b/assets/js/15.c5df7d85.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{466:function(t,s,a){"use strict";a.r(s);var n=a(44),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatting"}},[t._v("#")]),t._v(" Formatting")]),t._v(" "),a("h2",{attrs:{id:"named-formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#named-formatting"}},[t._v("#")]),t._v(" Named formatting")]),t._v(" "),a("p",[t._v("Locale messages:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{msg} world'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.hello', { msg: 'hello' }) }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello world"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"list-formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#list-formatting"}},[t._v("#")]),t._v(" List formatting")]),t._v(" "),a("p",[t._v("Locale messages:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'{0} world'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.hello', ['hello']) }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello world"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("List formatting also accepts array-like objects:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.hello', {'0': 'hello'}) }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello world"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"html-formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#html-formatting"}},[t._v("#")]),t._v(" HTML formatting")]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Notice")]),t._v(" "),a("p",[t._v("⚠️ Dynamically localizing arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.")]),t._v(" "),a("p",[t._v("We recommended using the "),a("RouterLink",{attrs:{to:"/guide/interpolation.html"}},[t._v("component interpolation")]),t._v(" feature.")],1)]),t._v(" "),a("div",{staticClass:"custom-block warning"},[a("p",{staticClass:"custom-block-title"},[t._v("Notice")]),t._v(" "),a("blockquote",[a("p",[t._v("🆕 8.11+")])]),t._v(" "),a("p",[t._v("You can control the use of HTML formatting. see the detail "),a("code",[t._v("warnHtmlInMessage")]),t._v(" constructor option and property API.")])]),t._v(" "),a("p",[t._v("In some cases you might want to render your translation as an HTML message and not a static string.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello
world'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-html")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("message.hello"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output (instead of the pre-formatted message )")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!--
exists but is rendered as html and not a string--\x3e")]),t._v("\nworld"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"support-ruby-on-rails-i18n-format"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#support-ruby-on-rails-i18n-format"}},[t._v("#")]),t._v(" Support ruby on rails i18n format")]),t._v(" "),a("p",[t._v("Locale messages:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("hello")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'%{msg} world'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.hello', { msg: 'hello' }) }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello world"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"custom-formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-formatting"}},[t._v("#")]),t._v(" Custom formatting")]),t._v(" "),a("p",[t._v("Sometimes, you may need to translate using custom formatting (e.g. "),a("a",{attrs:{href:"http://userguide.icu-project.org/formatparse/messages",target:"_blank",rel:"noopener noreferrer"}},[t._v("ICU message syntax"),a("OutboundLink")],1),t._v(").")]),t._v(" "),a("p",[t._v("You can do that with a custom formatter that implements the "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/blob/dev/decls/i18n.js#L145-L147",target:"_blank",rel:"noopener noreferrer"}},[t._v("Formatter Interface"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("The following custom formatter with ES2015 class syntax:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Custom Formatter implementation")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomFormatter")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("constructor")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// interpolate")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @param {string} message")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// string of list or named format.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e.g.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - named formatting: 'Hi {name}'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - list formatting: 'Hi {0}'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @param {Object | Array} values")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// values of `message` interpolation.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// passed values with `$t`, `$tc` and `i18n` functional component.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// e.g.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - $t('hello', { name: 'kazupon' }) -> passed values: Object `{ name: 'kazupon' }`")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - $t('hello', ['kazupon']) -> passed values: Array `['kazupon']`")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - `i18n` functional component (component interpolation)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// ')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//

kazupon

")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//

how are you?

")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// -> passed values: Array (included VNode):")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// @return {Array}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// interpolated values. you need to return the following:")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - array of string, when is using `$t` or `$tc`.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// - array included VNode object, when is using `i18n` functional component.")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("interpolate")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("message"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" values")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// implement interpolation logic here")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// return the interpolated array")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'resolved message string'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// register with `formatter` option")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en-US'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("formatter")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CustomFormatter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* here the constructor options */")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Run!")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("You can check "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/tree/dev/examples/formatting/custom",target:"_blank",rel:"noopener noreferrer"}},[t._v("the custom formatter official example"),a("OutboundLink")],1),t._v(".")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/16.65c98bce.js b/assets/js/16.65c98bce.js new file mode 100644 index 000000000..1db024817 --- /dev/null +++ b/assets/js/16.65c98bce.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{469:function(t,s,a){"use strict";a.r(s);var n=a(44),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"hot-reloading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hot-reloading"}},[t._v("#")]),t._v(" Hot reloading")]),t._v(" "),a("p",[t._v("You can use Webpack's "),a("a",{attrs:{href:"https://webpack.js.org/concepts/hot-module-replacement/",target:"_blank",rel:"noopener noreferrer"}},[t._v("Hot Module Replacement"),a("OutboundLink")],1),t._v(" (HMR) feature to watch for changes in localization files and hot reload changes into your application.")]),t._v(" "),a("h2",{attrs:{id:"basic-example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-example"}},[t._v("#")]),t._v(" Basic example")]),t._v(" "),a("p",[t._v("If you only use a static set of locales, you can hot reload those locales explicitly:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vue"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" VueI18n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vue-i18n"')]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" en "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./en'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" ja "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./ja'")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n en"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n ja\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// VueI18n instance")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Run app")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Hot updates")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hot"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hot"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("accept")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./ja'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ja'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./ja'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Or the following hot updates via $i18n property")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.$i18n.setLocaleMessage('en', require('./en').default)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// app.$i18n.setLocaleMessage('ja', require('./ja').default)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"advanced-example"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-example"}},[t._v("#")]),t._v(" Advanced example")]),t._v(" "),a("p",[t._v("If you want to support a changing set of locales, you can hot reload those locales dynamically using "),a("code",[t._v("require.context")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vue"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" VueI18n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"vue-i18n"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\nVue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("VueI18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Load all locales and remember context")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" context "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" require"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("context")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"./locales"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("true")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("[a-z0-9-_]+\\.json$")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-flags"}},[t._v("i")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" context\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("map")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("key")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("match")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("[a-z0-9-_]+")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-flags"}},[t._v("i")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("reduce")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" locale "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("context")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// VueI18n instance")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"en"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Run app")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" app "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Hot updates")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hot"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("hot"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("accept")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("context"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" newMessages "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadMessages")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n Object"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("keys")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("newMessages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("filter")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" newMessages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" newMessages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/17.c40a3174.js b/assets/js/17.c40a3174.js new file mode 100644 index 000000000..b00448208 --- /dev/null +++ b/assets/js/17.c40a3174.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{467:function(t,a,s){"use strict";s.r(a);var n=s(44),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"component-interpolation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#component-interpolation"}},[t._v("#")]),t._v(" Component interpolation")]),t._v(" "),s("h2",{attrs:{id:"basic-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[t._v("#")]),t._v(" Basic Usage")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),s("p",[t._v("🆕 7.0+")])]),t._v(" "),s("p",[t._v("Sometimes, we need to localize with a locale message that was included in a HTML tag or component. For example:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("I accept xxx "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/term"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Terms of Service Agreement"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("In the above message, if you use "),s("code",[t._v("$t")]),t._v(", you will probably try to compose the following locale messages:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("term1")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I Accept xxx\\'s'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("term2")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Terms of Service Agreement'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("And your localized template may look like this:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('term1') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/term"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('term2') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Output:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("I accept xxx "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/term"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Terms of Service Agreement"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("This is very cumbersome, and if you configure the "),s("code",[t._v("")]),t._v(" tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with\n"),s("code",[t._v("v-html=\"$t('term')\"")]),t._v(".")]),t._v(" "),s("p",[t._v("You can avoid it using the "),s("code",[t._v("i18n")]),t._v(" functional component. For example:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("term"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("label"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("target")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("_blank"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('tos') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tos")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Term of Service'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("term")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I accept xxx {0}.'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ja")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("tos")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'利用規約'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("term")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'私は xxx の{0}に同意します。'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("url")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/term'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("the following output:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tos"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n I accept xxx "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/term"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("target")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("_blank"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Term of Service"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(".\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("About the above example, see the "),s("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/tree/dev/examples/interpolation/places",target:"_blank",rel:"noopener noreferrer"}},[t._v("example"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("The children of "),s("code",[t._v("i18n")]),t._v(" functional component are interpolated with locale message of "),s("code",[t._v("path")]),t._v(" prop.")]),t._v(" "),s("p",[t._v("In the above example:")]),t._v(" "),s("div",{pre:!0},[s("p",[s("code",[t._v('{{ $t(\'tos\') }}')])])]),s("p",[t._v("is interpolated with "),s("code",[t._v("term")]),t._v(" locale message.")]),t._v(" "),s("p",[t._v("In the above example, the component interpolation follows the "),s("strong",[t._v("list formatting")]),t._v(". The children of "),s("code",[t._v("i18n")]),t._v(" functional component are interpolated by their order of appearance.")]),t._v(" "),s("p",[t._v("You can choose the root container's node type by specifying a "),s("code",[t._v("tag")]),t._v(" prop. If omitted, it defaults to "),s("code",[t._v("'span'")]),t._v(". You can also set it to the boolean value "),s("code",[t._v("false")]),t._v(" to insert the child nodes directly without creating a root element.")]),t._v(" "),s("h2",{attrs:{id:"slots-syntax-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#slots-syntax-usage"}},[t._v("#")]),t._v(" Slots syntax usage")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),s("p",[t._v("🆕 8.14+")])]),t._v(" "),s("p",[t._v("It's more convenient to use the named slots syntax. For example:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("p"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("limit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ changeLimit }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('change') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'You can {action} until {limit} minutes from departure.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("change")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change your flight'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("refund")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'refund the ticket'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("changeUrl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/change'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("refundUrl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/refund'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("changeLimit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("refundLimit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("Outputs:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n You can "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/change"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("change your flight"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(" until "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("15"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(" minutes from departure.\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("In Vue 2.6 and later, you can use the following slots syntax in templates:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("p"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#limit")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ changeLimit }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("#action")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('change') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Limitation")]),t._v(" "),s("p",[t._v("⚠️ In "),s("code",[t._v("i18n")]),t._v(" component, slots props are not supported.")])]),t._v(" "),s("h2",{attrs:{id:"places-syntax-usage"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#places-syntax-usage"}},[t._v("#")]),t._v(" Places syntax usage")]),t._v(" "),s("div",{staticClass:"custom-block danger"},[s("p",{staticClass:"custom-block-title"},[t._v("Important!!")]),t._v(" "),s("p",[t._v("In the next major version, the "),s("code",[t._v("place")]),t._v(" and "),s("code",[t._v("places")]),t._v(" props will be deprecated. Please switch to slots syntax.")])]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),s("p",[t._v("🆕 7.2+")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Notice")]),t._v(" "),s("p",[t._v("⚠️ In "),s("code",[t._v("i18n")]),t._v(" component, text content consisting of only white spaces will be omitted.")])]),t._v(" "),s("p",[t._v("Named formatting is supported with the help of "),s("code",[t._v("place")]),t._v(" attribute. For example:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("p"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("place")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("limit"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ changeLimit }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("place")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("changeUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('change') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("info")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'You can {action} until {limit} minutes from departure.'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("change")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'change your flight'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("refund")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'refund the ticket'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("data")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("changeUrl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/change'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("refundUrl")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/refund'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("changeLimit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("15")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("refundLimit")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("30")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("Outputs:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n You can "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/change"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("change your flight"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(" until "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("15"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(" minutes from departure.\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Notice")]),t._v(" "),s("p",[t._v("⚠️ To use named formatting, all children of "),s("code",[t._v("i18n")]),t._v(" component must have "),s("code",[t._v("place")]),t._v(" attribute set. Otherwise it will fallback to list formatting.")])]),t._v(" "),s("p",[t._v("If you still want to interpolate text content in named formatting, you could define "),s("code",[t._v("places")]),t._v(" property on "),s("code",[t._v("i18n")]),t._v(" component. For example:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("path")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("info"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("tag")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("p"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":places")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{ limit: refundLimit }"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("place")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("action"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("refundUrl"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('refund') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Outputs:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n You can "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("a")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("href")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("/refund"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("refund your ticket"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(" until 30 minutes from departure.\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- ... --\x3e")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/18.800c38cb.js b/assets/js/18.800c38cb.js new file mode 100644 index 000000000..1db66fd9f --- /dev/null +++ b/assets/js/18.800c38cb.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{465:function(t,s,a){"use strict";a.r(s);var n=a(44),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"lazy-loading-translations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#lazy-loading-translations"}},[t._v("#")]),t._v(" Lazy loading translations")]),t._v(" "),a("p",[t._v("Loading all of your translation files at once is overkill and unnecessary.")]),t._v(" "),a("p",[t._v("Lazy loading or asynchronously loading the translation files is really easy when using Webpack.")]),t._v(" "),a("p",[t._v("Let´s assume we have a project directory similar to the one below:")]),t._v(" "),a("div",{staticClass:"language- extra-class"},[a("pre",{pre:!0,attrs:{class:"language-text"}},[a("code",[t._v("our-cool-project\n-dist\n-src\n--routes\n--store\n--setup\n---i18n-setup.js\n--lang\n---en.js\n---it.js\n")])])]),a("p",[t._v("The "),a("code",[t._v("lang")]),t._v(" folder is where all of our translation files reside. The "),a("code",[t._v("setup")]),t._v(" folder is where our arbitrary setup files like the i18n-setup, global component inits, plugin inits and other reside.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//i18n-setup.js")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" VueI18n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-i18n'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@/lang/en'")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" axios "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'axios'")]),t._v("\n\nVue"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("VueI18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// set locale")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("fallbackLocale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n messages "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// set locale messages")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" loadedLanguages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// our default language that is preloaded")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setI18nLanguage")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("lang")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" lang\n axios"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("defaults"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("headers"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("common"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Accept-Language'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" lang\n document"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("querySelector")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'html'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setAttribute")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'lang'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" lang\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadLanguageAsync")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("lang")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If the same language")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" Promise"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setI18nLanguage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If the language was already loaded")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("loadedLanguages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("includes")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" Promise"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("resolve")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setI18nLanguage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// If the language hasn't been loaded yet")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('/* webpackChunkName: "lang-[request]" */')]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("@/lang/")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v(".js")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("messages")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setLocaleMessage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" messages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("default"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n loadedLanguages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("push")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("setI18nLanguage")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("In short we are creating a new VueI18n instance as we normally would. Then we are creating a "),a("code",[t._v("loadedLanguages")]),t._v(" array that will keep track of our loaded languages. Next is the "),a("code",[t._v("setI18nLanguage")]),t._v(" function that will actually change the language in our vueI18n instance, axios and where ever else is needed.")]),t._v(" "),a("p",[t._v("The "),a("code",[t._v("loadLanguageAsync")]),t._v(" function is what we will actually use to change the languages. Loading the new files is done via the "),a("code",[t._v("import")]),t._v(" function, which is generously provided by Webpack and it allows us to load files dynamically, and because it uses promises we can easily wait for the loading to finish.")]),t._v(" "),a("p",[t._v("You can learn more about the import function in the "),a("a",{attrs:{href:"https://webpack.js.org/guides/code-splitting/#dynamic-imports",target:"_blank",rel:"noopener noreferrer"}},[t._v("Webpack documentation"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("p",[t._v("Using the "),a("code",[t._v("loadLanguageAsync")]),t._v(" function is straightforward. A common use case is inside a vue-router beforeEach hook.")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("router"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("beforeEach")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("to"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" from"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" lang "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" to"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("params"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("lang\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loadLanguageAsync")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("lang"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("then")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("next")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("We could improve this by checking if the "),a("code",[t._v("lang")]),t._v(" is actually supported by us or not, call "),a("code",[t._v("reject")]),t._v(" so we can catch that in the "),a("code",[t._v("beforeEach")]),t._v(" stopping the route transition.")])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/19.f25e213e.js b/assets/js/19.f25e213e.js new file mode 100644 index 000000000..8fb9f2539 --- /dev/null +++ b/assets/js/19.f25e213e.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{468:function(t,a,s){"use strict";s.r(a);var n=s(44),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"locale-changing"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#locale-changing"}},[t._v("#")]),t._v(" Locale changing")]),t._v(" "),s("p",[t._v("Normally, using the root Vue instance as the starting point, all child components are localized using the "),s("code",[t._v("locale")]),t._v(" property of the "),s("code",[t._v("VueI18n")]),t._v(" class as a reference.")]),t._v(" "),s("p",[t._v("Sometimes you might want to dynamically change the locale. In that case you can change the value of the "),s("code",[t._v("locale")]),t._v(" property of the "),s("code",[t._v("VueI18n")]),t._v(" instance.")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ja'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// set locale")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// create root Vue instance")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// change other locale")]),t._v("\ni18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),t._v("\n")])])]),s("p",[t._v("Each component contains a "),s("code",[t._v("VueI18n")]),t._v(" instance referenced as the "),s("code",[t._v("$i18n")]),t._v(" property that can also be used to change the locale.")]),t._v(" "),s("p",[t._v("Example:")]),t._v(" "),s("div",{staticClass:"language-vue extra-class"},[s("pre",{pre:!0,attrs:{class:"language-vue"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("locale-changer"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("select")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$i18n.locale"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-for")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("(lang, i) in langs"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":key")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("`Lang${i}`"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("lang"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n {{ lang }}\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}},[s("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'locale-changer'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("langs")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'ja'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Notice")]),t._v(" "),s("p",[t._v("⚠️ Locale changing is ignored for components that use "),s("code",[t._v("sync: false")]),t._v(".")])]),t._v(" "),s("div",{staticClass:"custom-block warning"},[s("p",{staticClass:"custom-block-title"},[t._v("Component vs. root scope")]),t._v(" "),s("p",[t._v("⚠️ Changing "),s("code",[t._v("$i18n.locale")]),t._v(" inside a component does not update the root locale.\nIf you rely on the root locale, for example when using "),s("RouterLink",{attrs:{to:"/guide/fallback.html"}},[t._v("root fallbacks")]),t._v(", use "),s("code",[t._v("$root.$i18n.locale")]),t._v(" instead of "),s("code",[t._v("$i18n.locale")]),t._v(".")],1)])])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/2.6307267c.js b/assets/js/2.6307267c.js new file mode 100644 index 000000000..b188ebd08 --- /dev/null +++ b/assets/js/2.6307267c.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{314:function(t,e,n){"use strict";n.d(e,"d",(function(){return i})),n.d(e,"a",(function(){return a})),n.d(e,"i",(function(){return s})),n.d(e,"f",(function(){return u})),n.d(e,"g",(function(){return l})),n.d(e,"h",(function(){return c})),n.d(e,"b",(function(){return h})),n.d(e,"e",(function(){return f})),n.d(e,"k",(function(){return p})),n.d(e,"l",(function(){return d})),n.d(e,"c",(function(){return v})),n.d(e,"j",(function(){return m}));n(29),n(99),n(169),n(102),n(176),n(71),n(45),n(316),n(72),n(336),n(101);var i=/#.*$/,r=/\.(md|html)$/,a=/\/$/,s=/^[a-z]+:/i;function o(t){return decodeURI(t).replace(i,"").replace(r,"")}function u(t){return s.test(t)}function l(t){return/^mailto:/.test(t)}function c(t){return/^tel:/.test(t)}function h(t){if(u(t))return t;var e=t.match(i),n=e?e[0]:"",r=o(t);return a.test(r)?t:r+".html"+n}function f(t,e){var n=decodeURIComponent(t.hash),r=function(t){var e=t.match(i);if(e)return e[0]}(e);return(!r||n===r)&&o(t.path)===o(e)}function p(t,e,n){if(u(e))return{type:"external",path:e};n&&(e=function(t,e,n){var i=t.charAt(0);if("/"===i)return t;if("?"===i||"#"===i)return e+t;var r=e.split("/");n&&r[r.length-1]||r.pop();for(var a=t.replace(/^\//,"").split("/"),s=0;s3&&void 0!==arguments[3]?arguments[3]:1;if("string"==typeof e)return p(n,e,i);if(Array.isArray(e))return Object.assign(p(n,e[0],i),{title:e[1]});var a=e.children||[];return 0===a.length&&e.path?Object.assign(p(n,e.path,i),{title:e.title}):{type:"group",path:e.path,title:e.title,sidebarDepth:e.sidebarDepth,initialOpenGroupIndex:e.initialOpenGroupIndex,children:a.map((function(e){return t(e,n,i,r+1)})),collapsable:!1!==e.collapsable}}(t,r,l)})):[]}return[]}function g(t){var e=v(t.headers||[]);return[{type:"group",collapsable:!1,title:t.title,path:null,children:e.map((function(e){return{type:"auto",title:e.title,basePath:t.path,path:t.path+"#"+e.slug,children:e.children||[]}}))}]}function v(t){var e;return(t=t.map((function(t){return Object.assign({},t)}))).forEach((function(t){2===t.level?e=t:e&&(e.children||(e.children=[])).push(t)})),t.filter((function(t){return 2===t.level}))}function m(t){return Object.assign(t,{type:t.items&&t.items.length?"links":"link"})}},316:function(t,e,n){"use strict";var i=n(172),r=n(5),a=n(12),s=n(18),o=n(22),u=n(173),l=n(174);i("match",(function(t,e,n){return[function(e){var n=o(this),i=null==e?void 0:e[t];return void 0!==i?i.call(e,n):new RegExp(e)[t](s(n))},function(t){var i=r(this),o=s(t),c=n(e,i,o);if(c.done)return c.value;if(!i.global)return l(i,o);var h=i.unicode;i.lastIndex=0;for(var f,p=[],d=0;null!==(f=l(i,o));){var g=s(f[0]);p[d]=g,""===g&&(i.lastIndex=u(o,a(i.lastIndex),h)),d++}return 0===d?null:p}]}))},317:function(t,e,n){},318:function(t,e){t.exports="\t\n\v\f\r                　\u2028\u2029\ufeff"},319:function(t,e,n){},320:function(t,e,n){},321:function(t,e,n){},322:function(t,e,n){},323:function(t,e,n){},324:function(t,e,n){},325:function(t,e,n){},326:function(t,e,n){},327:function(t,e,n){},328:function(t,e,n){},329:function(t,e,n){},330:function(t,e,n){},336:function(t,e,n){"use strict";var i=n(172),r=n(170),a=n(5),s=n(22),o=n(106),u=n(173),l=n(12),c=n(18),h=n(174),f=n(74),p=n(171),d=n(1),g=p.UNSUPPORTED_Y,v=[].push,m=Math.min;i("split",(function(t,e,n){var i;return i="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var i=c(s(this)),a=void 0===n?4294967295:n>>>0;if(0===a)return[];if(void 0===t)return[i];if(!r(t))return e.call(i,t,a);for(var o,u,l,h=[],p=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),d=0,g=new RegExp(t.source,p+"g");(o=f.call(g,i))&&!((u=g.lastIndex)>d&&(h.push(i.slice(d,o.index)),o.length>1&&o.index=a));)g.lastIndex===o.index&&g.lastIndex++;return d===i.length?!l&&g.test("")||h.push(""):h.push(i.slice(d)),h.length>a?h.slice(0,a):h}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var r=s(this),a=null==e?void 0:e[t];return void 0!==a?a.call(e,r,n):i.call(c(r),e,n)},function(t,r){var s=a(this),f=c(t),p=n(i,s,f,r,i!==e);if(p.done)return p.value;var d=o(s,RegExp),v=s.unicode,b=(s.ignoreCase?"i":"")+(s.multiline?"m":"")+(s.unicode?"u":"")+(g?"g":"y"),k=new d(g?"^(?:"+s.source+")":s,b),_=void 0===r?4294967295:r>>>0;if(0===_)return[];if(0===f.length)return null===h(k,f)?[f]:[];for(var x=0,C=0,y=[];C@^][^\s!#%&*+<=>@^]*>/,w=/a/g,O=/a/g,S=new y(w)!==w,I=p.UNSUPPORTED_Y,E=i&&(!S||I||_||x||g((function(){return O[C]=!1,y(w)!=w||y(O)==O||"/a/i"!=y(w,"i")})));if(a("RegExp",E)){for(var j=function(t,e){var n,i,r,a,u,l,p=this instanceof j,d=c(t),g=void 0===e,b=[],k=t;if(!p&&d&&g&&t.constructor===j)return t;if((d||t instanceof j)&&(t=t.source,g&&(e="flags"in k?k.flags:f.call(k))),t=void 0===t?"":h(t),e=void 0===e?"":h(e),k=t,_&&"dotAll"in w&&(i=!!e&&e.indexOf("s")>-1)&&(e=e.replace(/s/g,"")),n=e,I&&"sticky"in w&&(r=!!e&&e.indexOf("y")>-1)&&(e=e.replace(/y/g,"")),x&&(t=(a=function(t){for(var e,n=t.length,i=0,r="",a=[],s={},o=!1,u=!1,l=0,c="";i<=n;i++){if("\\"===(e=t.charAt(i)))e+=t.charAt(++i);else if("]"===e)o=!1;else if(!o)switch(!0){case"["===e:o=!0;break;case"("===e:L.test(t.slice(i+1))&&(i+=2,u=!0),r+=e,l++;continue;case">"===e&&u:if(""===c||v(s,c))throw new SyntaxError("Invalid capture group name");s[c]=!0,a.push([c,l]),u=!1,c="";continue}u?c+=e:r+=e}return[r,a]}(t))[0],b=a[1]),u=s(y(t,e),p?this:$,j),(i||r||b.length)&&(l=m(u),i&&(l.dotAll=!0,l.raw=j(function(t){for(var e,n=t.length,i=0,r="",a=!1;i<=n;i++)"\\"!==(e=t.charAt(i))?a||"."!==e?("["===e?a=!0:"]"===e&&(a=!1),r+=e):r+="[\\s\\S]":r+=e+t.charAt(++i);return r}(t),n)),r&&(l.sticky=!0),b.length&&(l.groups=b)),t!==k)try{o(u,"source",""===k?"(?:)":k)}catch(t){}return u},A=function(t){t in j||u(j,t,{configurable:!0,get:function(){return y[t]},set:function(e){y[t]=e}})},N=l(y),T=0;N.length>T;)A(N[T++]);$.constructor=j,j.prototype=$,d(r,"RegExp",j)}b("RegExp")},340:function(t,e){t.exports=function(t){return null==t}},341:function(t,e,n){"use strict";n.r(e);n(98);var i=n(314),r={name:"SidebarGroup",components:{DropdownTransition:n(342).a},props:["item","open","collapsable","depth"],beforeCreate:function(){this.$options.components.SidebarLinks=n(341).default},methods:{isActive:i.e}},a=(n(363),n(44)),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"sidebar-group",class:[{collapsable:t.collapsable,"is-sub-group":0!==t.depth},"depth-"+t.depth]},[t.item.path?n("RouterLink",{staticClass:"sidebar-heading clickable",class:{open:t.open,active:t.isActive(t.$route,t.item.path)},attrs:{to:t.item.path},nativeOn:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]):n("p",{staticClass:"sidebar-heading",class:{open:t.open},on:{click:function(e){return t.$emit("toggle")}}},[n("span",[t._v(t._s(t.item.title))]),t._v(" "),t.collapsable?n("span",{staticClass:"arrow",class:t.open?"down":"right"}):t._e()]),t._v(" "),n("DropdownTransition",[t.open||!t.collapsable?n("SidebarLinks",{staticClass:"sidebar-group-items",attrs:{items:t.item.children,"sidebar-depth":t.item.sidebarDepth,"initial-open-group-index":t.item.initialOpenGroupIndex,depth:t.depth+1}}):t._e()],1)],1)}),[],!1,null,null,null).exports;n(364),n(71);function o(t,e,n,i,r){var a={props:{to:e,activeClass:"",exactActiveClass:""},class:{active:i,"sidebar-link":!0}};return r>2&&(a.style={"padding-left":r+"rem"}),t("RouterLink",a,n)}function u(t,e,n,r,a){var s=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1;return!e||s>a?null:t("ul",{class:"sidebar-sub-headers"},e.map((function(e){var l=Object(i.e)(r,n+"#"+e.slug);return t("li",{class:"sidebar-sub-header"},[o(t,n+"#"+e.slug,e.title,l,e.level-1),u(t,e.children,n,r,a,s+1)])})))}var l={functional:!0,props:["item","sidebarDepth"],render:function(t,e){var n=e.parent,r=n.$page,a=(n.$site,n.$route),s=n.$themeConfig,l=n.$themeLocaleConfig,c=e.props,h=c.item,f=c.sidebarDepth,p=Object(i.e)(a,h.path),d="auto"===h.type?p||h.children.some((function(t){return Object(i.e)(a,h.basePath+"#"+t.slug)})):p,g="external"===h.type?function(t,e,n){return t("a",{attrs:{href:e,target:"_blank",rel:"noopener noreferrer"},class:{"sidebar-link":!0}},[n,t("OutboundLink")])}(t,h.path,h.title||h.path):o(t,h.path,h.title||h.path,d),v=[r.frontmatter.sidebarDepth,f,l.sidebarDepth,s.sidebarDepth,1].find((function(t){return void 0!==t})),m=l.displayAllHeaders||s.displayAllHeaders;return"auto"===h.type?[g,u(t,h.children,h.basePath,a,v)]:(d||m)&&h.headers&&!i.d.test(h.path)?[g,u(t,Object(i.c)(h.headers),h.path,a,v)]:g}};n(365);function c(t,e){if("group"===e.type){var n=e.path&&Object(i.e)(t,e.path),r=e.children.some((function(e){return"group"===e.type?c(t,e):"page"===e.type&&Object(i.e)(t,e.path)}));return n||r}return!1}var h={name:"SidebarLinks",components:{SidebarGroup:s,SidebarLink:Object(a.a)(l,void 0,void 0,!1,null,null,null).exports},props:["items","depth","sidebarDepth","initialOpenGroupIndex"],data:function(){return{openGroupIndex:this.initialOpenGroupIndex||0}},watch:{$route:function(){this.refreshIndex()}},created:function(){this.refreshIndex()},methods:{refreshIndex:function(){var t=function(t,e){for(var n=0;n-1&&(this.openGroupIndex=t)},toggleGroup:function(t){this.openGroupIndex=t===this.openGroupIndex?-1:t},isActive:function(t){return Object(i.e)(this.$route,t.regularPath)}}},f=Object(a.a)(h,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.items.length?n("ul",{staticClass:"sidebar-links"},t._l(t.items,(function(e,i){return n("li",{key:i},["group"===e.type?n("SidebarGroup",{attrs:{item:e,open:i===t.openGroupIndex,collapsable:e.collapsable||e.collapsible,depth:t.depth},on:{toggle:function(e){return t.toggleGroup(i)}}}):n("SidebarLink",{attrs:{"sidebar-depth":t.sidebarDepth,item:e}})],1)})),0):t._e()}),[],!1,null,null,null);e.default=f.exports},342:function(t,e,n){"use strict";var i={name:"DropdownTransition",methods:{setHeight:function(t){t.style.height=t.scrollHeight+"px"},unsetHeight:function(t){t.style.height=""}}},r=(n(355),n(44)),a=Object(r.a)(i,(function(){var t=this.$createElement;return(this._self._c||t)("transition",{attrs:{name:"dropdown"},on:{enter:this.setHeight,"after-enter":this.unsetHeight,"before-leave":this.setHeight}},[this._t("default")],2)}),[],!1,null,null,null);e.a=a.exports},344:function(t,e,n){"use strict";var i=n(0),r=n(345);i({target:"String",proto:!0,forced:n(346)("link")},{link:function(t){return r(this,"a","href",t)}})},345:function(t,e,n){var i=n(22),r=n(18),a=/"/g;t.exports=function(t,e,n,s){var o=r(i(t)),u="<"+e;return""!==n&&(u+=" "+n+'="'+r(s).replace(a,""")+'"'),u+">"+o+""}},346:function(t,e,n){var i=n(1);t.exports=function(t){return i((function(){var e=""[t]('"');return e!==e.toLowerCase()||e.split('"').length>3}))}},347:function(t,e,n){"use strict";var i=n(317);n.n(i).a},348:function(t,e,n){var i=n(0),r=n(349);i({global:!0,forced:parseInt!=r},{parseInt:r})},349:function(t,e,n){var i=n(3),r=n(18),a=n(337).trim,s=n(318),o=i.parseInt,u=/^[+-]?0[Xx]/,l=8!==o(s+"08")||22!==o(s+"0x16");t.exports=l?function(t,e){var n=a(r(t));return o(n,e>>>0||(u.test(n)?16:10))}:o},350:function(t,e,n){var i=n(1),r=n(318);t.exports=function(t){return i((function(){return!!r[t]()||"​…᠎"!="​…᠎"[t]()||r[t].name!==t}))}},351:function(t,e,n){var i=n(4),r=n(73);t.exports=function(t,e,n){var a,s;return r&&"function"==typeof(a=e.constructor)&&a!==n&&i(s=a.prototype)&&s!==n.prototype&&r(t,s),t}},352:function(t,e,n){"use strict";var i,r=n(0),a=n(24).f,s=n(12),o=n(18),u=n(107),l=n(22),c=n(108),h=n(19),f="".endsWith,p=Math.min,d=c("endsWith");r({target:"String",proto:!0,forced:!!(h||d||(i=a(String.prototype,"endsWith"),!i||i.writable))&&!d},{endsWith:function(t){var e=o(l(this));u(t);var n=arguments.length>1?arguments[1]:void 0,i=s(e.length),r=void 0===n?i:p(s(n),i),a=o(t);return f?f.call(e,a,r):e.slice(r-a.length,r)===a}})},353:function(t,e,n){"use strict";var i=n(319);n.n(i).a},354:function(t,e,n){"use strict";var i=n(320);n.n(i).a},355:function(t,e,n){"use strict";var i=n(321);n.n(i).a},356:function(t,e,n){"use strict";var i=n(322);n.n(i).a},357:function(t,e,n){"use strict";var i=n(323);n.n(i).a},358:function(t,e,n){"use strict";var i=n(324);n.n(i).a},359:function(t,e,n){"use strict";var i=n(325);n.n(i).a},360:function(t,e,n){var i=n(31),r=n(14),a=n(25);t.exports=function(t){return"string"==typeof t||!r(t)&&a(t)&&"[object String]"==i(t)}},361:function(t,e,n){"use strict";var i=n(326);n.n(i).a},362:function(t,e,n){"use strict";var i=n(327);n.n(i).a},363:function(t,e,n){"use strict";var i=n(328);n.n(i).a},364:function(t,e,n){"use strict";var i=n(0),r=n(30).find,a=n(104),s=!0;"find"in[]&&Array(1).find((function(){s=!1})),i({target:"Array",proto:!0,forced:s},{find:function(t){return r(this,t,arguments.length>1?arguments[1]:void 0)}}),a("find")},365:function(t,e,n){"use strict";var i=n(329);n.n(i).a},366:function(t,e,n){"use strict";var i=n(330);n.n(i).a},373:function(t,e,n){"use strict";n(98),n(100),n(344);var i=n(314),r={name:"NavLink",props:{item:{required:!0}},computed:{link:function(){return Object(i.b)(this.item.link)},exact:function(){var t=this;return this.$site.locales?Object.keys(this.$site.locales).some((function(e){return e===t.link})):"/"===this.link},isNonHttpURI:function(){return Object(i.g)(this.link)||Object(i.h)(this.link)},isBlankTarget:function(){return"_blank"===this.target},isInternal:function(){return!Object(i.f)(this.link)&&!this.isBlankTarget},target:function(){return this.isNonHttpURI?null:this.item.target?this.item.target:Object(i.f)(this.link)?"_blank":""},rel:function(){return this.isNonHttpURI||!1===this.item.rel?null:this.item.rel?this.item.rel:this.isBlankTarget?"noopener noreferrer":null}},methods:{focusoutAction:function(){this.$emit("focusout")}}},a=n(44),s=Object(a.a)(r,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isInternal?n("RouterLink",{staticClass:"nav-link",attrs:{to:t.link,exact:t.exact},nativeOn:{focusout:function(e){return t.focusoutAction(e)}}},[t._v("\n "+t._s(t.item.text)+"\n")]):n("a",{staticClass:"nav-link external",attrs:{href:t.link,target:t.target,rel:t.rel},on:{focusout:t.focusoutAction}},[t._v("\n "+t._s(t.item.text)+"\n "),t.isBlankTarget?n("OutboundLink"):t._e()],1)}),[],!1,null,null,null).exports,o={name:"Home",components:{NavLink:s},computed:{data:function(){return this.$page.frontmatter},actionLink:function(){return{link:this.data.actionLink,text:this.data.actionText}}}},u=(n(347),Object(a.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("main",{staticClass:"home",attrs:{"aria-labelledby":null!==t.data.heroText?"main-title":null}},[n("header",{staticClass:"hero"},[t.data.heroImage?n("img",{attrs:{src:t.$withBase(t.data.heroImage),alt:t.data.heroAlt||"hero"}}):t._e(),t._v(" "),null!==t.data.heroText?n("h1",{attrs:{id:"main-title"}},[t._v("\n "+t._s(t.data.heroText||t.$title||"Hello")+"\n ")]):t._e(),t._v(" "),null!==t.data.tagline?n("p",{staticClass:"description"},[t._v("\n "+t._s(t.data.tagline||t.$description||"Welcome to your VuePress site")+"\n ")]):t._e(),t._v(" "),t.data.actionText&&t.data.actionLink?n("p",{staticClass:"action"},[n("NavLink",{staticClass:"action-button",attrs:{item:t.actionLink}})],1):t._e()]),t._v(" "),t.data.features&&t.data.features.length?n("div",{staticClass:"features"},t._l(t.data.features,(function(e,i){return n("div",{key:i,staticClass:"feature"},[n("h2",[t._v(t._s(e.title))]),t._v(" "),n("p",[t._v(t._s(e.details))])])})),0):t._e(),t._v(" "),n("Content",{staticClass:"theme-default-content custom"}),t._v(" "),t.data.footer?n("div",{staticClass:"footer"},[t._v("\n "+t._s(t.data.footer)+"\n ")]):t._e()],1)}),[],!1,null,null,null).exports),l=(n(348),n(29),n(178),n(169),n(102),n(45),n(181),n(316),n(338),n(176),n(71),n(339),n(103),n(352),n(72),n(336),n(182)),c=n.n(l),h=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,i=c()(e,"title","");return c()(e,"frontmatter.tags")&&(i+=" ".concat(e.frontmatter.tags.join(" "))),n&&(i+=" ".concat(n)),f(t,i)},f=function(t,e){var n=function(t){return t.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")},i=new RegExp("[^\0-]"),r=t.split(/\s+/g).map((function(t){return t.trim()})).filter((function(t){return!!t}));if(i.test(t))return r.some((function(t){return e.toLowerCase().indexOf(t)>-1}));var a=t.endsWith(" ");return new RegExp(r.map((function(t,e){return r.length!==e+1||a?"(?=.*\\b".concat(n(t),"\\b)"):"(?=.*\\b".concat(n(t),")")})).join("")+".+","gi").test(e)},p={name:"SearchBox",data:function(){return{query:"",focused:!1,focusIndex:0,placeholder:void 0}},computed:{showSuggestions:function(){return this.focused&&this.suggestions&&this.suggestions.length},suggestions:function(){var t=this.query.trim().toLowerCase();if(t){for(var e=this.$site.pages,n=this.$site.themeConfig.searchMaxSuggestions||5,i=this.$localePath,r=[],a=0;a=n);a++){var s=e[a];if(this.getPageLocalePath(s)===i&&this.isSearchable(s))if(h(t,s))r.push(s);else if(s.headers)for(var o=0;o=n);o++){var u=s.headers[o];u.title&&h(t,s,u.title)&&r.push(Object.assign({},s,{path:s.path+"#"+u.slug,header:u}))}}return r}},alignRight:function(){return(this.$site.themeConfig.nav||[]).length+(this.$site.repo?1:0)<=2}},mounted:function(){this.placeholder=this.$site.themeConfig.searchPlaceholder||"",document.addEventListener("keydown",this.onHotkey)},beforeDestroy:function(){document.removeEventListener("keydown",this.onHotkey)},methods:{getPageLocalePath:function(t){for(var e in this.$site.locales||{})if("/"!==e&&0===t.path.indexOf(e))return e;return"/"},isSearchable:function(t){var e=null;return null===e||(e=Array.isArray(e)?e:new Array(e)).filter((function(e){return t.path.match(e)})).length>0},onHotkey:function(t){t.srcElement===document.body&&["s","/"].includes(t.key)&&(this.$refs.input.focus(),t.preventDefault())},onUp:function(){this.showSuggestions&&(this.focusIndex>0?this.focusIndex--:this.focusIndex=this.suggestions.length-1)},onDown:function(){this.showSuggestions&&(this.focusIndex "+t._s(e.header.title))]):t._e()])])})),0):t._e()])}),[],!1,null,null,null).exports),g=(n(354),Object(a.a)({},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"sidebar-button",on:{click:function(e){return t.$emit("toggle-sidebar")}}},[n("svg",{staticClass:"icon",attrs:{xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",role:"img",viewBox:"0 0 448 512"}},[n("path",{attrs:{fill:"currentColor",d:"M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"}})])])}),[],!1,null,null,null).exports),v=(n(175),n(42)),m=n(342),b=n(183),k=n.n(b),_={name:"DropdownLink",components:{NavLink:s,DropdownTransition:m.a},props:{item:{required:!0}},data:function(){return{open:!1}},computed:{dropdownAriaLabel:function(){return this.item.ariaLabel||this.item.text}},watch:{$route:function(){this.open=!1}},methods:{setOpen:function(t){this.open=t},isLastItemOfArray:function(t,e){return k()(e)===t},handleDropdown:function(){0===event.detail&&this.setOpen(!this.open)}}},x=(n(356),{name:"NavLinks",components:{NavLink:s,DropdownLink:Object(a.a)(_,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"dropdown-wrapper",class:{open:t.open}},[n("button",{staticClass:"dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:t.handleDropdown}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow down"})]),t._v(" "),n("button",{staticClass:"mobile-dropdown-title",attrs:{type:"button","aria-label":t.dropdownAriaLabel},on:{click:function(e){return t.setOpen(!t.open)}}},[n("span",{staticClass:"title"},[t._v(t._s(t.item.text))]),t._v(" "),n("span",{staticClass:"arrow",class:t.open?"down":"right"})]),t._v(" "),n("DropdownTransition",[n("ul",{directives:[{name:"show",rawName:"v-show",value:t.open,expression:"open"}],staticClass:"nav-dropdown"},t._l(t.item.items,(function(e,i){return n("li",{key:e.link||i,staticClass:"dropdown-item"},["links"===e.type?n("h4",[t._v("\n "+t._s(e.text)+"\n ")]):t._e(),t._v(" "),"links"===e.type?n("ul",{staticClass:"dropdown-subitem-wrapper"},t._l(e.items,(function(i){return n("li",{key:i.link,staticClass:"dropdown-subitem"},[n("NavLink",{attrs:{item:i},on:{focusout:function(n){t.isLastItemOfArray(i,e.items)&&t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0):n("NavLink",{attrs:{item:e},on:{focusout:function(n){t.isLastItemOfArray(e,t.item.items)&&t.setOpen(!1)}}})],1)})),0)])],1)}),[],!1,null,null,null).exports},computed:{userNav:function(){return this.$themeLocaleConfig.nav||this.$site.themeConfig.nav||[]},nav:function(){var t=this,e=this.$site.locales;if(e&&Object.keys(e).length>1){var n=this.$page.path,i=this.$router.options.routes,r=this.$site.themeConfig.locales||{},a={text:this.$themeLocaleConfig.selectText||"Languages",ariaLabel:this.$themeLocaleConfig.ariaLabel||"Select language",items:Object.keys(e).map((function(a){var s,o=e[a],u=r[a]&&r[a].label||o.lang;return o.lang===t.$lang?s=n:(s=n.replace(t.$localeConfig.path,a),i.some((function(t){return t.path===s}))||(s=a)),{text:u,link:s}}))};return[].concat(Object(v.a)(this.userNav),[a])}return this.userNav},userLinks:function(){return(this.nav||[]).map((function(t){return Object.assign(Object(i.j)(t),{items:(t.items||[]).map(i.j)})}))},repoLink:function(){var t=this.$site.themeConfig.repo;return t?/^https?:/.test(t)?t:"https://github.com/".concat(t):null},repoLabel:function(){if(this.repoLink){if(this.$site.themeConfig.repoLabel)return this.$site.themeConfig.repoLabel;for(var t=this.repoLink.match(/^https?:\/\/[^/]+/)[0],e=["GitHub","GitLab","Bitbucket"],n=0;nMath.abs(n)&&Math.abs(e)>40&&(e>0&&this.touchStart.x<=80?this.toggleSidebar(!0):this.toggleSidebar(!1))}}}),G=Object(a.a)(W,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"theme-container",class:t.pageClasses,on:{touchstart:t.onTouchStart,touchend:t.onTouchEnd}},[t.shouldShowNavbar?n("Navbar",{on:{"toggle-sidebar":t.toggleSidebar}}):t._e(),t._v(" "),n("div",{staticClass:"sidebar-mask",on:{click:function(e){return t.toggleSidebar(!1)}}}),t._v(" "),n("Sidebar",{attrs:{items:t.sidebarItems},on:{"toggle-sidebar":t.toggleSidebar},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("sidebar-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("sidebar-bottom")]},proxy:!0}],null,!0)}),t._v(" "),t.$page.frontmatter.home?n("Home"):n("Page",{attrs:{"sidebar-items":t.sidebarItems},scopedSlots:t._u([{key:"top",fn:function(){return[t._t("page-top")]},proxy:!0},{key:"bottom",fn:function(){return[t._t("page-bottom")]},proxy:!0}],null,!0)})],1)}),[],!1,null,null,null);e.a=G.exports}}]); \ No newline at end of file diff --git a/assets/js/20.7d9d9bba.js b/assets/js/20.7d9d9bba.js new file mode 100644 index 000000000..a08e1b902 --- /dev/null +++ b/assets/js/20.7d9d9bba.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{470:function(t,s,a){"use strict";a.r(s);var e=a(44),n=Object(e.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"locale-messages-syntax"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#locale-messages-syntax"}},[t._v("#")]),t._v(" Locale messages syntax")]),t._v(" "),a("h2",{attrs:{id:"structure"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#structure"}},[t._v("#")]),t._v(" Structure")]),t._v(" "),a("p",[t._v("Locale Messages syntax below:")]),t._v(" "),a("div",{staticClass:"language-typescript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-typescript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// As Flowtype definition, Locale Messages syntax like BNF annotation")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LocaleMessages")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessageObject "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LocaleMessageObject")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Path"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessage "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LocaleMessageArray")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" LocaleMessage"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MessageContext")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("list")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("index"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("number")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" mixed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("named")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" mixed"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("linked")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("key"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" TranslateResult"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n values"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("any")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: not compatible for vue-i18n@v9.x")]),t._v("\n path"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: not compatible for vue-i18n@v9.x")]),t._v("\n formatter"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Formatter"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: not compatible for vue-i18n@v9.x")]),t._v("\n messages"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" LocaleMessages"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: not compatible for vue-i18n@v9.x")]),t._v("\n locale"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" Locale "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// NOTE: not compatible for vue-i18n@v9.x")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MessageFunction")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("ctx"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" MessageContext"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LocaleMessage")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" MessageFunction "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" LocaleMessageObject "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("|")]),t._v(" LocaleMessageArray"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Locale")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("type")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Path")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token builtin"}},[t._v("string")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("Based on the above syntax, You can configure the following Locale Messages structure:")]),t._v(" "),a("div",{staticClass:"language-json extra-class"},[a("pre",{pre:!0,attrs:{class:"language-json"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"en"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'en' Locale")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"key1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"this is message1"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// basic")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"nested"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// nested")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"message1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"this is nested message1"')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"errors"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// array")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"this is 0 error code message"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// object in array")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"internal1"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"this is internal 1 error message"')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// array in array")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"this is nested array error 1"')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v('"ja"')]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 'ja' Locale")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("In the above Locale Messages structure, You can translate using below key paths.")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- basic --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('key1') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- nested --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('nested.message1') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- array --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('errors[0]') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- object in array --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('errors[1].internal1') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- array in array --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('errors[2][0]') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output the following:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- basic --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is message1"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- nested --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is nested message1"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- array --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is 0 error code message"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- object in array --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is internal 1 error message"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- array in array --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("this is nested array error 1"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"linked-locale-messages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linked-locale-messages"}},[t._v("#")]),t._v(" Linked locale messages")]),t._v(" "),a("p",[t._v("If there's a translation key that will always have the same concrete text as another one you can just link to it. To link to another translation key, all you have to do is to prefix its contents with an "),a("code",[t._v("@:")]),t._v(" sign followed by the full name of the translation key including the namespace you want to link to.")]),t._v(" "),a("p",[t._v("Locale messages the below:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("the_world")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'the world'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dio")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'DIO:'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("linked")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@:message.dio @:message.the_world !!!!'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.linked') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("DIO: the world !!!!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h3",{attrs:{id:"formatting-linked-locale-messages"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#formatting-linked-locale-messages"}},[t._v("#")]),t._v(" Formatting linked locale messages")]),t._v(" "),a("p",[t._v("If the language distinguish cases of character, you may need control the case of the linked locale messages.\nLinked messages can be formatted with modifier "),a("code",[t._v("@.modifier:key")])]),t._v(" "),a("p",[t._v("The below modifiers are available currently.")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("upper")]),t._v(": Uppercase all characters in the linked message.")]),t._v(" "),a("li",[a("code",[t._v("lower")]),t._v(": Lowercase all characters in the linked message.")]),t._v(" "),a("li",[a("code",[t._v("capitalize")]),t._v(": Capitalize the first character in the linked message.")])]),t._v(" "),a("p",[t._v("Locale messages the below:")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("homeAddress")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Home address'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("missingHomeAddress")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'Please provide @.lower:message.homeAddress'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.homeAddress') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("error"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.missingHomeAddress') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output the below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Home address"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("error"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Please provide home address"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("You can add modifiers or overwrite the existing ones passing the "),a("code",[t._v("modifiers")]),t._v(" options to the "),a("code",[t._v("VueI18n")]),t._v(" constructor.")]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("modifiers")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Adding a new modifier")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("snakeCase")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("str")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" str"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("split")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("' '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'-'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("messages")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("h3",{attrs:{id:"grouping-by-brackets"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-by-brackets"}},[t._v("#")]),t._v(" Grouping by brackets")]),t._v(" "),a("p",[t._v("A translation key of linked locale message can also have the form of "),a("code",[t._v("@:(message.foo.bar.baz)")]),t._v(" in which the link to another translation key is within brackets "),a("code",[t._v("()")]),t._v(".")]),t._v(" "),a("p",[t._v("This can be useful if the link "),a("code",[t._v("@:message.something")]),t._v(" is followed by period "),a("code",[t._v(".")]),t._v(", which otherwise would be part of the link and may not need to be.")]),t._v(" "),a("p",[t._v("Locale messages:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("message")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("dio")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'DIO'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("linked")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'There\\'s a reason, you lost, @:(message.dio).'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('message.linked') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("There's a reason, you lost, DIO."),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"message-function"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message-function"}},[t._v("#")]),t._v(" Message Function")]),t._v(" "),a("p",[t._v("vue-i18n recommends using the string base on list or named format as locale messages when translating messages.")]),t._v(" "),a("p",[t._v("There are situations however, where you really need the full programmatic power of JavaScript, due to the complex language syntax. So instead of string-based messages, you can use the "),a("strong",[t._v("message function")]),t._v(".")]),t._v(" "),a("p",[t._v("The following is a message function that returns a simple greeting:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("greeting")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("ctx")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello!'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("The use of the message function is very easy! You just specify the key of the message function with "),a("code",[t._v("$t")]),t._v(" or "),a("code",[t._v("t")]),t._v(":")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('greeting') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output is the below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("The message function outputs the message of the return value of the message function.")]),t._v(" "),a("h3",{attrs:{id:"named-formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#named-formatting"}},[t._v("#")]),t._v(" Named formatting")]),t._v(" "),a("p",[t._v("vue-i18n supports "),a("RouterLink",{attrs:{to:"/guide/formatting.html#named-formatting"}},[t._v("named formatting")]),t._v(" as a string-based message format. vue-i18n interpolate the parameter values with "),a("code",[t._v("$t")]),t._v(" or "),a("code",[t._v("t")]),t._v(", and it can be output it.")],1),t._v(" "),a("p",[t._v("You can do the same thing with the message function by using "),a("strong",[t._v("message context")]),t._v(":")]),t._v(" "),a("p",[t._v("here is the example of greeting:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("greeting")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("ctx")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("hello, ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("ctx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("named")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'name'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("!")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('greeting', { name: 'DIO' }) }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output is the below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello, DIO!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("The message context has a named function. You need to specify the key that resolves the value specified with the named of "),a("code",[t._v("$t")]),t._v(" or "),a("code",[t._v("t")]),t._v(".")]),t._v(" "),a("h3",{attrs:{id:"list-formatting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#list-formatting"}},[t._v("#")]),t._v(" List formatting")]),t._v(" "),a("p",[t._v("The use of the list format is similar to the named format described above.")]),t._v(" "),a("p",[t._v("vue-i18n supports "),a("RouterLink",{attrs:{to:"/guide/formatting.html#list-formatting"}},[t._v("list formatting")]),t._v(" as a string-based message format. vue-i18n interpolate the parameter values with "),a("code",[t._v("$t")]),t._v(" or "),a("code",[t._v("t")]),t._v(", and it can be output it.")],1),t._v(" "),a("p",[t._v("You can do the same thing with the message function by using message context:")]),t._v(" "),a("p",[t._v("here is the example of greeting:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("greeting")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("ctx")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token template-string"}},[a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("hello, ")]),a("span",{pre:!0,attrs:{class:"token interpolation"}},[a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("${")]),t._v("ctx"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("list")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token interpolation-punctuation punctuation"}},[t._v("}")])]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("!")]),a("span",{pre:!0,attrs:{class:"token template-punctuation string"}},[t._v("`")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("Template:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $t('greeting', ['DIO']) }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Output is the below:")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("hello, DIO!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("The message context has a list function. You need to specify the index that resolves the value specified with the list of "),a("code",[t._v("$t")]),t._v(" or "),a("code",[t._v("t")]),t._v(".")]),t._v(" "),a("h3",{attrs:{id:"limitation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#limitation"}},[t._v("#")]),t._v(" Limitation")]),t._v(" "),a("p",[t._v("In the message function, the following functions, which are provided on a string basis, are not available via a message context:")]),t._v(" "),a("ul",[a("li",[t._v("Pluralization")])]),t._v(" "),a("p",[t._v("And also, the following props of message context is not compatible for vue-i18 v9.x or later:")]),t._v(" "),a("ul",[a("li",[a("code",[t._v("path")])]),t._v(" "),a("li",[a("code",[t._v("locale")])]),t._v(" "),a("li",[a("code",[t._v("messages")])]),t._v(" "),a("li",[a("code",[t._v("formatter")])])]),t._v(" "),a("p",[t._v("If you are using these message context props means that it will be difficult to migrate to vue-i18n v9.x or later.")])])}),[],!1,null,null,null);s.default=n.exports}}]); \ No newline at end of file diff --git a/assets/js/21.bd95e2eb.js b/assets/js/21.bd95e2eb.js new file mode 100644 index 000000000..46666c952 --- /dev/null +++ b/assets/js/21.bd95e2eb.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{471:function(t,a,s){"use strict";s.r(a);var n=s(44),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"number-localization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#number-localization"}},[t._v("#")]),t._v(" Number localization")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),s("p",[t._v("🆕 7.0+")])]),t._v(" "),s("p",[t._v("You can localize the number with your definition formats.")]),t._v(" "),s("p",[t._v("Number formats the below:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" numberFormats "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'en-US'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'currency'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'USD'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'ja-JP'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'currency'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currency")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'JPY'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("currencyDisplay")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'symbol'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("As the above, you can define named number formats (e.g. "),s("code",[t._v("currency")]),t._v(", etc), and you need to use "),s("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat",target:"_blank",rel:"noopener noreferrer"}},[t._v("the options with ECMA-402 Intl.NumberFormat"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("After that, when using the locale messages, you need to specify the "),s("code",[t._v("numberFormats")]),t._v(" option of the "),s("code",[t._v("VueI18n")]),t._v(" constructor:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" i18n "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n numberFormats\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Vue")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n i18n\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("$mount")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#app'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("Template the below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $n(100, 'currency') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $n(100, 'currency', 'ja-JP') }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Output the below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("$100.00"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("￥100"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("h2",{attrs:{id:"custom-formatting"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-formatting"}},[t._v("#")]),t._v(" Custom formatting")]),t._v(" "),s("div",{staticClass:"custom-block tip"},[s("p",{staticClass:"custom-block-title"},[t._v("Support Version")]),t._v(" "),s("p",[t._v("🆕 8.10+")])]),t._v(" "),s("p",[s("code",[t._v("$n")]),t._v(" method returns resulting string with fully formatted number, which can only be used as a whole. In situations when you need to style some part of the formatted number (like fraction digits), "),s("code",[t._v("$n")]),t._v(" is not enough. In such cases "),s("code",[t._v("")]),t._v(" functional component will be of help.")]),t._v(" "),s("p",[t._v("With a minimum set of properties, "),s("code",[t._v("")]),t._v(" generates the same output as "),s("code",[t._v("$n")]),t._v(", wrapped into configured DOM element.")]),t._v(" "),s("p",[t._v("The following template:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n-n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n-n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n-n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("locale")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("ja-JP"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("will produce the below output:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("100"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("$100.00"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("￥100"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("But the real power of this component comes into play when it is used with "),s("a",{attrs:{href:"https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots",target:"_blank",rel:"noopener noreferrer"}},[t._v("scoped slots"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Let's say there is a requirement to render the integer part of the number with a bolder font. This can be achieved by specifying "),s("code",[t._v("integer")]),t._v(" scoped slot element:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n-n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("100"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("format")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("currency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("integer")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slotProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ slotProps.integer }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Template above will result in the following HTML:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("$"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("100"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v(".00"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("It is possible to specify multiple scoped slots at the same time:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n-n")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":value")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("1234"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v(":format")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{ key: "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("currency"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(", currency: "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("EUR"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(" }"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("currency")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slotProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" green")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ slotProps.currency }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("integer")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slotProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ slotProps.integer }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("group")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slotProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ slotProps.group }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[s("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("v-slot:")]),t._v("fraction")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("slotProps"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" small")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ slotProps.fraction }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("(this resulting HTML was formatted for better readability)")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" green")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("€"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v(","),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-weight")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" bold")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("234"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token special-attr"}},[s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("style")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),s("span",{pre:!0,attrs:{class:"token value css language-css"}},[s("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" small")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("00"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("You can choose the root container's node type by specifying a "),s("code",[t._v("tag")]),t._v(" prop. If omitted, it defaults to "),s("code",[t._v("'span'")]),t._v(". You can also set it to the boolean value "),s("code",[t._v("false")]),t._v(" to insert the child nodes directly without creating a root element.")]),t._v(" "),s("p",[t._v("Full list of the supported scoped slots as well as other "),s("code",[t._v("")]),t._v(" properties can be found "),s("RouterLink",{attrs:{to:"/api/#i18n-n-functional-component"}},[t._v("on API page")]),t._v(".")],1)])}),[],!1,null,null,null);a.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/22.76fb7a36.js b/assets/js/22.76fb7a36.js new file mode 100644 index 000000000..122598921 --- /dev/null +++ b/assets/js/22.76fb7a36.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{472:function(t,a,s){"use strict";s.r(a);var n=s(44),p=Object(n.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"pluralization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#pluralization"}},[t._v("#")]),t._v(" Pluralization")]),t._v(" "),s("p",[t._v("You can translate with pluralization. You must define the locale that have a pipe "),s("code",[t._v("|")]),t._v(" separator, and define plurals in pipe separator.")]),t._v(" "),s("p",[s("em",[t._v("Your template will need to use "),s("code",[t._v("$tc()")]),t._v(" instead of "),s("code",[t._v("$t()")]),t._v(".")])]),t._v(" "),s("p",[t._v("Locale messages below:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("car")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'car | cars'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apple")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no apples | one apple | {count} apples'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Template below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 1) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 2) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('apple', 0) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('apple', 1) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('apple', 10, { count: 10 }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Output below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("car"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("cars"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("no apples"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("one apple"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("10 apples"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("h2",{attrs:{id:"accessing-the-number-via-the-pre-defined-argument"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#accessing-the-number-via-the-pre-defined-argument"}},[t._v("#")]),t._v(" Accessing the number via the pre-defined argument")]),t._v(" "),s("p",[t._v("You don't need to explicitly give the number for pluralization.\nThe number can be accessed within locale messages via pre-defined named arguments "),s("code",[t._v("{count}")]),t._v(" and/or "),s("code",[t._v("{n}")]),t._v(".\nYou can overwrite those pre-defined named arguments if necessary.")]),t._v(" "),s("p",[t._v("Locale messages the below:")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("en")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("apple")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no apples | one apple | {count} apples'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("banana")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'no bananas | {n} banana | {n} bananas'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Template below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('apple', 10, { count: 10 }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('apple', 10) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 1, { n: 1 }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 1) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 100, { n: 'too many' }) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Output below:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("10 apples"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("10 apples"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1 banana"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1 banana"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("too many bananas"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("h2",{attrs:{id:"custom-pluralization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#custom-pluralization"}},[t._v("#")]),t._v(" Custom pluralization")]),t._v(" "),s("p",[s("em",[t._v("This feature is available since version 8.0")])]),t._v(" "),s("p",[t._v("Such pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules).")]),t._v(" "),s("p",[t._v("In order to implement these rules you can pass an optional "),s("code",[t._v("pluralizationRules")]),t._v(" object into "),s("code",[t._v("VueI18n")]),t._v(" constructor options.")]),t._v(" "),s("p",[t._v("Very simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):")]),t._v(" "),s("div",{staticClass:"language-js extra-class"},[s("pre",{pre:!0,attrs:{class:"language-js"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("VueI18n")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Key - language to use the rule for, `'ru'`, in this case")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Value - function to choose right plural form")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("pluralizationRules")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/**\n * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`\n * @param choicesLength {number} an overall amount of available choices\n * @returns a final choice index to select plural word by\n */")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token string-property property"}},[t._v("'ru'")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("choice"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" choicesLength")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// this === VueI18n instance, so the locale property also exists here")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("choice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("0")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" teen "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" choice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" choice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("20")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" endsWithOne "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" choice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("===")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("choicesLength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("teen "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" endsWithOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("teen "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" endsWithOne"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!")]),t._v("teen "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" choice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("&&")]),t._v(" choice "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("%")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("10")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("choicesLength "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("4")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("?")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("2")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token number"}},[t._v("3")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("This would effectively give this:")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" messages "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("ru")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("car")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'0 машин | {n} машина | {n} машины | {n} машин'")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("banana")]),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'нет бананов | {n} банан | {n} банана | {n} бананов'")]),t._v("\n "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("p",[t._v("Where the format is "),s("code",[t._v("0 things | things count ends with 1 | things count ends with 2-4 | things count ends with 5-9, 0 and teens (10-19)")]),t._v(".\nP.S. Slavic pluralization is difficult, you can read more about it "),s("a",{attrs:{href:"http://www.russianlessons.net/lessons/lesson11_main.php",target:"_blank",rel:"noopener noreferrer"}},[t._v("here"),s("OutboundLink")],1),t._v(".")]),t._v(" "),s("p",[t._v("Your template still needs to use "),s("code",[t._v("$tc()")]),t._v(", not "),s("code",[t._v("$t()")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 1) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 2) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 4) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 12) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('car', 21) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 0) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 4) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 11) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ $tc('banana', 31) }}"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("p",[t._v("Which results in:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("1 машина"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("2 машины"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("4 машины"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("12 машин"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("21 машина"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("нет бананов"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("4 банана"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("11 бананов"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("31 банан"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("h3",{attrs:{id:"default-pluralization"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#default-pluralization"}},[t._v("#")]),t._v(" Default pluralization")]),t._v(" "),s("p",[t._v("If your current locale is not found in a pluralization map, the "),s("a",{attrs:{href:"#pluralization"}},[t._v("default")]),t._v(" rule of the english language will be used.")])])}),[],!1,null,null,null);a.default=p.exports}}]); \ No newline at end of file diff --git a/assets/js/23.78943b5d.js b/assets/js/23.78943b5d.js new file mode 100644 index 000000000..2b5c01bb8 --- /dev/null +++ b/assets/js/23.78943b5d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{473:function(t,s,a){"use strict";a.r(s);var n=a(44),e=Object(n.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"single-file-components"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-file-components"}},[t._v("#")]),t._v(" Single file components")]),t._v(" "),a("h2",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage"}},[t._v("#")]),t._v(" Basic Usage")]),t._v(" "),a("p",[t._v("If you are building Vue component or Vue application using single file components, you can manage the locale messages "),a("code",[t._v("i18n")]),t._v(" custom block.")]),t._v(" "),a("p",[t._v("The following in "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc",target:"_blank",rel:"noopener noreferrer"}},[t._v("single file components example"),a("OutboundLink")],1),t._v(":")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n "en": {\n "hello": "hello world!"\n },\n "ja": {\n "hello": "こんにちは、世界！"\n }\n}\n'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("app"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("label")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("for")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("select")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-model")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("locale"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("en"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("option")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("ja"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("message: {{ $t('hello') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token script"}},[a("span",{pre:!0,attrs:{class:"token language-javascript"}},[t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("export")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("name")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'app'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("data")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("locale")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'en'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("watch")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("locale")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("val")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("$i18n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("locale "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" val\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"installing-vue-i18n-loader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installing-vue-i18n-loader"}},[t._v("#")]),t._v(" Installing vue-i18n-loader")]),t._v(" "),a("p",[t._v("You need to install "),a("code",[t._v("vue-loader")]),t._v(" and "),a("code",[t._v("vue-i18n-loader")]),t._v(" to use "),a("code",[t._v("")]),t._v(" custom blocks. While "),a("a",{attrs:{href:"https://github.com/vuejs/vue-loader",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-loader"),a("OutboundLink")],1),t._v(" most likely is already used in your project if you are working with single file components, you must install "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n-loader",target:"_blank",rel:"noopener noreferrer"}},[t._v("vue-i18n-loader"),a("OutboundLink")],1),t._v(" additionally:")]),t._v(" "),a("div",{staticClass:"language-sh extra-class"},[a("pre",{pre:!0,attrs:{class:"language-sh"}},[a("code",[a("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" i --save-dev @intlify/vue-i18n-loader\n")])])]),a("h2",{attrs:{id:"webpack"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#webpack"}},[t._v("#")]),t._v(" Webpack")]),t._v(" "),a("p",[t._v("For Webpack the configuration below is required:")]),t._v(" "),a("p",[t._v("for vue-loader v15 or later:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.vue$")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resourceQuery")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("blockType=i18n")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@intlify/vue-i18n-loader'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("for vue-loader v14:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.vue$")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loaders")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/intlify/vue-i18n-loader)")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@intlify/vue-i18n-loader'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"vue-cli-3-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vue-cli-3-0"}},[t._v("#")]),t._v(" Vue CLI 3.0")]),t._v(" "),a("p",[a("a",{attrs:{href:"https://github.com/vuejs/vue-cli",target:"_blank",rel:"noopener noreferrer"}},[t._v("Vue CLI 3.0"),a("OutboundLink")],1),t._v(" hides the webpack configuration, so, if we want to add support to the "),a("code",[t._v("")]),t._v(" tag inside a single file component we need to modify the existing configuration.")]),t._v(" "),a("p",[t._v("In order to do that we have to create a "),a("code",[t._v("vue.config.js")]),t._v(" at the root of our project. Once we have done that, we have to include the following:")]),t._v(" "),a("p",[t._v("for vue-loader v15 or later:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("chainWebpack")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"i18n"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("resourceQuery")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("blockType=i18n")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"i18n"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@intlify/vue-i18n-loader"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("for vue-loader v14:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" merge "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'deepmerge'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("chainWebpack")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("tap")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("options")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("merge")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loaders")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@intlify/vue-i18n-loader'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[a("em",[t._v("Don 't forget to install "),a("a",{attrs:{href:"https://github.com/KyleAMathews/deepmerge",target:"_blank",rel:"noopener noreferrer"}},[t._v("deepmerge"),a("OutboundLink")],1),t._v("! ("),a("code",[t._v("npm i deepmerge -D")]),t._v(" or "),a("code",[t._v("yarn add deepmerge -D")]),t._v(")")])]),t._v(" "),a("p",[t._v("If you want to read more about modifying the existing configuration "),a("a",{attrs:{href:"https://cli.vuejs.org/guide/webpack.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("click here"),a("OutboundLink")],1),t._v(".")]),t._v(" "),a("h2",{attrs:{id:"laravel-mix"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#laravel-mix"}},[t._v("#")]),t._v(" Laravel-Mix")]),t._v(" "),a("p",[t._v("for Laravel-mix 4 with vue-loader v15 or later:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Extend Mix with the "i18n" method, that loads the vue-i18n-loader')]),t._v("\nmix"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'i18n'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("class")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("webpackRules")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("resourceQuery")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("blockType=i18n")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@intlify/vue-i18n-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Make sure to call the .i18n() (to load the loader) before .js(..., ...)")]),t._v("\nmix"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("js")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'resources/js/App.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'public/js/app.js'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("p",[t._v("for Laravel-mix 2 with vue-loader v14:")]),t._v(" "),a("p",[t._v("As of "),a("a",{attrs:{href:"https://github.com/JeffreyWay/laravel-mix/releases/tag/v2.1",target:"_blank",rel:"noopener noreferrer"}},[t._v("V2.1"),a("OutboundLink")],1),t._v(" of Laravel-mix, you can add custom rules via mix.extend(). Laravel mix already has its own rules for handling .vue files. To add the "),a("code",[t._v("vue-i18n-loader")]),t._v(", add the following to "),a("code",[t._v("webpack.mix.js")])]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// The below code will inject i18n Kazupon/vue-18-loader as a loader for .vue files.")]),t._v("\nmix"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'i18n'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("webpackConfig"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("args")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n webpackConfig"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("rules"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("forEach")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("module")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// Search for the "vue-loader" component, which handles .vue files.')]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("loader "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!==")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-loader'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Within this module, add the vue-i18n-loader for the i18n tag.")]),t._v("\n module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("options"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("loaders"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("i18n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@intlify/vue-i18n-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Make sure to call .i18n() before .js(..., ...)")]),t._v("\nmix"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("js")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'resources/assets/js/App.js'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'public/js/app.js'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),a("h2",{attrs:{id:"yaml-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yaml-loading"}},[t._v("#")]),t._v(" YAML loading")]),t._v(" "),a("p",[a("code",[t._v("i18n")]),t._v(" custom blocks need to specify "),a("code",[t._v("JSON")]),t._v(" format, also you can use "),a("code",[t._v("YAML")]),t._v(" format by using pre-loader feature of "),a("code",[t._v("vue-loader")]),t._v(".")]),t._v(" "),a("p",[t._v("the "),a("code",[t._v("i18n")]),t._v(" custom blocks below of "),a("code",[t._v("YAML")]),t._v(" format:")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\nen:\n hello: "hello world!"\nja:\n hello: "こんにちは、世界！"\n'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("Webpack conf the below:")]),t._v(" "),a("p",[t._v("for vue-loader v15 or later:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Vue CLI 3.0")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("chainWebpack")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("config")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=>")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n config"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("module\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("rule")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"i18n"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("resourceQuery")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("blockType=i18n")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("type")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'javascript/auto'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"i18n"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"@intlify/vue-i18n-loader"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'yaml'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'yaml-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("end")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("for vue-loader v14:")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[t._v("module"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("rules")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("test")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token regex"}},[a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")]),a("span",{pre:!0,attrs:{class:"token regex-source language-regex"}},[t._v("\\.vue$")]),a("span",{pre:!0,attrs:{class:"token regex-delimiter"}},[t._v("/")])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loader")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-loader'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("options")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("preLoaders")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'yaml-loader'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("loaders")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token literal-property property"}},[t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'@intlify/vue-i18n-loader'")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// ...")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"multiple-custom-blocks"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-custom-blocks"}},[t._v("#")]),t._v(" Multiple custom blocks")]),t._v(" "),a("p",[t._v("You can use locale messages with multiple "),a("code",[t._v("i18n")]),t._v(" custom blocks.")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("./common/locales.json"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n {\n "en": {\n "hello": "hello world!"\n },\n "ja": {\n "hello": "こんにちは、世界！"\n }\n }\n'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[t._v("In the above, first custom block load the common locale message with "),a("code",[t._v("src")]),t._v(" attribute, second custom block load the locale message that is defined only at single file component. These locale messages will be merged as locale message of component.")]),t._v(" "),a("p",[t._v("In this way, multiple custom blocks useful when want to be used as module.")]),t._v(" "),a("h2",{attrs:{id:"scoped-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#scoped-style"}},[t._v("#")]),t._v(" Scoped style")]),t._v(" "),a("p",[t._v("When using "),a("code",[t._v("vue-i18n")]),t._v(" with "),a("code",[t._v("scoped style")]),t._v(", it's important to remember to use a "),a("a",{attrs:{href:"https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements",target:"_blank",rel:"noopener noreferrer"}},[t._v("deep selector"),a("OutboundLink")],1),t._v(" for styling an element "),a("strong",[a("em",[t._v("inside")])]),t._v(" the translation string. For example:")]),t._v(" "),a("p",[a("strong",[t._v("Translation contains only text")]),t._v(" (Work without deep selector)")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n "en": {\n "hello": "hello world!"\n },\n "ja": {\n "hello": "こんにちは、世界"\n }\n}\n'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("parent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("message: {{ $t('hello') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Will work --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #42b883"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("p",[a("strong",[t._v("Translation with HTML element")]),t._v(" (Must use deep selector)")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n "en": {\n "hello": "hello'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("world!"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v('"\n },\n "ja": {\n "hello": "こんにちは、'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("span")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("世界！"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v('"\n }\n}\n'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("div")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("parent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("v-html")]),a("span",{pre:!0,attrs:{class:"token attr-value"}},[a("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("$t("),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v("hello"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("'")]),t._v(")"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Won't work --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #42b883"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Will work >>> --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #42b883"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p >>> span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Will work /deep/ --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #42b883"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p /deep/ span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- Will work ::v-deep --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("style")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("scoped")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token style"}},[a("span",{pre:!0,attrs:{class:"token language-css"}},[t._v("\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".parent p")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #42b883"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n "),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v("::v-deep .parent p span")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" red"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),a("h2",{attrs:{id:"custom-blocks-in-functional-component"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-blocks-in-functional-component"}},[t._v("#")]),t._v(" Custom blocks in functional component")]),t._v(" "),a("p",[t._v("If the single file components have the template using a functional component, and you had been defined "),a("code",[t._v("i18n")]),t._v(" custom blocks, note you cannot localize using locale messages.")]),t._v(" "),a("p",[t._v("For example, the following code cannot localize with the locale message of "),a("code",[t._v("i18n")]),t._v(" custom block.")]),t._v(" "),a("div",{staticClass:"language-vue extra-class"},[a("pre",{pre:!0,attrs:{class:"language-vue"}},[a("code",[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("i18n")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v('\n{\n "en": {\n "hello": "hello world"\n },\n "ja": {\n "hello": "こんにちは、世界"\n }\n}\n'),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("template")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("functional")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- 'hello' of locale messages of parent instance --\x3e")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("p")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{ parent.$t('hello') }}"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=e.exports}}]); \ No newline at end of file diff --git a/assets/js/24.74209dcc.js b/assets/js/24.74209dcc.js new file mode 100644 index 000000000..1172e3c79 --- /dev/null +++ b/assets/js/24.74209dcc.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{475:function(e,t,n){"use strict";n.r(t);var i=n(44),a=Object(i.a)({},(function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[n("h1",{attrs:{id:"tooling"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#tooling"}},[e._v("#")]),e._v(" Tooling")]),e._v(" "),n("p",[e._v("To support the i18n of Vue applications, some tools are officially provided.")]),e._v(" "),n("p",[e._v("There are also tools from third vendors integrating Vue I18n.")]),e._v(" "),n("h2",{attrs:{id:"official-tooling"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#official-tooling"}},[e._v("#")]),e._v(" Official tooling")]),e._v(" "),n("h3",{attrs:{id:"vue-cli-plugin"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#vue-cli-plugin"}},[e._v("#")]),e._v(" Vue CLI Plugin")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/kazupon/vue-cli-plugin-i18n",target:"_blank",rel:"noopener noreferrer"}},[e._v("vue-cli-plugin-i18n"),n("OutboundLink")],1),e._v(" is officially provided as the Vue CLI Plugin.")]),e._v(" "),n("p",[e._v("With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.")]),e._v(" "),n("h3",{attrs:{id:"nuxt-module"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#nuxt-module"}},[e._v("#")]),e._v(" Nuxt Module")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/nuxt-community/nuxt-i18n/",target:"_blank",rel:"noopener noreferrer"}},[e._v("nuxt-i18n"),n("OutboundLink")],1),e._v(" is corresponding Nuxt.js module.")]),e._v(" "),n("h3",{attrs:{id:"webpack-loader"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#webpack-loader"}},[e._v("#")]),e._v(" Webpack loader")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n-loader",target:"_blank",rel:"noopener noreferrer"}},[e._v("vue-i18n-loader"),n("OutboundLink")],1),e._v(" is an officially provided webpack loader.")]),e._v(" "),n("p",[e._v("With this loader, you can use the "),n("code",[e._v("i18n")]),e._v(" custom block in the Single file components.")]),e._v(" "),n("p",[e._v("In about "),n("code",[e._v("i18n")]),e._v(" custom block, see the "),n("RouterLink",{attrs:{to:"/guide/sfc.html"}},[e._v("Single file components section")])],1),e._v(" "),n("h3",{attrs:{id:"eslint-plugin"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#eslint-plugin"}},[e._v("#")]),e._v(" ESLint Plugin")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://intlify.github.io/eslint-plugin-vue-i18n/",target:"_blank",rel:"noopener noreferrer"}},[e._v("eslint-plugin-vue-i18n"),n("OutboundLink")],1),e._v(" is ESLint plugin for Vue I18n.")]),e._v(" "),n("p",[e._v("It easily integrates some localization lint features to your Vue.js Application.")]),e._v(" "),n("h3",{attrs:{id:"extensions"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#extensions"}},[e._v("#")]),e._v(" Extensions")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/kazupon/vue-i18n-extensions",target:"_blank",rel:"noopener noreferrer"}},[e._v("vue-i18n-extensions"),n("OutboundLink")],1),e._v(" provides some extensions for Vue I18n.")]),e._v(" "),n("p",[e._v("You can use this extension to enable SSR and improve i18n performance.")]),e._v(" "),n("h2",{attrs:{id:"_3rd-party-tooling"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#_3rd-party-tooling"}},[e._v("#")]),e._v(" 3rd party tooling")]),e._v(" "),n("h3",{attrs:{id:"babeledit"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#babeledit"}},[e._v("#")]),e._v(" BabelEdit")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://www.codeandweb.com/babeledit",target:"_blank",rel:"noopener noreferrer"}},[e._v("BabelEdit"),n("OutboundLink")],1),e._v(" is translation editor for web apps.")]),e._v(" "),n("p",[e._v("BabelEdit can translate "),n("code",[e._v("json")]),e._v(" files, and it can also translate "),n("code",[e._v("i18n")]),e._v(" custom block of Single-file components.")]),e._v(" "),n("p",[e._v("Read more about BabelEdit in "),n("a",{attrs:{href:"https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-vue-app-with-vue-i18n",target:"_blank",rel:"noopener noreferrer"}},[e._v("tutorial page"),n("OutboundLink")],1),e._v(".")]),e._v(" "),n("h3",{attrs:{id:"i18n-ally"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#i18n-ally"}},[e._v("#")]),e._v(" i18n Ally")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally",target:"_blank",rel:"noopener noreferrer"}},[e._v("i18n Ally"),n("OutboundLink")],1),e._v(" is i18n extension for VSCode.")]),e._v(" "),n("p",[e._v("i18n Ally give awesome DX for your i18n development.")]),e._v(" "),n("p",[e._v("Read more about i18n Ally in "),n("a",{attrs:{href:"https://github.com/lokalise/i18n-ally/blob/main/README.md",target:"_blank",rel:"noopener noreferrer"}},[e._v("README"),n("OutboundLink")],1),e._v(".")]),e._v(" "),n("h3",{attrs:{id:"i18nplugin-intellij-platform"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#i18nplugin-intellij-platform"}},[e._v("#")]),e._v(" i18nPlugin (intellij platform)")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/nyavro/i18nPlugin",target:"_blank",rel:"noopener noreferrer"}},[e._v("i18nPlugin"),n("OutboundLink")],1),e._v(" Intellij idea i18next support plugin ( "),n("a",{attrs:{href:"https://plugins.jetbrains.com/plugin/12981-i18n-support",target:"_blank",rel:"noopener noreferrer"}},[e._v("Jetbrains plugin page "),n("OutboundLink")],1),e._v(").")]),e._v(" "),n("p",[e._v('Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check "Vue-i18n". You need set vue locales directory (locales by default).')]),e._v(" "),n("h3",{attrs:{id:"vue-i18n-extract"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#vue-i18n-extract"}},[e._v("#")]),e._v(" vue-i18n-extract")]),e._v(" "),n("p",[n("a",{attrs:{href:"https://github.com/pixari/vue-i18n-extract",target:"_blank",rel:"noopener noreferrer"}},[e._v("vue-i18n-extract"),n("OutboundLink")],1),e._v(" performs static analysis on a Vue.js project based on vue-i18n and reports the following information:")]),e._v(" "),n("ul",[n("li",[e._v("list of all the "),n("strong",[e._v("unused vue-i18n keys")]),e._v(" (entries found in the language files but not used in the project)")]),e._v(" "),n("li",[e._v("list of all the "),n("strong",[e._v("missing keys")]),e._v(" (entries fond in the project but not in the language files)")])]),e._v(" "),n("p",[e._v("It's possible to show the output in the console or to write it in a json file.")]),e._v(" "),n("p",[e._v("The missing keys can be also automatically added to the given language files.")])])}),[],!1,null,null,null);t.default=a.exports}}]); \ No newline at end of file diff --git a/assets/js/25.19488045.js b/assets/js/25.19488045.js new file mode 100644 index 000000000..62f0abd11 --- /dev/null +++ b/assets/js/25.19488045.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{474:function(t,e,s){"use strict";s.r(e);var a=s(44),n=Object(a.a)({},(function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"installation"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#installation"}},[t._v("#")]),t._v(" Installation")]),t._v(" "),s("h2",{attrs:{id:"compatibility-note"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#compatibility-note"}},[t._v("#")]),t._v(" Compatibility Note")]),t._v(" "),s("ul",[s("li",[t._v("Vue.js "),s("code",[t._v("2.0.0")]),t._v("+")])]),t._v(" "),s("h2",{attrs:{id:"direct-download-cdn"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#direct-download-cdn"}},[t._v("#")]),t._v(" Direct Download / CDN")]),t._v(" "),s("p",[s("a",{attrs:{href:"https://unpkg.com/vue-i18n@8",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://unpkg.com/vue-i18n@8"),s("OutboundLink")],1)]),t._v(" "),s("p",[s("a",{attrs:{href:"https://unpkg.com",target:"_blank",rel:"noopener noreferrer"}},[t._v("unpkg.com"),s("OutboundLink")],1),t._v(" provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like "),s("a",{attrs:{href:"https://unpkg.com/vue-i18n@8.28.2/dist/vue-i18n.js",target:"_blank",rel:"noopener noreferrer"}},[t._v("https://unpkg.com/vue-i18n@8.28.2/dist/vue-i18n.js"),s("OutboundLink")],1)]),t._v(" "),s("p",[t._v("Include vue-i18n after Vue and it will install itself automatically:")]),t._v(" "),s("div",{staticClass:"language-html extra-class"},[s("pre",{pre:!0,attrs:{class:"language-html"}},[s("code",[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://unpkg.com/vue/dist/vue.js"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}}),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("script")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("src")]),s("span",{pre:!0,attrs:{class:"token attr-value"}},[s("span",{pre:!0,attrs:{class:"token punctuation attr-equals"}},[t._v("=")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("https://unpkg.com/vue-i18n@8"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),s("span",{pre:!0,attrs:{class:"token script"}}),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("")])]),t._v("\n")])])]),s("h2",{attrs:{id:"npm"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#npm"}},[t._v("#")]),t._v(" NPM")]),t._v(" "),s("div",{staticClass:"language-sh extra-class"},[s("pre",{pre:!0,attrs:{class:"language-sh"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("npm")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("install")]),t._v(" vue-i18n@8\n")])])]),s("h2",{attrs:{id:"yarn"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#yarn"}},[t._v("#")]),t._v(" Yarn")]),t._v(" "),s("div",{staticClass:"language-sh extra-class"},[s("pre",{pre:!0,attrs:{class:"language-sh"}},[s("code",[s("span",{pre:!0,attrs:{class:"token function"}},[t._v("yarn")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("add")]),t._v(" vue-i18n@8\n")])])]),s("p",[t._v("When using with a module system, you must explicitly install the "),s("code",[t._v("vue-i18n")]),t._v("\nvia "),s("code",[t._v("Vue.use()")]),t._v(":")]),t._v(" "),s("div",{staticClass:"language-javascript extra-class"},[s("pre",{pre:!0,attrs:{class:"language-javascript"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" Vue "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue'")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" VueI18n "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token string"}},[t._v("'vue-i18n'")]),t._v("\n\nVue"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("use")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("VueI18n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),s("p",[t._v("You don't need to do this when using global script tags "),s("code",[t._v(" + + diff --git a/guide/datetime.html b/guide/datetime.html new file mode 100644 index 000000000..9b3723142 --- /dev/null +++ b/guide/datetime.html @@ -0,0 +1,155 @@ + + + + + + DateTime localization | Vue I18n + + + + + + + + + +
Vue I18n

# DateTime localization

Support Version

🆕 7.0+

You can localize the datetime with your definition formats.

DateTime formats the below:

const dateTimeFormats = {
+  'en-US': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric'
+    }
+  },
+  'ja-JP': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true
+    }
+  }
+}
+

As seen above, you can define named datetime format (e.g. short, long, etc), and you need to use the options with ECMA-402 Intl.DateTimeFormat (opens new window)

After that, when using the locale messages, you need to specify the dateTimeFormats option of the VueI18n constructor:

const i18n = new VueI18n({
+  dateTimeFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

Template the below:

<div id="app">
+  <p>{{ $d(new Date(), 'short') }}</p>
+  <p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>
+</div>
+

Output the below:

<div id="app">
+  <p>Jan 18, 2021</p>
+  <p>2021年1月18日日曜日 午前5:47</p>
+</div>
+

+ ← + + Number localization + + → +

+ + + diff --git a/guide/directive.html b/guide/directive.html new file mode 100644 index 000000000..475ab215b --- /dev/null +++ b/guide/directive.html @@ -0,0 +1,182 @@ + + + + + + Custom directive localization | Vue I18n + + + + + + + + + +
Vue I18n

# Custom directive localization

Support Version

🆕 7.3+

You can translate not only with v-t custom directive, but also with the $t +method.

# String syntax

You can pass the keypath of locale messages with string syntax.

Javascript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hi there!' },
+      ja: { hello: 'こんにちは！' }
+    }
+  }),
+  data: { path: 'hello' }
+}).$mount('#string-syntax')
+

Templates:

<div id="string-syntax">
+  <!-- string literal -->
+  <p v-t="'hello'"></p>
+  <!-- keypath binding via data -->
+  <p v-t="path"></p>
+</div>
+

Outputs:

<div id="string-syntax">
+  <p>hi there!</p>
+  <p>hi there!</p>
+</div>
+

# Object syntax

You can use object syntax.

Javascript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hi {name}!' },
+      ja: { hello: 'こんにちは、{name}！' }
+    }
+  }),
+  computed: {
+    nickName () { return 'kazupon' }
+  },
+  data: { path: 'hello' }
+}).$mount('#object-syntax')
+

Templates:

<div id="object-syntax">
+  <!-- literal -->
+  <p v-t="{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }"></p>
+  <!-- data binding via data -->
+  <p v-t="{ path: path, args: { name: nickName } }"></p>
+</div>
+

Outputs:

<div id="object-syntax">
+  <p>こんにちは、kazupon！</p>
+  <p>hi kazupon!</p>
+</div>
+

# Use with transitions

Support Version

🆕 8.7+

When v-t directive is applied to an element inside <transition> component (opens new window), you may notice that the translated message disappears during the transition. This behavior is related to the nature of the <transition> component implementation – all directives in the disappearing element inside the <transition> component will be destroyed before the transition starts. This behavior may result in content flickering on short animations, but is most noticeable on long transitions.

To make sure directive content stays un-touched during a transition, just add the .preserve modifier to the v-t directive definition.

Javascript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { preserve: 'with preserve' },
+    }
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

Templates:

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t.preserve="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

It is also possible to set global settings on the VueI18n instance itself, which will affect all v-t directives without modifier.

Javascript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { preserve: 'with preserve' },
+    },
+    preserveDirectiveContent: true
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

Templates:

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

About the above examples, see the example (opens new window)

# $t vs v-t

# $t

$t is an extended Vue instance method. It has the following pros and cons:

# Pros

You can flexibly use mustache syntax {{}} in templates and also computed props and methods in Vue instance.

# Cons

$t is executed every time when re-render occurs, so it does have translation costs.

# v-t

v-t is a custom directive. It has the following pros and cons:

# Pros

v-t has better performance than the $t method due to its cache with the custom directive, when translated once. Also, pre-translation is possible with the Vue compiler module which was provided by vue-i18n-extensions (opens new window).

Therefore it's possible to make more performance optimizations.

# Cons

v-t cannot be flexibly used like $t, it's rather complex. The translated content with v-t is inserted into the textContent of the element. Also, when you use server-side rendering, you need to set the custom directive (opens new window) to directives option of the createRenderer function.

+ ← + + Component interpolation + + → +

+ + + diff --git a/guide/fallback.html b/guide/fallback.html new file mode 100644 index 000000000..466900c9f --- /dev/null +++ b/guide/fallback.html @@ -0,0 +1,156 @@ + + + + + + Fallback localization | Vue I18n + + + + + + + + + +
Vue I18n

# Fallback localization

Summary: Use fallbackLocale: '<lang>' to choose which language to use when your preferred language lacks a translation.

# Implicit fallback using locales

If a locale is given containing a territory and an optional dialect, the implicit fallback is activated automatically.

For example de-DE-bavarian would fallback

  1. de-DE-bavarian
  2. de-DE
  3. de

To suppress the automatic fallback, add the postfix exclamation mark !, for example de-DE!

# Explicit fallback with one locale

Sometimes some items will not be translated into some languages. In this example, the item hello is available in English but not Japanese:

const messages = {
+  en: {
+    hello: 'Hello, world!'
+  },
+  ja: {
+    // Localization without translation to `hello`
+  }
+}
+

If you want to use (say) en items when an item is not available in your desired locale, set the fallbackLocale option in the VueI18n constructor:

const i18n = new VueI18n({
+  locale: 'ja',
+  fallbackLocale: 'en',
+  messages
+})
+

Template:

<p>{{ $t('hello') }}</p>
+

Output:

<p>Hello, world!</p>
+

By default, falling back to fallbackLocale generates two console warnings:

[vue-i18n] Value of key 'hello' is not a string!
+[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.
+

To suppress these warnings (while keeping those which warn of the total absence of translation for the given key) set silentFallbackWarn: true when initializing the VueI18n instance.

# Explicit fallback with an array of locales

It is possible to set more than one fallback locale by using an array of locales. For example

fallbackLocale: [ 'fr', 'en' ],
+

# Explicit fallback with decision maps

If more complex decision maps for fallback locales are required, it is possible to define decision maps with according fallback locales. +Using the following decision map

fallbackLocale: {
+  /* 1 */ 'de-CH':   ['fr', 'it'],
+  /* 2 */ 'zh-Hant': ['zh-Hans'],
+  /* 3 */ 'es-CL':   ['es-AR'],
+  /* 4 */ 'es':      ['en-GB'],
+  /* 5 */ 'pt':      ['es-AR'],
+  /* 6 */ 'default': ['en', 'da']
+},
+

will result in the following fallback chains

locale fallback chains
'de-CH' de-CH > fr > it > en > da
'de' de > en > da
'zh-Hant' zh-Hant > zh-Hans > zh > en > da
'es-SP' es-SP > es > en-GB > en > da
'es-SP!' es-SP > en > da
'fr' fr > en > da
'pt-BR' pt-BR > pt > es-AR > es > en-GB > en > da
'es-CL' es-CL > es-AR > es > en-GB > en > da

# Fallback interpolation

Summary: Set formatFallbackMessages: true to do template interpolation on translation keys when your language lacks a translation for a key.

Since the keys to the translations are strings, you can use a user-readable message (for a particular language) as a key. +E.g.

const messages = {
+  ja: {
+    'Hello, world!': 'こんにちは、世界!'
+  }
+}
+

This is useful because you don't have to specify a translation for the string "Hello, world!" into English.

In fact, you can even include template parameters in a key. Together with formatFallbackMessages: true, this lets you skip writing templates for your "base" language; the keys are your templates.

const messages = {
+  ru: {
+    'Hello {name}': 'Здравствуйте {name}'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'ru',
+  fallbackLocale: 'en',
+  formatFallbackMessages: true,
+  messages
+})
+

When the template is as below:

<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>
+<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>
+

The following will be output:

<p>Здравствуйте, John</p>
+<p>The weather today is sunny!</p>
+

+ ← + + Component based localization + + → +

+ + + diff --git a/guide/formatting.html b/guide/formatting.html new file mode 100644 index 000000000..d370b699c --- /dev/null +++ b/guide/formatting.html @@ -0,0 +1,204 @@ + + + + + + Formatting | Vue I18n + + + + + + + + + +
Vue I18n

# Formatting

# Named formatting

Locale messages:

const messages = {
+  en: {
+    message: {
+      hello: '{msg} world'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
+

Output:

<p>hello world</p>
+

# List formatting

Locale messages:

const messages = {
+  en: {
+    message: {
+      hello: '{0} world'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.hello', ['hello']) }}</p>
+

Output:

<p>hello world</p>
+

List formatting also accepts array-like objects:

<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>
+

Output:

<p>hello world</p>
+

# HTML formatting

Notice

⚠️ Dynamically localizing arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.

We recommended using the component interpolation feature.

Notice

🆕 8.11+

You can control the use of HTML formatting. see the detail warnHtmlInMessage constructor option and property API.

In some cases you might want to render your translation as an HTML message and not a static string.

const messages = {
+  en: {
+    message: {
+      hello: 'hello <br> world'
+    }
+  }
+}
+

Template:

<p v-html="$t('message.hello')"></p>
+

Output (instead of the pre-formatted message )

<p>hello
+<!--<br> exists but is rendered as html and not a string-->
+world</p>
+

# Support ruby on rails i18n format

Locale messages:

const messages = {
+  en: {
+    message: {
+      hello: '%{msg} world'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
+

Output:

<p>hello world</p>
+

# Custom formatting

Sometimes, you may need to translate using custom formatting (e.g. ICU message syntax (opens new window)).

You can do that with a custom formatter that implements the Formatter Interface (opens new window).

The following custom formatter with ES2015 class syntax:

// Custom Formatter implementation
+class CustomFormatter {
+     constructor (options) {
+       // ...
+     }
+
+     //
+     // interpolate
+     //
+     // @param {string} message
+     //   string of list or named format.
+     //   e.g.
+     //   - named formatting: 'Hi {name}'
+     //   - list formatting: 'Hi {0}'
+     //
+     // @param {Object | Array} values
+     //   values of `message` interpolation.
+     //   passed values with `$t`, `$tc` and `i18n` functional component.
+     //   e.g.
+     //   - $t('hello', { name: 'kazupon' }) -> passed values: Object `{ name: 'kazupon' }`
+     //   - $t('hello', ['kazupon']) -> passed values: Array `['kazupon']`
+     //   - `i18n` functional component (component interpolation)
+     //     <i18n path="hello">
+     //       <p>kazupon</p>
+     //       <p>how are you?</p>
+     //     </i18n>
+     //     -> passed values: Array (included VNode):
+     //        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`
+     //
+     // @return {Array<any>}
+     //   interpolated values. you need to return the following:
+     //   - array of string, when is using `$t` or `$tc`.
+     //   - array included VNode object, when is using `i18n` functional component.
+     //
+     interpolate (message, values) {
+       // implement interpolation logic here
+       // ...
+
+       // return the interpolated array
+       return ['resolved message string']
+     }
+}
+
+// register with `formatter` option
+const i18n = new VueI18n({
+  locale: 'en-US',
+  formatter: new CustomFormatter(/* here the constructor options */),
+  messages: {
+    'en-US': {
+      // ...
+    },
+    // ...
+  }
+})
+
+// Run!
+new Vue({ i18n }).$mount('#app')
+

You can check the custom formatter official example (opens new window).

+ ← + + Pluralization + + → +

+ + + diff --git a/guide/hot-reload.html b/guide/hot-reload.html new file mode 100644 index 000000000..ada976360 --- /dev/null +++ b/guide/hot-reload.html @@ -0,0 +1,189 @@ + + + + + + Hot reloading | Vue I18n + + + + + + + + + +
Vue I18n

# Hot reloading

You can use Webpack's Hot Module Replacement (opens new window) (HMR) feature to watch for changes in localization files and hot reload changes into your application.

# Basic example

If you only use a static set of locales, you can hot reload those locales explicitly:

import Vue from "vue"
+import VueI18n from "vue-i18n"
+import en from './en'
+import ja from './ja'
+
+const messages = {
+  en,
+  ja
+}
+
+// VueI18n instance
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+// Run app
+const app = new Vue({
+  i18n,
+  // ...
+}).$mount('#app')
+
+// Hot updates
+if (module.hot) {
+  module.hot.accept(['./en', './ja'], function () {
+    i18n.setLocaleMessage('en', require('./en').default)
+    i18n.setLocaleMessage('ja', require('./ja').default)
+    // Or the following hot updates via $i18n property
+    // app.$i18n.setLocaleMessage('en', require('./en').default)
+    // app.$i18n.setLocaleMessage('ja', require('./ja').default)
+  })
+}
+

# Advanced example

If you want to support a changing set of locales, you can hot reload those locales dynamically using require.context:

import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+// Load all locales and remember context
+function loadMessages() {
+  const context = require.context("./locales", true, /[a-z0-9-_]+\.json$/i);
+
+  const messages = context
+    .keys()
+    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
+    .reduce(
+      (messages, { key, locale }) => ({
+        ...messages,
+        [locale]: context(key),
+      }),
+      {}
+    );
+
+  return { context, messages };
+}
+
+const { context, messages } = loadMessages();
+
+// VueI18n instance
+const i18n = new VueI18n({
+  locale: "en",
+  messages,
+});
+
+// Run app
+const app = new Vue({
+  i18n,
+  // ...
+}).$mount('#app');
+
+// Hot updates
+if (module.hot) {
+  module.hot.accept(context.id, () => {
+    const { messages: newMessages } = loadMessages();
+
+    Object.keys(newMessages)
+      .filter((locale) => messages[locale] !== newMessages[locale])
+      .forEach((locale) => {
+        messages[locale] = newMessages[locale];
+        i18n.setLocaleMessage(locale, messages[locale]);
+      });
+  });
+}
+

+ ← + + Locale changing + + → +

+ + + diff --git a/guide/interpolation.html b/guide/interpolation.html new file mode 100644 index 000000000..b89d13c98 --- /dev/null +++ b/guide/interpolation.html @@ -0,0 +1,255 @@ + + + + + + Component interpolation | Vue I18n + + + + + + + + + +
Vue I18n

# Component interpolation

# Basic Usage

Support Version

🆕 7.0+

Sometimes, we need to localize with a locale message that was included in a HTML tag or component. For example:

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

In the above message, if you use $t, you will probably try to compose the following locale messages:

const messages = {
+  en: {
+    term1: 'I Accept xxx\'s',
+    term2: 'Terms of Service Agreement'
+  }
+}
+

And your localized template may look like this:

<p>{{ $t('term1') }}<a href="/term">{{ $t('term2') }}</a></p>
+

Output:

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

This is very cumbersome, and if you configure the <a> tag in a locale message, there is a possibility of XSS vulnerabilities due to localizing with +v-html="$t('term')".

You can avoid it using the i18n functional component. For example:

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ja: {
+    tos: '利用規約',
+    term: '私は xxx の{0}に同意します。'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

the following output:

<div id="app">
+  <!-- ... -->
+  <label for="tos">
+    I accept xxx <a href="/term" target="_blank">Term of Service</a>.
+  </label>
+  <!-- ... -->
+</div>
+

About the above example, see the example (opens new window)

The children of i18n functional component are interpolated with locale message of path prop.

In the above example:

<a :href="url" target="_blank">{{ $t('tos') }}</a>

is interpolated with term locale message.

In the above example, the component interpolation follows the list formatting. The children of i18n functional component are interpolated by their order of appearance.

You can choose the root container's node type by specifying a tag prop. If omitted, it defaults to 'span'. You can also set it to the boolean value false to insert the child nodes directly without creating a root element.

# Slots syntax usage

Support Version

🆕 8.14+

It's more convenient to use the named slots syntax. For example:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <template v-slot:limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template v-slot:action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

Outputs:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

In Vue 2.6 and later, you can use the following slots syntax in templates:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <template #limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template #action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n>
+  <!-- ... -->
+</div>
+

Limitation

⚠️ In i18n component, slots props are not supported.

# Places syntax usage

Important!!

In the next major version, the place and places props will be deprecated. Please switch to slots syntax.

Support Version

🆕 7.2+

Notice

⚠️ In i18n component, text content consisting of only white spaces will be omitted.

Named formatting is supported with the help of place attribute. For example:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <span place="limit">{{ changeLimit }}</span>
+    <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

Outputs:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

Notice

⚠️ To use named formatting, all children of i18n component must have place attribute set. Otherwise it will fallback to list formatting.

If you still want to interpolate text content in named formatting, you could define places property on i18n component. For example:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p" :places="{ limit: refundLimit }">
+    <a place="action" :href="refundUrl">{{ $t('refund') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+

Outputs:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/refund">refund your ticket</a> until 30 minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

+ ← + + Single file components + + → +

+ + + diff --git a/guide/lazy-loading.html b/guide/lazy-loading.html new file mode 100644 index 000000000..91bbaf709 --- /dev/null +++ b/guide/lazy-loading.html @@ -0,0 +1,164 @@ + + + + + + Lazy loading translations | Vue I18n + + + + + + + + + +
Vue I18n

# Lazy loading translations

Loading all of your translation files at once is overkill and unnecessary.

Lazy loading or asynchronously loading the translation files is really easy when using Webpack.

Let´s assume we have a project directory similar to the one below:

our-cool-project
+-dist
+-src
+--routes
+--store
+--setup
+---i18n-setup.js
+--lang
+---en.js
+---it.js
+

The lang folder is where all of our translation files reside. The setup folder is where our arbitrary setup files like the i18n-setup, global component inits, plugin inits and other reside.

//i18n-setup.js
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from '@/lang/en'
+import axios from 'axios'
+
+Vue.use(VueI18n)
+
+export const i18n = new VueI18n({
+  locale: 'en', // set locale
+  fallbackLocale: 'en',
+  messages // set locale messages
+})
+
+const loadedLanguages = ['en'] // our default language that is preloaded
+
+function setI18nLanguage (lang) {
+  i18n.locale = lang
+  axios.defaults.headers.common['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync(lang) {
+  // If the same language
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // If the language hasn't been loaded yet
+  return import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}.js`).then(
+    messages => {
+      i18n.setLocaleMessage(lang, messages.default)
+      loadedLanguages.push(lang)
+      return setI18nLanguage(lang)
+    }
+  )
+}
+

In short we are creating a new VueI18n instance as we normally would. Then we are creating a loadedLanguages array that will keep track of our loaded languages. Next is the setI18nLanguage function that will actually change the language in our vueI18n instance, axios and where ever else is needed.

The loadLanguageAsync function is what we will actually use to change the languages. Loading the new files is done via the import function, which is generously provided by Webpack and it allows us to load files dynamically, and because it uses promises we can easily wait for the loading to finish.

You can learn more about the import function in the Webpack documentation (opens new window).

Using the loadLanguageAsync function is straightforward. A common use case is inside a vue-router beforeEach hook.

router.beforeEach((to, from, next) => {
+  const lang = to.params.lang
+  loadLanguageAsync(lang).then(() => next())
+})
+

We could improve this by checking if the lang is actually supported by us or not, call reject so we can catch that in the beforeEach stopping the route transition.

+ ← + + Tooling + + → +

+ + + diff --git a/guide/locale.html b/guide/locale.html new file mode 100644 index 000000000..6d3c5c16e --- /dev/null +++ b/guide/locale.html @@ -0,0 +1,139 @@ + + + + + + Locale changing | Vue I18n + + + + + + + + + +
Vue I18n

# Locale changing

Normally, using the root Vue instance as the starting point, all child components are localized using the locale property of the VueI18n class as a reference.

Sometimes you might want to dynamically change the locale. In that case you can change the value of the locale property of the VueI18n instance.

const i18n = new VueI18n({
+  locale: 'ja', // set locale
+  ...
+})
+
+// create root Vue instance
+new Vue({
+  i18n,
+  ...
+}).$mount('#app')
+
+// change other locale
+i18n.locale = 'en'
+

Each component contains a VueI18n instance referenced as the $i18n property that can also be used to change the locale.

Example:

<template>
+  <div class="locale-changer">
+    <select v-model="$i18n.locale">
+      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
+        {{ lang }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'locale-changer',
+  data () {
+    return { langs: ['ja', 'en'] }
+  }
+}
+</script>
+

Notice

⚠️ Locale changing is ignored for components that use sync: false.

Component vs. root scope

⚠️ Changing $i18n.locale inside a component does not update the root locale. +If you rely on the root locale, for example when using root fallbacks, use $root.$i18n.locale instead of $i18n.locale.

+ ← + + Lazy loading translations + + → +

+ + + diff --git a/guide/messages.html b/guide/messages.html new file mode 100644 index 000000000..eaa9c2c6d --- /dev/null +++ b/guide/messages.html @@ -0,0 +1,236 @@ + + + + + + Locale messages syntax | Vue I18n + + + + + + + + + +
Vue I18n

# Locale messages syntax

# Structure

Locale Messages syntax below:

// As Flowtype definition, Locale Messages syntax like BNF annotation
+type LocaleMessages = { [key: Locale]: LocaleMessageObject };
+type LocaleMessageObject = { [key: Path]: LocaleMessage };
+type LocaleMessageArray = LocaleMessage[];
+type MessageContext = {
+  list: (index: number) => mixed,
+  named: (key: string) => mixed,
+  linked: (key: string) => TranslateResult,
+  values: any, // NOTE: not compatible for vue-i18n@v9.x
+  path: string, // NOTE: not compatible for vue-i18n@v9.x
+  formatter: Formatter, // NOTE: not compatible for vue-i18n@v9.x
+  messages: LocaleMessages, // NOTE: not compatible for vue-i18n@v9.x
+  locale: Locale // NOTE: not compatible for vue-i18n@v9.x
+};
+type MessageFunction = (ctx: MessageContext) => string;
+type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;
+type Locale = string;
+type Path = string;
+

Based on the above syntax, You can configure the following Locale Messages structure:

{
+  "en": {  // 'en' Locale
+    "key1": "this is message1", // basic
+    "nested": { // nested
+      "message1": "this is nested message1"
+    },
+    "errors": [ // array
+      "this is 0 error code message",
+      {  // object in array
+        "internal1": "this is internal 1 error message"
+      },
+      [  // array in array
+        "this is nested array error 1"
+      ]
+    ]
+  },
+  "ja": { // 'ja' Locale
+    // ...
+  }
+}
+

In the above Locale Messages structure, You can translate using below key paths.

<div id="app">
+  <!-- basic -->
+  <p>{{ $t('key1') }}</p>
+  <!-- nested -->
+  <p>{{ $t('nested.message1') }}</p>
+  <!-- array -->
+  <p>{{ $t('errors[0]') }}</p>
+  <!-- object in array -->
+  <p>{{ $t('errors[1].internal1') }}</p>
+  <!-- array in array -->
+  <p>{{ $t('errors[2][0]') }}</p>
+</div>
+

Output the following:

<div id="app">
+  <!-- basic -->
+  <p>this is message1</p>
+  <!-- nested -->
+  <p>this is nested message1</p>
+  <!-- array -->
+  <p>this is 0 error code message</p>
+  <!-- object in array -->
+  <p>this is internal 1 error message</p>
+  <!-- array in array -->
+  <p>this is nested array error 1</p>
+</div>
+

# Linked locale messages

If there's a translation key that will always have the same concrete text as another one you can just link to it. To link to another translation key, all you have to do is to prefix its contents with an @: sign followed by the full name of the translation key including the namespace you want to link to.

Locale messages the below:

const messages = {
+  en: {
+    message: {
+      the_world: 'the world',
+      dio: 'DIO:',
+      linked: '@:message.dio @:message.the_world !!!!'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.linked') }}</p>
+

Output:

<p>DIO: the world !!!!</p>
+

# Formatting linked locale messages

If the language distinguish cases of character, you may need control the case of the linked locale messages. +Linked messages can be formatted with modifier @.modifier:key

The below modifiers are available currently.

  • upper: Uppercase all characters in the linked message.
  • lower: Lowercase all characters in the linked message.
  • capitalize: Capitalize the first character in the linked message.

Locale messages the below:

const messages = {
+  en: {
+    message: {
+      homeAddress: 'Home address',
+      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
+    }
+  }
+}
+
<label>{{ $t('message.homeAddress') }}</label>
+
+<p class="error">{{ $t('message.missingHomeAddress') }}</p>
+

Output the below:

<label>Home address</label>
+
+<p class="error">Please provide home address</p>
+

You can add modifiers or overwrite the existing ones passing the modifiers options to the VueI18n constructor.

const i18n = new VueI18n({
+  locale: 'en',
+  modifiers: {
+    // Adding a new modifier
+    snakeCase: (str) => str.split(' ').join('-')
+  },
+  messages: {
+    // ...
+  },
+})
+

# Grouping by brackets

A translation key of linked locale message can also have the form of @:(message.foo.bar.baz) in which the link to another translation key is within brackets ().

This can be useful if the link @:message.something is followed by period ., which otherwise would be part of the link and may not need to be.

Locale messages:

const messages = {
+  en: {
+    message: {
+      dio: 'DIO',
+      linked: 'There\'s a reason, you lost, @:(message.dio).'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.linked') }}</p>
+

Output:

<p>There's a reason, you lost, DIO.</p>
+

# Message Function

vue-i18n recommends using the string base on list or named format as locale messages when translating messages.

There are situations however, where you really need the full programmatic power of JavaScript, due to the complex language syntax. So instead of string-based messages, you can use the message function.

The following is a message function that returns a simple greeting:

const messages = {
+  en: {
+    greeting: (ctx) => 'hello!'
+  }
+}
+

The use of the message function is very easy! You just specify the key of the message function with $t or t:

<p>{{ $t('greeting') }}</p>
+

Output is the below:

<p>hello!</p>
+

The message function outputs the message of the return value of the message function.

# Named formatting

vue-i18n supports named formatting as a string-based message format. vue-i18n interpolate the parameter values with $t or t, and it can be output it.

You can do the same thing with the message function by using message context:

here is the example of greeting:

const messages = {
+  en: {
+    greeting: (ctx) => `hello, ${ctx.named('name')}!`
+  }
+}
+

Template:

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>
+

Output is the below:

<p>hello, DIO!</p>
+

The message context has a named function. You need to specify the key that resolves the value specified with the named of $t or t.

# List formatting

The use of the list format is similar to the named format described above.

vue-i18n supports list formatting as a string-based message format. vue-i18n interpolate the parameter values with $t or t, and it can be output it.

You can do the same thing with the message function by using message context:

here is the example of greeting:

const messages = {
+  en: {
+    greeting: (ctx) => `hello, ${ctx.list(0)}!`
+  }
+}
+

Template:

<p>{{ $t('greeting', ['DIO']) }}</p>
+

Output is the below:

<p>hello, DIO!</p>
+

The message context has a list function. You need to specify the index that resolves the value specified with the list of $t or t.

# Limitation

In the message function, the following functions, which are provided on a string basis, are not available via a message context:

  • Pluralization

And also, the following props of message context is not compatible for vue-i18 v9.x or later:

  • path
  • locale
  • messages
  • formatter

If you are using these message context props means that it will be difficult to migrate to vue-i18n v9.x or later.

+ ← + + Fallback localization + + → +

+ + + diff --git a/guide/number.html b/guide/number.html new file mode 100644 index 000000000..08acd8314 --- /dev/null +++ b/guide/number.html @@ -0,0 +1,174 @@ + + + + + + Number localization | Vue I18n + + + + + + + + + +
Vue I18n

# Number localization

Support Version

🆕 7.0+

You can localize the number with your definition formats.

Number formats the below:

const numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD'
+    }
+  },
+  'ja-JP': {
+    currency: {
+      style: 'currency',
+      currency: 'JPY',
+      currencyDisplay: 'symbol'
+    }
+  }
+}
+

As the above, you can define named number formats (e.g. currency, etc), and you need to use the options with ECMA-402 Intl.NumberFormat (opens new window)

After that, when using the locale messages, you need to specify the numberFormats option of the VueI18n constructor:

const i18n = new VueI18n({
+  numberFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

Template the below:

<div id="app">
+  <p>{{ $n(100, 'currency') }}</p>
+  <p>{{ $n(100, 'currency', 'ja-JP') }}</p>
+</div>
+

Output the below:

<div id="app">
+  <p>$100.00</p>
+  <p>￥100</p>
+</div>
+

# Custom formatting

Support Version

🆕 8.10+

$n method returns resulting string with fully formatted number, which can only be used as a whole. In situations when you need to style some part of the formatted number (like fraction digits), $n is not enough. In such cases <i18n-n> functional component will be of help.

With a minimum set of properties, <i18n-n> generates the same output as $n, wrapped into configured DOM element.

The following template:

<div id="app">
+  <i18n-n :value="100"></i18n-n>
+  <i18n-n :value="100" format="currency"></i18n-n>
+  <i18n-n :value="100" format="currency" locale="ja-JP"></i18n-n>
+</div>
+

will produce the below output:

<div id="app">
+  <span>100</span>
+  <span>$100.00</span>
+  <span>￥100</span>
+</div>
+

But the real power of this component comes into play when it is used with scoped slots (opens new window).

Let's say there is a requirement to render the integer part of the number with a bolder font. This can be achieved by specifying integer scoped slot element:

<i18n-n :value="100" format="currency">
+  <template v-slot:integer="slotProps">
+    <span style="font-weight: bold">{{ slotProps.integer }}</span>
+  </template>
+</i18n-n>
+

Template above will result in the following HTML:

<span>$<span style="font-weight: bold">100</span>.00</span>
+

It is possible to specify multiple scoped slots at the same time:

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
+  <template v-slot:currency="slotProps">
+    <span style="color: green">{{ slotProps.currency }}</span>
+  </template>
+  <template v-slot:integer="slotProps">
+    <span style="font-weight: bold">{{ slotProps.integer }}</span>
+  </template>
+  <template v-slot:group="slotProps">
+    <span style="font-weight: bold">{{ slotProps.group }}</span>
+  </template>
+  <template v-slot:fraction="slotProps">
+    <span style="font-size: small">{{ slotProps.fraction }}</span>
+  </template>
+</i18n-n>
+

(this resulting HTML was formatted for better readability)

<span>
+  <span style="color: green">€</span>
+  <span style="font-weight: bold">1</span>
+  <span style="font-weight: bold">,</span>
+  <span style="font-weight: bold">234</span>
+  <span style="font-size: small">00</span>
+</span>
+

You can choose the root container's node type by specifying a tag prop. If omitted, it defaults to 'span'. You can also set it to the boolean value false to insert the child nodes directly without creating a root element.

Full list of the supported scoped slots as well as other <i18n-n> properties can be found on API page.

+ ← + + Locale messages syntax + + → +

+ + + diff --git a/guide/pluralization.html b/guide/pluralization.html new file mode 100644 index 000000000..d25231a95 --- /dev/null +++ b/guide/pluralization.html @@ -0,0 +1,205 @@ + + + + + + Pluralization | Vue I18n + + + + + + + + + +
Vue I18n

# Pluralization

You can translate with pluralization. You must define the locale that have a pipe | separator, and define plurals in pipe separator.

Your template will need to use $tc() instead of $t().

Locale messages below:

const messages = {
+  en: {
+    car: 'car | cars',
+    apple: 'no apples | one apple | {count} apples'
+  }
+}
+

Template below:

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+
+<p>{{ $tc('apple', 0) }}</p>
+<p>{{ $tc('apple', 1) }}</p>
+<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+

Output below:

<p>car</p>
+<p>cars</p>
+
+<p>no apples</p>
+<p>one apple</p>
+<p>10 apples</p>
+

# Accessing the number via the pre-defined argument

You don't need to explicitly give the number for pluralization. +The number can be accessed within locale messages via pre-defined named arguments {count} and/or {n}. +You can overwrite those pre-defined named arguments if necessary.

Locale messages the below:

const messages = {
+  en: {
+    apple: 'no apples | one apple | {count} apples',
+    banana: 'no bananas | {n} banana | {n} bananas'
+  }
+}
+

Template below:

<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+<p>{{ $tc('apple', 10) }}</p>
+
+<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
+<p>{{ $tc('banana', 1) }}</p>
+<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>
+

Output below:

<p>10 apples</p>
+<p>10 apples</p>
+
+<p>1 banana</p>
+<p>1 banana</p>
+<p>too many bananas</p>
+

# Custom pluralization

This feature is available since version 8.0

Such pluralization, however, does not apply to all languages (Slavic languages, for example, have different pluralization rules).

In order to implement these rules you can pass an optional pluralizationRules object into VueI18n constructor options.

Very simplified example using rules for Slavic languages (Russian, Ukrainian, etc.):

new VueI18n({
+  // Key - language to use the rule for, `'ru'`, in this case
+  // Value - function to choose right plural form
+  pluralizationRules: {
+    /**
+     * @param choice {number} a choice index given by the input to $tc: `$tc('path.to.rule', choiceIndex)`
+     * @param choicesLength {number} an overall amount of available choices
+     * @returns a final choice index to select plural word by
+     */
+    'ru': function(choice, choicesLength) {
+      // this === VueI18n instance, so the locale property also exists here
+
+      if (choice === 0) {
+        return 0;
+      }
+
+      const teen = choice > 10 && choice < 20;
+      const endsWithOne = choice % 10 === 1;
+
+      if (choicesLength < 4) {
+        return (!teen && endsWithOne) ? 1 : 2;
+      }
+      if (!teen && endsWithOne) {
+        return 1;
+      }
+      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+        return 2;
+      }
+
+      return (choicesLength < 4) ? 2 : 3;
+    }
+  }
+})
+

This would effectively give this:

const messages = {
+  ru: {
+    car: '0 машин | {n} машина | {n} машины | {n} машин',
+    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
+  }
+}
+

Where the format is 0 things | things count ends with 1 | things count ends with 2-4 | things count ends with 5-9, 0 and teens (10-19). +P.S. Slavic pluralization is difficult, you can read more about it here (opens new window).

Your template still needs to use $tc(), not $t():

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+<p>{{ $tc('car', 4) }}</p>
+<p>{{ $tc('car', 12) }}</p>
+<p>{{ $tc('car', 21) }}</p>
+
+<p>{{ $tc('banana', 0) }}</p>
+<p>{{ $tc('banana', 4) }}</p>
+<p>{{ $tc('banana', 11) }}</p>
+<p>{{ $tc('banana', 31) }}</p>
+

Which results in:

<p>1 машина</p>
+<p>2 машины</p>
+<p>4 машины</p>
+<p>12 машин</p>
+<p>21 машина</p>
+
+<p>нет бананов</p>
+<p>4 банана</p>
+<p>11 бананов</p>
+<p>31 банан</p>
+

# Default pluralization

If your current locale is not found in a pluralization map, the default rule of the english language will be used.

+ ← + + DateTime localization + + → +

+ + + diff --git a/guide/sfc.html b/guide/sfc.html new file mode 100644 index 000000000..c715950d5 --- /dev/null +++ b/guide/sfc.html @@ -0,0 +1,394 @@ + + + + + + Single file components | Vue I18n + + + + + + + + + +
Vue I18n

# Single file components

# Basic Usage

If you are building Vue component or Vue application using single file components, you can manage the locale messages i18n custom block.

The following in single file components example (opens new window):

<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<template>
+  <div id="app">
+    <label for="locale">locale</label>
+    <select v-model="locale">
+      <option>en</option>
+      <option>ja</option>
+    </select>
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () {
+    this.$i18n.locale = 'en';
+    return { locale: 'en' }
+  },
+  watch: {
+    locale (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>
+

# Installing vue-i18n-loader

You need to install vue-loader and vue-i18n-loader to use <i18n> custom blocks. While vue-loader (opens new window) most likely is already used in your project if you are working with single file components, you must install vue-i18n-loader (opens new window) additionally:

npm i --save-dev @intlify/vue-i18n-loader
+

# Webpack

For Webpack the configuration below is required:

for vue-loader v15 or later:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        loader: '@intlify/vue-i18n-loader'
+      }
+      // ...
+    ]
+  },
+  // ...
+}
+

for vue-loader v14:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // you need to specify `i18n` loaders key with `vue-i18n-loader` (https://github.com/intlify/vue-i18n-loader)
+            i18n: '@intlify/vue-i18n-loader'
+          }
+        }
+      },
+      // ...
+    ]
+  },
+  // ...
+}
+

# Vue CLI 3.0

Vue CLI 3.0 (opens new window) hides the webpack configuration, so, if we want to add support to the <i18n> tag inside a single file component we need to modify the existing configuration.

In order to do that we have to create a vue.config.js at the root of our project. Once we have done that, we have to include the following:

for vue-loader v15 or later:

module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule("i18n")
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use("i18n")
+        .loader("@intlify/vue-i18n-loader")
+        .end();
+  }
+}
+

for vue-loader v14:

const merge = require('deepmerge')
+
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options =>
+        merge(options, {
+          loaders: {
+            i18n: '@intlify/vue-i18n-loader'
+          }
+        })
+      )
+  }
+}
+

Don 't forget to install deepmerge (opens new window)! (npm i deepmerge -D or yarn add deepmerge -D)

If you want to read more about modifying the existing configuration click here (opens new window).

# Laravel-Mix

for Laravel-mix 4 with vue-loader v15 or later:

// Extend Mix with the "i18n" method, that loads the vue-i18n-loader
+mix.extend( 'i18n', new class {
+        webpackRules() {
+            return [
+                {
+                    resourceQuery: /blockType=i18n/,
+                    type:          'javascript/auto',
+                    loader:        '@intlify/vue-i18n-loader',
+                },
+            ];
+        }
+    }(),
+);
+
+// Make sure to call the .i18n() (to load the loader) before .js(..., ...)
+mix.i18n()
+   .js( 'resources/js/App.js', 'public/js/app.js' )
+   ...
+

for Laravel-mix 2 with vue-loader v14:

As of V2.1 (opens new window) of Laravel-mix, you can add custom rules via mix.extend(). Laravel mix already has its own rules for handling .vue files. To add the vue-i18n-loader, add the following to webpack.mix.js

// The below code will inject i18n Kazupon/vue-18-loader as a loader for .vue files.
+mix.extend( 'i18n', function( webpackConfig, ...args ) {
+    webpackConfig.module.rules.forEach( ( module ) => {
+        // Search for the "vue-loader" component, which handles .vue files.
+        if( module.loader !== 'vue-loader' ) {
+            return;
+        }
+
+        // Within this module, add the vue-i18n-loader for the i18n tag.
+        module.options.loaders.i18n = '@intlify/vue-i18n-loader';
+    } );
+} );
+
+// Make sure to call .i18n() before .js(..., ...)
+mix.i18n()
+   .js( 'resources/assets/js/App.js', 'public/js/app.js' )
+   ...
+

# YAML loading

i18n custom blocks need to specify JSON format, also you can use YAML format by using pre-loader feature of vue-loader.

the i18n custom blocks below of YAML format:

<i18n>
+en:
+  hello: "hello world!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+

Webpack conf the below:

for vue-loader v15 or later:

// Vue CLI 3.0
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule("i18n")
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use("i18n")
+        .loader("@intlify/vue-i18n-loader")
+        .end()
+      .use('yaml')
+        .loader('yaml-loader')
+        .end()
+  }
+}
+

for vue-loader v14:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preLoaders: {
+            i18n: 'yaml-loader'
+          },
+          loaders: {
+            i18n: '@intlify/vue-i18n-loader'
+          }
+        }
+      },
+      // ...
+    ]
+  },
+  // ...
+}
+

# Multiple custom blocks

You can use locale messages with multiple i18n custom blocks.

<i18n src="./common/locales.json"></i18n>
+<i18n>
+  {
+    "en": {
+      "hello": "hello world!"
+    },
+    "ja": {
+      "hello": "こんにちは、世界！"
+    }
+  }
+</i18n>
+

In the above, first custom block load the common locale message with src attribute, second custom block load the locale message that is defined only at single file component. These locale messages will be merged as locale message of component.

In this way, multiple custom blocks useful when want to be used as module.

# Scoped style

When using vue-i18n with scoped style, it's important to remember to use a deep selector (opens new window) for styling an element inside the translation string. For example:

Translation contains only text (Work without deep selector)

<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界"
+  }
+}
+</i18n>
+
+<template>
+  <div class="parent">
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<!-- Will work -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+</style>
+

Translation with HTML element (Must use deep selector)

<i18n>
+{
+  "en": {
+    "hello": "hello<span>world!</span>"
+  },
+  "ja": {
+    "hello": "こんにちは、<span>世界！</span>"
+  }
+}
+</i18n>
+
+<template>
+  <div class="parent">
+    <p v-html="$t('hello')"></p>
+  </div>
+</template>
+
+<!-- Won't work -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p span {
+    color: red;
+  }
+</style>
+
+<!-- Will work >>> -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p >>> span {
+    color: red;
+  }
+</style>
+
+<!-- Will work /deep/ -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p /deep/ span {
+    color: red;
+  }
+</style>
+
+<!-- Will work ::v-deep -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  ::v-deep .parent p span {
+    color: red;
+  }
+</style>
+

# Custom blocks in functional component

If the single file components have the template using a functional component, and you had been defined i18n custom blocks, note you cannot localize using locale messages.

For example, the following code cannot localize with the locale message of i18n custom block.

<i18n>
+{
+  "en": {
+    "hello": "hello world"
+  },
+  "ja": {
+    "hello": "こんにちは、世界"
+  }
+}
+</i18n>
+
+<template functional>
+  <!-- 'hello' of locale messages of parent instance -->
+  <p>{{ parent.$t('hello') }}</p>
+</template>
+

+ ← + + Hot reloading + + → +

+ + + diff --git a/guide/tooling.html b/guide/tooling.html new file mode 100644 index 000000000..9f81a43b7 --- /dev/null +++ b/guide/tooling.html @@ -0,0 +1,103 @@ + + + + + + Tooling | Vue I18n + + + + + + + + + +
Vue I18n

# Tooling

To support the i18n of Vue applications, some tools are officially provided.

There are also tools from third vendors integrating Vue I18n.

# Official tooling

# Vue CLI Plugin

vue-cli-plugin-i18n (opens new window) is officially provided as the Vue CLI Plugin.

With this plugin, you can setup the i18n environment for the Vue application, and support the i18n development environment.

# Nuxt Module

nuxt-i18n (opens new window) is corresponding Nuxt.js module.

# Webpack loader

vue-i18n-loader (opens new window) is an officially provided webpack loader.

With this loader, you can use the i18n custom block in the Single file components.

In about i18n custom block, see the Single file components section

# ESLint Plugin

eslint-plugin-vue-i18n (opens new window) is ESLint plugin for Vue I18n.

It easily integrates some localization lint features to your Vue.js Application.

# Extensions

vue-i18n-extensions (opens new window) provides some extensions for Vue I18n.

You can use this extension to enable SSR and improve i18n performance.

# 3rd party tooling

# BabelEdit

BabelEdit (opens new window) is translation editor for web apps.

BabelEdit can translate json files, and it can also translate i18n custom block of Single-file components.

Read more about BabelEdit in tutorial page (opens new window).

# i18n Ally

i18n Ally (opens new window) is i18n extension for VSCode.

i18n Ally give awesome DX for your i18n development.

Read more about i18n Ally in README (opens new window).

# i18nPlugin (intellij platform)

i18nPlugin (opens new window) Intellij idea i18next support plugin ( Jetbrains plugin page (opens new window)).

Plugin for i18n typescript/javascript/PHP. Supports vue-i18n. To enable vue-i18n support go to settings -> Tools -> i18n Plugin configuration and check "Vue-i18n". You need set vue locales directory (locales by default).

# vue-i18n-extract

vue-i18n-extract (opens new window) performs static analysis on a Vue.js project based on vue-i18n and reports the following information:

  • list of all the unused vue-i18n keys (entries found in the language files but not used in the project)
  • list of all the missing keys (entries fond in the project but not in the language files)

It's possible to show the output in the console or to write it in a json file.

The missing keys can be also automatically added to the given language files.

+ ← +

+ + + diff --git a/index.html b/index.html new file mode 100644 index 000000000..b6e012153 --- /dev/null +++ b/index.html @@ -0,0 +1,109 @@ + + + + + + Vue I18n + + + + + + + + + +
Vue I18n
hero

+ Vue I18n +

+ Vue I18n is internationalization plugin for Vue.js +

+ Get Started → +

Easy

You can introduce internationalization into your app with simple API

Powerful

In addition to simple translation, support localization such as pluralization, number, datetime ... etc

Component-oriented

You can manage locale messages on single file component

🏅 Platinum Sponsors

zenarchitects

✨ Special Sponsors

PLAID

🥇 Gold Sponsors

Nuxt.js RapidAPI Localazy Crowdin

🥈 Silver Sponsors

🥉 Bronze Sponsors

vuemastery
+ MIT Licensed | Copyright © 2020 kazuya kawaguchi +
+ + + diff --git a/installation.html b/installation.html new file mode 100644 index 000000000..e1dbf5692 --- /dev/null +++ b/installation.html @@ -0,0 +1,122 @@ + + + + + + Installation | Vue I18n + + + + + + + + + +
Vue I18n

# Installation

# Compatibility Note

  • Vue.js 2.0.0+

# Direct Download / CDN

https://unpkg.com/vue-i18n@8 (opens new window)

unpkg.com (opens new window) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like https://unpkg.com/vue-i18n@8.28.2/dist/vue-i18n.js (opens new window)

Include vue-i18n after Vue and it will install itself automatically:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n@8"></script>
+

# NPM

npm install vue-i18n@8
+

# Yarn

yarn add vue-i18n@8
+

When using with a module system, you must explicitly install the vue-i18n +via Vue.use():

import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+

You don't need to do this when using global script tags <script>.

# Vue Cli 3.x

vue add i18n
+

You need Vue cli 3.x as pre-requisite, you can install it on your shell with the next command:

npm install @vue/cli -g
+

# Dev Build

You will have to clone directly from GitHub and build vue-i18n yourself if you want to use the latest dev build.

git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
+cd node_modules/vue-i18n
+npm install # or `yarn`
+npm run build  # or `yarn run build`
+

# Explanation of Different Builds

In the dist/ directory of the NPM package (opens new window) you will find many different builds of VueI18n. Here’s an overview of the difference between them:

  • UMD: vue-i18n.js
  • CommonJS: vue-i18n.common.js
  • ES Module for bundlers: vue-i18n.esm.js
  • ES Module for browsers: vue-i18n.esm.browser.js

# Terms

+ ← + + Formatting + + → +

+ + + diff --git a/introduction.html b/introduction.html new file mode 100644 index 000000000..6d70fdb05 --- /dev/null +++ b/introduction.html @@ -0,0 +1,103 @@ + + + + + + Introduction | Vue I18n + + + + + + + + + +
Vue I18n

# Introduction

Notice

You are reading the documentation of Vue I18n v8.x for Vue 2. If you are working with Vue 3, use the Vue I18n v9 documentation (opens new window) instead.

Vue I18n is internationalization plugin of Vue.js. It easily integrates some localization features to your Vue.js Application.

Go to Get Started

# Sponsors

# 🏅 Platinum

zenarchitects

# ✨ Special

PLAID

# 🥇 Gold

Nuxt.js

RapidAPI

Localazy

Crowdin

# 🥈 Silver

# 🥉 Bronze

vuemastery

# Become a Sponsor

Is your company using vue-i18n, vue-cli-plugin-i18n and other tools to build awesome apps? Join the GitHub and become a sponsor to add your logo on this documentation! Supporting me on Sponsor allows me to work less for a job and to work more on Free Open Source Software such as vue-i18n and Intlify (opens new window) projects! Thank you!

+ Getting started + + → +

+ + + diff --git a/patrons/RapidAPI.png b/patrons/RapidAPI.png new file mode 100644 index 0000000000000000000000000000000000000000..ada74016b457cfa064b1728415501ce8bf8bc5af GIT binary patch literal 62713 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 LtVo5BuJ8W + + + RapidAPI Logo Blue + Created with Sketch. + + + + + \ No newline at end of file diff --git a/patrons/babeledit.png b/patrons/babeledit.png new file mode 100644 index 0000000000000000000000000000000000000000..13e250d8a0864d195d5093335e826bc68c0d9657 GIT binary patch literal 6976 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 bm%%KeJlkK49&!MiF_40+s!X+%S=j#oL@NxC literal 0 HcmV?d00001 diff --git a/patrons/babeledit.svg b/patrons/babeledit.svg new file mode 100644 index 000000000..14a37c1d9 --- /dev/null +++ b/patrons/babeledit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/patrons/crowdin.png b/patrons/crowdin.png new file mode 100644 index 0000000000000000000000000000000000000000..1291e8a17dbb76dfd41c1a7f3d1c5f1ae6083734 GIT binary patch literal 7121 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 PhdEUhH5KaREW`f;+q^Qw literal 0 HcmV?d00001 diff --git a/patrons/crowdin.svg b/patrons/crowdin.svg new file mode 100644 index 000000000..4fe34be42 --- /dev/null +++ b/patrons/crowdin.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/patrons/cypress.svg b/patrons/cypress.svg new file mode 100644 index 000000000..7e33a941d --- /dev/null +++ b/patrons/cypress.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/patrons/decibel.png b/patrons/decibel.png new file mode 100644 index 0000000000000000000000000000000000000000..980245c20fc18c103d1ded321094e5fe198f1e80 GIT binary patch literal 54069 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 V?iWVoDkBCU@O1TaS?83{1OO#A#8ChM literal 0 HcmV?d00001 diff --git a/patrons/localazy.svg b/patrons/localazy.svg new file mode 100644 index 000000000..c86ec7934 --- /dev/null +++ b/patrons/localazy.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/patrons/locize.png b/patrons/locize.png new file mode 100644 index 0000000000000000000000000000000000000000..f7008dd7fd8c71abd037bce907509d60f9b6f446 GIT binary patch literal 2601 zcmb7-`#;kQ1AxD~*~OZSF6WRMY?|<+$QQ`X&N-q4wJQGP;Vxx`Rz043^$-eCG9hy!=-0 z*N9jAN~W`J;lNT&MBmky(}ISm>zO5QmnRV-VJG%pM3zqFw?9!9oEt9Kcneb&DUr>FVxo zKiJtb@VN9Cq(R~@OE_+1bP|Tdn2Td4=NhIeHN_|X-m^qnnO~cSs0qH$k2wprjv$bm zb6D-c89D%ltvah#B3xORNaXC07DWG%q55_d9?$Bfy=Gzn3RwsO7V_dcqA&xl6{I^3 zTRiH1`&vadGD5|y!+=1&ps79ey48_@hi(m5?-ov@Lnv-^?K)(o$Ms~&DxjxH)gFO z{7n4XOr|~!V?IpO!iw$i7Wki!FrT_U)0Mo3HDm|;4cG0aMIM5iGfLPThP1S9Yc9RW z0!FFK!t~9w7VSaUpR|gfY&KG)&g>6&3UfCTwuaw0)#iiVCkAFh{!?`m%4(dmYr8hj za))wW5AmjS4C=;+dv)tr`DQRIIGny`eXlFVM(q-eJI6GXxQ?kF3`lhfyXC5fT4i#% zeWA0n8EZ@IqT8}{yz>mdyxRr$_2Zctkn&>VR;UPzFR-&Z;qQkw(=D|&gUL~qOuVYW zgIPKpQo>`B*_rfv8lf^II8rWtR%aH=n~ONYr+`pE1C&iY$n*?&9Od_#gh}X82|~Y; z=j{d16tZlJns&!yoS9$AWo-D=As_-PwnP_I=()~bx=>@wrd1&U`h2xAaY8z@L3_Ei zM4~u9u<2R5mY!A(rfLOUkH>ofIOa&~S;E2YRSAzWn^jDm8_GIx?W885PInR-Q{G75 zJb;1asgS7_#;nyGJ)1)D+HbrSf#hZZQ6GNif?)_y^AxlKs)i?thLYFxlF2C{RY#iNXv!*zV{CQ+pyFTeynwHJhy-bc~Tr2 zV0Qf13x?sfsY)Yfau>B4>!+7lkFqK;c58C9b|s$^2`2ZoQ^_15dlG*C$EN_VD{A9- z{1&YQ9oz@PY~d8)#0qDm z4p>$wN(WofEqWip6g}aImAbK+2Zma1}Qcv z#B`aD!8RDPfvSSjhIL~Gi0brcEur1Iw1$@E<2tx2vD(bkhmKOTjhRKHNZd!9!lpHk z3eX0sr*t{i<|2Y1=wzPqn|exhfpT^5VN;ZfJ>0NDiAu{!9g5gSiY#~ zI-=RRmMZu8042-P@CzAE%C+=^$hE$aJ}m)pm_?F`{qRJO5Yp8-ihCD(kV1ZCnOOzmrYQlv(>Q71)igF7d_AQX#2>;etKws9FdpR zP%c#r9b_R&!{B0k-uh&>KJ(%`+zS-T7Y_o+(tpH2cB08q%b^sn^+$4jrMA?bq4WsR z`k%xE4M3?32?!Q1cgOj!p{qO8GAoNo#JC@$cWzVQ6R>(;ENsLmMk z%}kK^cB0inK-!DZQTc7dgbtZji_*NJ^vYxvw6I@C;t9Fz>aqMf=@{>`{@H(}Bpw^V zuNXp8Q)QkRvWE*KA;n@i1gN2l=V{tSK_ruyguRSQgiB}Qif+PBM&$Gz^+DUV)bUY@ z+3OjlVr~STf|_$7hUGa?GgZmj9%WNiD!svsv@XYiy>$mL5RLE;lK5OeRM>J)#Wx}4 zN#gqlc!8XoO{8RCLwh}6R~sjZEUzufx4yeQNywpIhy+gS3>dqngaR<%YS{h zv18j>qqNMyPeBtiK;YKeJLi zlb6VjSuv9AY%EerQu{rqT_U@nwnGV$dH&94^_|%i&e@!Zr^ilZRFU2WX{D)vriQ9z*ru!u_%rz=jbv41neAmkQxA7^b)yrSAJ-a13qv*oc~2p<9N zE(;v)0**ljABc0a?di4^(7{KLz|@H0f#LN1ed7C1Pa~Kiw&FgZpURGnf?H+uo(lgv zK7+Efsmwa-Cj*fy$9)N7CFT=c)7>?0M)RDy%T~|X-S2k?nir@8Tm6x{|L`PQmh4=9 x4j1mOm%6kpdk*}3|8n<7Wk$=FK$q>06T2G?11+oJ1KU&EyPKeeH3|R@{}-?krGNkc literal 0 HcmV?d00001 diff --git a/patrons/nuxt.png b/patrons/nuxt.png new file mode 100644 index 0000000000000000000000000000000000000000..a5032eedeeb4492073719af886ea1f9b2727c66f GIT binary patch literal 5527 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 Z^fx(fq!NZanL7Xg002ovPDHLkV1nLrqHF*F literal 0 HcmV?d00001 diff --git a/patrons/plaid.svg b/patrons/plaid.svg new file mode 100644 index 000000000..78354f007 --- /dev/null +++ b/patrons/plaid.svg @@ -0,0 +1 @@ +plaid_yoko \ No newline at end of file diff --git a/patrons/sendcloud.png b/patrons/sendcloud.png new file mode 100644 index 0000000000000000000000000000000000000000..1b536605c56eff88e98005a13f53387a6559f8aa GIT binary patch literal 38600 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 T)DiB1xtm_G{Iwi$^Zx$;cxHqc literal 0 HcmV?d00001 diff --git a/patrons/sendcloud.svg b/patrons/sendcloud.svg new file mode 100644 index 000000000..fdde64b0d --- /dev/null +++ b/patrons/sendcloud.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/patrons/storyblok.svg b/patrons/storyblok.svg new file mode 100644 index 000000000..b80e8fe33 --- /dev/null +++ b/patrons/storyblok.svg @@ -0,0 +1,18 @@ + + + + colored-full + Created with Sketch. + + + + + \ No newline at end of file diff --git a/patrons/vuemastery.png b/patrons/vuemastery.png new file mode 100644 index 0000000000000000000000000000000000000000..e163a95623ff032cf14c37e0ddf71ce605903e15 GIT binary patch literal 42675 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

-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 literal 0 HcmV?d00001 diff --git a/patrons/vuemastery.svg b/patrons/vuemastery.svg new file mode 100644 index 000000000..6ac0766f4 --- /dev/null +++ b/patrons/vuemastery.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/patrons/zenarchitects.png b/patrons/zenarchitects.png new file mode 100644 index 0000000000000000000000000000000000000000..a5f836fe532a2f733062da26e79b998a17331818 GIT binary patch literal 21948 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 literal 0 HcmV?d00001 diff --git a/pt/api/index.html b/pt/api/index.html new file mode 100644 index 000000000..d75f9cf8b --- /dev/null +++ b/pt/api/index.html @@ -0,0 +1,179 @@ + + + + + + API Referência | Vue I18n + + + + + + + + + + + + + diff --git a/pt/guide/component.html b/pt/guide/component.html new file mode 100644 index 000000000..ed75df515 --- /dev/null +++ b/pt/guide/component.html @@ -0,0 +1,195 @@ + + + + + + Localização baseada em componentes | Vue I18n + + + + + + + + + +
Vue I18n

# Localização baseada em componentes

Em geral, as informações de localidade (por exemplo, locale, messages, etc) são definidas como opção de construtor na instância VueI18n e define a opção i18n como a instância raiz do Vue.

Portanto, você pode realizar traduções globalmente usando os métodos $t ou $tc na instância raiz do Vue e qualquer um dos componentes nela. Mas também é possível especificar dados para localização em cada componente separadamente, o que pode ser mais conveniente devido ao design orientado a componentes.

Um exemplo de localização baseada em componente:

// Definir a localização para raiz na instância Vue
+const i18n = new VueI18n({
+  locale: 'pt',
+  messages: {
+    en: {
+      message: {
+        hello: 'Hello World',
+        greeting: 'Good morning'
+      }
+    },
+    pt: {
+      message: {
+        hello: 'Olá Mundo',
+        greeting: 'Bom dia'
+      }
+    }
+  }
+})
+
+// Definição no componente
+const Component1 = {
+  template: `
+    <div class="container">
+     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
+     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
+   </div>`,
+  i18n: {
+    // opção `i18n` definindo dados de localização para o componente
+    messages: {
+      en: { message: { hello: 'hello component1' } },
+      pt: { message: { hello: 'olá componente1' } }
+    }
+  }
+}
+
+new Vue({
+  i18n,
+  components: {
+    Component1
+  }
+}).$mount('#app')
+

Template:

<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+  <component1></component1>
+</div>
+

O resultado será o seguinte:

<div id="app">
+  <p>Olá Mundo</p>
+  <div class="container">
+    <p>Component1 locale messages: olá component1</p>
+    <p>Fallback global locale messages: Bom dia</p>
+  </div>
+</div>
+

Como no exemplo acima, se o componente não tiver a mensagem de localidade, ele retornará às informações de localização definidas globalmente. O componente usa o idioma definido na instância raiz (no exemplo acima: locale: 'ja').

Observe que, por padrão, ao acessar os dados de localização da raiz, avisos serão gerados no console:

[vue-i18n] Value of key 'message.greeting' is not a string!
+[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.
+

Para ocultar esses avisos (deixando aqueles que alertam sobre a falta completa de tradução para a chave fornecida), defina a opção silentFallbackWarn: true ao inicializar a instância do VueI18n.

Se você precisar traduzir com base na localidade do componente, pode fazê-lo usando as opções sync: false e locale na propriedade do i18n.

# Mensagens de localização comuns para componentes

Às vezes, você pode querer importar as mensagens de localidade compartilhadas para determinados componentes, não o fallback de mensagens na localidade global (por exemplo, mensagens comuns de determinado recurso para componentes.

Para fazer isso, você pode usar a opção sharedMessages na propriedade i18n do componente.

Um exemplo de uso de mensagens de localização comuns:

export default {
+  en: {
+    buttons: {
+      save: 'Save'
+      // ...
+    }
+  },
+  pt: {
+    buttons: {
+      save: 'Salvar'
+      // ...
+    }
+  }
+}
+

Componente:

import commonMessage from './locales/common' // importação de mensagens da localidade em comum
+
+export default {
+  name: 'ServiceModal',
+  template: `
+    <div class="modal">
+      <div class="body">
+        <p>Este é um bom serviço</p>
+      </div>
+      <div class="footer">
+        <button type="button">
+          {{ $t('buttons.save') }}
+        </button>
+      </div>
+    </div>
+  `,
+  i18n: {
+    messages: { ... },
+    sharedMessages: commonMessages
+  }
+}
+

Se as opções sharedMessages e messages forem especificadas, então suas mensagens serão mescladas em mensagens de localização na instância VueI18n deste componente.

# Localização em componentes funcionais

Ao usar um componente funcional, todos os dados (incluindo props, children, slots, parent, etc.) são passados ​​através do context, que contém todos esses atributos. Além disso, não é possível usar this, então ao usar vue-i18n com componentes funcionais, você deve se referir a $t como parent.$t, assim:

...
+<div>
+  <a href="#" target="_blank" rel="noopener noreferrer">
+    <img src="./assets/example.jpg" :alt="parent.$t('message.hello')" />
+  </a>
+</div>
+...
+

+ ← + + Diretiva personalizada + + → +

+ + + diff --git a/pt/guide/datetime.html b/pt/guide/datetime.html new file mode 100644 index 000000000..72ca68d52 --- /dev/null +++ b/pt/guide/datetime.html @@ -0,0 +1,147 @@ + + + + + + Localização de datas | Vue I18n + + + + + + + + + +
Vue I18n

# Localização de datas

Suporta a versão

🆕 7.0+

Você pode localizar datas de acordo com o formato apropriado.

Formato de exemplo para DateTime:

const dateTimeFormats = {
+  'en-US': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric'
+    }
+  },
+  'pt-BR': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true
+    }
+  }
+}
+

Como visto acima, é possível definir um formato de data nomeado (por exemplo, short, long, etc.) usando opções ECMA-402 Intl.DateTimeFormat (opens new window)

Depois disso, para poder usar este formato em mensagens de localização, você deve definir a opção dateTimeFormats no construtor na instância VueI18n:

const i18n = new VueI18n({
+  dateTimeFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

Template:

<div id="app">
+  <p>{{ $d(new Date(), 'short') }}</p>
+  <p>{{ $d(new Date(), 'long', 'pt-BR') }}</p>
+</div>
+

O resultado será o seguinte:

<div id="app">
+  <p>Jan 18, 2021</p>
+  <p>domingo, 18 de janeiro de 2021 5:49 AM</p>
+</div>
+

+ ← + + Localização de números + + → +

+ + + diff --git a/pt/guide/directive.html b/pt/guide/directive.html new file mode 100644 index 000000000..29441eee1 --- /dev/null +++ b/pt/guide/directive.html @@ -0,0 +1,173 @@ + + + + + + Diretiva personalizada | Vue I18n + + + + + + + + + +
Vue I18n

# Diretiva personalizada

Suporta a versão

🆕 7.3+

As traduções podem ser feitas não apenas usando a diretiva v-t personalizada, mas também usando o método $t.

# Sintaxe de string

Você pode passar o keypath de mensagens da localização como uma string.

JavaScript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'Hi there!' },
+      pt: { hello: 'Olá!' }
+    }
+  }),
+  data: { path: 'hello' }
+}).$mount('#string-syntax')
+

Template:

<div id="string-syntax">
+  <!-- string literal -->
+  <p v-t="'hello'"></p>
+  <!-- ligação do keypath por meio dos dados -->
+  <p v-t="path"></p>
+</div>
+

O resultado será o seguinte:

<div id="string-syntax">
+  <p>Olá!</p>
+  <p>Olá!</p>
+</div>
+

# Sintaxe do objeto

Você pode usar a sintaxe do objeto.

JavaScript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'Hi {name}!' },
+      pt: { hello: 'Olá {name}！' }
+    }
+  }),
+  computed: {
+    nickName() { return 'kazupon' }
+  },
+  data: { path: 'hello' }
+}).$mount('#object-syntax')
+

Template:

<div id="object-syntax">
+  <!-- literal -->
+  <p v-t="{ path: 'hello', locale: 'pt', args: { name: 'kazupon' } }"></p>
+  <!-- ligação do keypath por meio dos dados  -->
+  <p v-t="{ path: path, args: { name: nickName } }"></p>
+</div>
+

O resultado será o seguinte:

<div id="object-syntax">
+  <p>Olá kazupon！</p>
+  <p>Hi kazupon!</p>
+</div>
+

# Use com transições

Suporta a versão

🆕 8.7+

Ao usar a diretiva v-t em um elemento dentro do componente <transition> (opens new window), você pode ver como a mensagem traduzida desaparece durante a animação de transição. Este comportamento é devido à implementação do próprio componente <transition> - todas as diretivas no elemento que desaparece dentro do componente <transition> devem ser destruídas antes do início da transição. Esse comportamento pode resultar em oscilação do conteúdo em animações curtas, mas é mais perceptível em animações de transição longa.

Para preservar o conteúdo de uma diretiva durante uma animação de transição, você precisa adicionar modificador .preserve ao definir a diretiva v-t.

Javascript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'pt',
+    messages: {
+      pt: { preserve: 'com preservação' }
+    }
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

Template:

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t.preserve="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

Também é possível definir globalmente a configuração preserveDirectiveContent na instância VueI18n, o que afetará todas as diretivas v-t sem adicionar um modificador.

JavaScript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'pt',
+    messages: {
+      pt: { preserve: 'com preservação' }
+    },
+    preserveDirectiveContent: true
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

Template:

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

Você pode aprender mais sobre os exemplos acima [aqui] (https://github.com/kazupon/vue-i18n/tree/dev/examples/directive)

# $t ou v-t

# $t

$t é um método adicionado à instância Vue. Tem os seguintes prós e contras:

# Prós

Você pode flexivelmente usar a sintaxe de chaves {{}} em templates e também props e métodos computados na instância Vue.

# Contras

$t é executado toda vez quando ocorre uma nova renderização, então tem a sobrecarga de fazer a tradução.

# v-t

v-t é uma diretiva personalizada. Tem os seguintes prós e contras:

# Prós

v-t tem melhor desempenho do que o método $t devido ao seu cache com a diretiva personalizada, quando traduzido uma vez. Além disso, a pré-tradução é possível com o módulo do compilador Vue que foi fornecido por vue-i18n-extensions (opens new window).

Portanto, é possível fazer mais otimizações de desempenho.

# Contras

v-t não pode ser usado de forma tão flexível como $t, e isso adiciona complexidade. A tradução com v-t é inserida no textContent do elemento. Além disso, ao usar a renderização do lado do servidor, você precisa definir a diretiva personalizada (opens new window) por meio da opção directives da função createRenderer.

+ ← + + Interpolação de componentes + + → +

+ + + diff --git a/pt/guide/fallback.html b/pt/guide/fallback.html new file mode 100644 index 000000000..a2d46cec6 --- /dev/null +++ b/pt/guide/fallback.html @@ -0,0 +1,146 @@ + + + + + + Fallback Localização | Vue I18n + + + + + + + + + +
Vue I18n

# Fallback Localização

Resumo: Use fallbackLocale: '<lang>' para escolher qual idioma usar quando seu idioma preferido não tiver uma tradução.

# Fallback implícito usando localidades

Se um locale é fornecido contendo um território e um dialeto opcional, o fallback implícito é ativado automaticamente.

Por exemplo, para de-DE-bavarian o seguinte será considerado como fallback:

  1. de-DE-bavarian
  2. de-DE
  3. de

Para desativar a detecção automática de locais de fallback, especifique o caractere !, Por exemplo, de-DE!

# Fallback explícito com um local

Às vezes, alguns itens não são traduzidas para outros idiomas. Neste exemplo, o item hello está disponível no idioma inglês, mas não no português:

const messages = {
+  en: {
+    hello: 'Hello, world!'
+  },
+  pt: {
+    // Localização sem tradução para `hello`
+  }
+}
+

Se você deseja usar (digamos) mensagens de localização de en, quando a tradução não está na localização desejada, você deve defina a opção fallbackLocale ao inicializar a instância VueI18n:

const i18n = new VueI18n({
+  locale: 'pt',
+  fallbackLocale: 'en',
+  messages
+})
+

Template:

<p>{{ $t('hello') }}</p>
+

O resultado será o seguinte:

<p>Hello, world!</p>
+

Por padrão, se as mensagens de localização de fallback de fallbackLocale foram usadas, os avisos serão exibidos no console:

[vue-i18n] Value of key 'hello' is not a string!
+[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.
+

Para ocultar esses avisos (deixando aqueles em casos em que não há traduções para a chave fornecida), defina silentFallbackWarn: true ao inicializar a instância VueI18n.

# Fallback explícito com um array de localidades

Você pode especificar mais de um local de fallback usando um array.

Por exemplo:

fallbackLocale: ['pt', 'en'],
+

# Fallback explícito com mapas de decisão

Um algoritmo de tomada de decisão mais complexo para determinar o local de fallback pode ser implementado usando mapas de decisão com localidades em um fallback de acordo.

Por exemplo, usando o seguinte mapa de decisão

fallbackLocale: {
+  /* 1 */ 'de-CH':   ['fr', 'it'],
+  /* 2 */ 'zh-Hant': ['zh-Hans'],
+  /* 3 */ 'es-CL':   ['es-AR'],
+  /* 4 */ 'es':      ['en-GB'],
+  /* 5 */ 'pt':      ['es-AR'],
+  /* 6 */ 'default': ['en', 'ru']
+},
+

Resultará nas seguintes cadeias de fallback

Local fallback escolha
'de-CH' de-CH > fr > it > en > ru
'de' de > en > ru
'zh-Hant' zh-Hant > zh-Hans > zh > en > ru
'es-SP' es-SP > es > en-GB > en > ru
'es-SP!' es-SP > en > ru
'fr' fr > en > ru
'pt-BR' pt-BR > pt > es-AR > es > en-GB > en > ru
'es-CL' es-CL > es-AR > es > en-GB > en > ru

# Fallback interpolação

  • Resumo: Defina formatFallbackMessages: true para fazer a interpolação do modelo nas chaves de tradução quando seu idioma não tiver uma tradução para uma chave. *

Como as chaves para as traduções são strings, você pode usar uma mensagem legível pelo usuário como uma chave (para um idioma específico).

Por exemplo:

const messages = {
+  pt: {
+    'Hello, world!': 'Olá Mundo!'
+  }
+}
+

Isso pode ser útil porque você não precisa especificar uma tradução para o "Hello, world!" na localização em inglês.

Na verdade, você pode até incluir parâmetros de modelo em uma chave. Junto com formatFallbackMessages: true, isso permite pular a escrita de modelos para o seu idioma base" e as chaves são seus modelos.

const messages = {
+  pt: {
+    'Hello {name}': 'Olá {name}'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'pt',
+  fallbackLocale: 'en',
+  formatFallbackMessages: true,
+  messages
+})
+

Template:

<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>
+<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>
+

O resultado será o seguinte:

<p>Olá, John</p>
+<p>The weather today is sunny!</p>
+

+ ← + + Localização baseada em componentes + + → +

+ + + diff --git a/pt/guide/formatting.html b/pt/guide/formatting.html new file mode 100644 index 000000000..fe0c9f8a2 --- /dev/null +++ b/pt/guide/formatting.html @@ -0,0 +1,221 @@ + + + + + + Formatação | Vue I18n + + + + + + + + + +
Vue I18n

# Formatação

# Formatação nomeada

Mensagens de localização:

const messages = {
+  en: {
+    message: {
+      hello: '{msg} World'
+    }
+  },
+  pt: {
+    message: {
+      hello: '{msg} Mundo'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.hello', { msg: 'Olá' }) }}</p>
+

O resultado será o seguinte:

<p>Olá Mundo</p>
+

# Formatação de lista

Mensagens de localização:

const messages = {
+  en: {
+    message: {
+      hello: '{0} World'
+    }
+  },
+  pt: {
+    message: {
+      hello: '{0} Mundo'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.hello', ['Olá']) }}</p>
+

O resultado será o seguinte:

<p>Olá Mundo</p>
+

A formatação de lista também aceita objetos do tipo array:

<p>{{ $t('message.hello', {'0': 'Olá'}) }}</p>
+

O resultado será o seguinte:

<p>Olá Mundo</p>
+

# Formatação HTML

Nota

⚠️ Localizar HTML arbitrário de forma dinâmica em um site é muito perigoso porque pode facilmente levar a vulnerabilidades de XSS.
Use a interpolação HTML apenas para conteúdo confiável, nunca para conteúdo personalizado.

Recomendamos usar os recursos de interpolação de componente nesses casos.

Nota

🆕 Adicionado na versão 8.11+

Você pode controlar o uso da formatação HTML.
Consulte para obter mais detalhes a opção do construtor warnHtmlInMessage e as propriedades da API.

Em alguns casos, você pode querer renderizar sua tradução como uma mensagem HTML e não como uma string estática.

const messages = {
+  en: {
+    message: {
+      hello: 'hello <br> World'
+    }
+  },
+  pt: {
+    message: {
+      hello: 'Olá <br> Mundo'
+    }
+  }
+}
+

Template:

<p v-html="$t('message.hello')"></p>
+

Resultado (em vez da mensagem pré-formatada):

<p>
+  Olá
+  <!-- <br> existe, mas é renderizado como html e não uma string -->
+  Mundo
+</p>
+

# Suporte formatação i18n Ruby on Rails

Mensagens de localização:

const messages = {
+  en: {
+    message: {
+      hello: '%{msg} World'
+    }
+  },
+  pt: {
+    message: {
+      hello: '%{msg} Mundo'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.hello', { msg: 'Olá' }) }}</p>
+

O resultado será o seguinte:

<p>Olá Mundo</p>
+

# Formatação personalizada

Às vezes, você pode precisar traduzir usando uma formatação personalizada (por exemplo, sintaxe de mensagem ICU (opens new window)).

Você pode fazer isso com um formatador personalizado que implementa a Interface do formatador (opens new window).

Um exemplo do método de formatação personalizado com a sintaxe de classe ES2015:

// Implementação do formatador personalizado
+class CustomFormatter {
+  constructor(options) {
+    // ...
+  }
+
+  //
+  // interpolate
+  //
+  // @param {string} message
+  //   string de lista ou formato nomeado
+  //   p. ex.
+  //   - formato nomeado: 'Hi {name}'
+  //   - formato de lista: 'Hi {0}'
+  //
+  // @param {Object | Array} values
+  //   valores de interpolação `message`.
+  //   valores transmitidos com `$t`, `$tc` e componente funcional `i18n`.
+  //   p. ex.
+  //   - $t('hello', { name: 'Lucas' }) -> valores passados: Object `{ name: 'Lucas' }`
+  //   - $t('hello', ['Lucas']) -> valores passados: Array `['Lucas']`
+  //   - componente funcional `i18n` (interpolação no componente)
+  //     <i18n path="hello">
+  //       <p>Lucas</p>
+  //       <p>Tudo bem com você?</p>
+  //     </i18n>
+  //     -> valores passados: Array (included VNode):
+  //        `[VNode{ tag: 'p', text: 'Lucas', ...}, VNode{ tag: 'p', text: 'Tudo bem com você?', ...}]`
+  //
+  // @return {Array<any>}
+  //   valores interpolados. Eles são necessários para retornar o seguinte:
+  //   - um array de strings ao usar `$t` ou `$tc`.
+  //   - um array incluindo o objeto VNode, ao usar `i18n` em um componente funcional.
+  //
+  interpolate(message, values) {
+    // implemente a lógica de interpolação aqui
+    // ...
+
+    // retorna o array interpolado
+    return ['resolved message string']
+  }
+}
+
+// Registre com a opção `formatter`
+const i18n = new VueI18n({
+  locale: 'en-US',
+  formatter: new CustomFormatter(/* aqui as opções do construtor */),
+  messages: {
+    'en-US': {
+      // ...
+    },
+    'pt-BR': {
+      // ...
+    }
+    // ...
+  }
+})
+
+// Iniciando o aplicativo!
+new Vue({ i18n }).$mount('#app')
+

Você também pode verificar o exemplo oficial do formatador personalizado (opens new window).

+ ← + + Pluralização + + → +

+ + + diff --git a/pt/guide/hot-reload.html b/pt/guide/hot-reload.html new file mode 100644 index 000000000..39fad87bd --- /dev/null +++ b/pt/guide/hot-reload.html @@ -0,0 +1,181 @@ + + + + + + Hot reloading | Vue I18n + + + + + + + + + +
Vue I18n

# Hot reloading

Você pode usar o recurso Hot Module Replacement (HMR) (opens new window), você pode rastrear as mudanças em arquivos de localização e recarregá-los automaticamente em seu aplicativo.

# Exemplo básico

Para um conjunto estático de localidades, você pode especificar explicitamente o recarregamento automático dessas traduções:

import Vue from "vue"
+import VueI18n from "vue-i18n"
+import en from './en'
+import pt from './pt'
+
+const messages = {
+  en,
+  pt
+}
+
+// Instância VueI18n
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+// Iniciando aplicativo
+const app = new Vue({
+  i18n
+  // ...
+}).$mount('#app')
+
+// Atualizações automática
+if (module.hot) {
+  module.hot.accept(['./en', './pt'], function() {
+    i18n.setLocaleMessage('en', require('./en').default)
+    i18n.setLocaleMessage('pt', require('./pt').default)
+    // Ou adicione um recarregamento automático por meio da propriedade $i18n
+    // app.$i18n.setLocaleMessage('en', require('./en').default)
+    // app.$i18n.setLocaleMessage('pt', require('./pt').default)
+  })
+}
+

# Exemplo avançado

Se precisar de suporte para uma mudança no conjunto de traduções, você pode implementar o recarregamento automático para todos os locais dinamicamente usando require.context:

import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+// Carregue todos os locais e lembre-se do contexto
+function loadMessages() {
+  const context = require.context("./locales", tpte, /[a-z0-9-_]+\.json$/i);
+
+  const messages = context
+    .keys()
+    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
+    .reduce(
+      (messages, { key, locale }) => ({
+        ...messages,
+        [locale]: context(key),
+      }),
+      {}
+    );
+
+  return { context, messages };
+}
+
+const { context, messages } = loadMessages();
+
+// Instância VueI18n
+const i18n = new VueI18n({
+  locale: "en",
+  messages,
+});
+
+// Iniciando aplicativo
+const app = new Vue({
+  i18n,
+  // ...
+}).$mount('#app');
+
+// Atualizações automática
+if (module.hot) {
+  module.hot.accept(context.id, () => {
+    const { messages: newMessages } = loadMessages();
+
+    Object.keys(newMessages)
+      .filter((locale) => messages[locale] !== newMessages[locale])
+      .forEach((locale) => {
+        messages[locale] = newMessages[locale];
+        i18n.setLocaleMessage(locale, messages[locale]);
+      });
+  });
+}
+

+ ← + + Alternando localização + + → +

+ + + diff --git a/pt/guide/interpolation.html b/pt/guide/interpolation.html new file mode 100644 index 000000000..0acbaf22d --- /dev/null +++ b/pt/guide/interpolation.html @@ -0,0 +1,249 @@ + + + + + + Interpolação de componentes | Vue I18n + + + + + + + + + +
Vue I18n

# Interpolação de componentes

# Exemplo básico

Suporta a versão

🆕 7.0+

Às vezes, precisamos localizar uma mensagem de um localidade incluída em uma tag ou um componente HTML.

Por exemplo:

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

Na mensagem acima, se quisermos usar $t, provavelmente tentaremos obtê-lo vinculando as seguintes mensagens de localização:

const messages = {
+  en: {
+    term1: "I Accept xxx's",
+    term2: 'Terms of Service Agreement'
+  }
+}
+

Como resultado o template terá a seguinte aparência:

<p>{{ $t('term1') }}<a href="/term">{{ $t('term2') }}</a></p>
+

O resultado será o seguinte:

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

Isso é muito complicado, e se você mover a tag <a> para a mensagem de localização, você adicionará a possibilidade de uma vulnerabilidade XSS devido ao uso de v-html="$t('term')".

Isso pode ser evitado usando o componente funcional i18n.

Por exemplo:

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  pt: {
+    tos: 'Termos de serviço',
+    term: 'Eu concordo xxx {0}.'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'pt',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

O resultado será o seguinte:

<div id="app">
+  <!-- ... -->
+  <label for="tos">
+    Eu concordo xxx <a href="/term" target="_blank">Termos de serviço</a>.
+  </label>
+  <!-- ... -->
+</div>
+

Mais detalhes sobre o exemplo acima, veja o exemplo (opens new window)

Descendentes do componente funcional i18n interpola mensagens de localização pelo caminho do parâmetro de path.

No exemplo acima:

<a :href="url" target="_blank">{{ $t('tos') }}</a>

interpolado com o term da mensagem de localização.

No exemplo acima, a interpolação de componentes usa formatação de lista. Os descendentes do componente da função i18n são interpolados na ordem em que aparecem.

Você pode especificar o tipo do elemento raiz usando o parâmetro de entrada tag. Se nenhum parâmetro de entrada for especificado, o padrão é 'span'. Você também pode defini-lo com o valor booleano false para inserir os nós filhos diretamente sem criar um elemento raiz.

# Usando a sintaxe de slots

Suporta a versão

🆕 8.14+

É mais conveniente usar a sintaxe de slots nomeados.

Por exemplo:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <template v-slot:limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template v-slot:action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

O resultado será o seguinte:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until
+    <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

Desde o Vue 2.6, você pode usar a seguinte sintaxe de slots nos templates:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <template #limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template #action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n>
+  <!-- ... -->
+</div>
+

Limitação

⚠️ Os parâmetros de entrada do slot não são suportados no componente i18n.

# Usando a sintaxe de place

Atenção!

Na próxima versão principal, os parâmetros de entrada place e places serão descontinuados. Recomendamos usar a sintaxe de slot.

Suporta a versão

🆕 7.2+

Nota

⚠️ No componente i18n, o conteúdo de texto consistindo apenas em espaços em branco será omitido.

A formatação nomeada é suportada com a ajuda do atributo place.

Por exemplo:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <span place="limit">{{ changeLimit }}</span>
+    <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

O resultado será o seguinte:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until
+    <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

Nota

⚠️ Para usar formatação nomeada, todos os descendentes do componente i18n devem ter o atributo place definido. Caso contrário, a formatação de lista será usada.

Se você ainda precisa interpolar o conteúdo do texto usando formatação nomeada, você pode definir a propriedade places no componente i18n.

Por exemplo:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p" :places="{ limit: refundLimit }">
+    <a place="action" :href="refundUrl">{{ $t('refund') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+

O resultado será o seguinte:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/refund">refund your ticket</a> until 30 minutes from
+    departure.
+  </p>
+  <!-- ... -->
+</div>
+

+ ← + + Componentes de arquivo único + + → +

+ + + diff --git a/pt/guide/lazy-loading.html b/pt/guide/lazy-loading.html new file mode 100644 index 000000000..e9752c973 --- /dev/null +++ b/pt/guide/lazy-loading.html @@ -0,0 +1,156 @@ + + + + + + Lazy loading traduções | Vue I18n + + + + + + + + + +
Vue I18n

# Lazy loading traduções

Carregar todos os seus arquivos de tradução de uma vez é exagero e desnecessário.

Lazy loading (carregamento lento) ou carregamento assíncrono de arquivos de tradução é muito fácil de implementar usando o Webpack.

Suponde que temos um diretório de projeto com a seguinte estrutura:

nosso-projeto-legal
+-dist
+-src
+--routes
+--store
+--setup
+---i18n-setup.js
+--lang
+---en.js
+---it.js
+

O diretório lang contém todos os arquivos de tradução. Vários arquivos de configuração são agrupados no diretório setup, por exemplo, configurações i18n, registro de componentes globais, inicialização de plugin e muito mais.

// i18n-setup.js
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from '@/lang/en'
+import axios from 'axios'
+
+Vue.use(VueI18n)
+
+export const i18n = new VueI18n({
+  locale: 'en', // defenindo localidade
+  fallbackLocale: 'en',
+  messages // definindo mensagens de localização
+})
+
+const loadedLanguages = ['en'] // nosso idioma padrão que é pré-carregado
+
+function setI18nLanguage(lang) {
+  i18n.locale = lang
+  axios.defaults.headers.common['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync(lang) {
+  // Se a localização for a mesma
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // Se a localização já foi carregada
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // Se a localização ainda não foi carregada
+  return import(
+    /* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`
+  ).then(messages => {
+    i18n.setLocaleMessage(lang, messages.default)
+    loadedLanguages.push(lang)
+    return setI18nLanguage(lang)
+  })
+}
+

Em resumo, estamos criando uma nova instância VueI18n como normalmente faríamos. Então estamos criando um array loadedLanguages que irá manter o controle de nossos idiomas carregados. A seguir está função setI18nLanguage que realmente mudará a localização na instância vueI18n, axios e onde for necessário.

A função loadLanguageAsync será usada para alterar o idioma. O carregamento de novos arquivos é feito pela função import que o Webpack fornece e nos permite carregar arquivos dinamicamente, e por usar promessas podemos facilmente esperar que o carregamento termine.

Você pode aprender mais sobre a função de importações dinâmicas na documentação do Webpack (opens new window).

É muito fácil usar loadLanguageAsync. Por exemplo, no hook beforeEach do vue-router.

router.beforeEach((to, from, next) => {
+  const lang = to.params.lang
+  loadLanguageAsync(lang).then(() => next())
+})
+

Poderíamos melhorar isso verificando se lang é realmente suportado ou não e chamando reject para que possamos pegar isso no beforeEach parando a transição da rota de navegação.

+ ← + + Ferramentas + + → +

+ + + diff --git a/pt/guide/locale.html b/pt/guide/locale.html new file mode 100644 index 000000000..96f94b037 --- /dev/null +++ b/pt/guide/locale.html @@ -0,0 +1,130 @@ + + + + + + Alternando localização | Vue I18n + + + + + + + + + +
Vue I18n

# Alternando localização

Normalmente a instância raiz do Vue é usada como o ponto de verdade, e todos os componentes filhos usam a propriedade locale da classeVueI18n passada por referência.

Às vezes você pode querer alternar dinamicamente os locais. Para fazer isso, você precisa alterar o valor da propriedade locale na instânciaVueI18n.

const i18n = new VueI18n({
+  locale: 'pt', // definir a localização padrão
+  ...
+})
+
+// Crie uma instância raiz do Vue
+new Vue({
+  i18n,
+  ...
+}).$mount('#app')
+
+// Mudar para uma localização diferente
+i18n.locale = 'en'
+

Cada componente contém uma instância VueI18n que se refere à propriedade $i18n, que também pode ser usada para alterar o local.

Exemplo:

<template>
+  <div class="locale-changer">
+    <select v-model="$i18n.locale">
+      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
+        {{ lang }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'locale-changer',
+    data() {
+      return { langs: ['pt', 'en'] }
+    }
+  }
+</script>
+

Aviso

⚠️ As alterações de localização são ignoradas pelos componentes com a opção sync: false.

Componente vs. escopo root

⚠️ Alterarando $i18n.locale dentro do componente não altera a localização root. Se você está contando com a localização root, por exemplo, ao usar root fallback, use $root.$I18n.locale ao vez de $i18n.locale.

+ ← + + Lazy loading traduções + + → +

+ + + diff --git a/pt/guide/messages.html b/pt/guide/messages.html new file mode 100644 index 000000000..176a9ed17 --- /dev/null +++ b/pt/guide/messages.html @@ -0,0 +1,255 @@ + + + + + + Sintaxe mensagens locais | Vue I18n + + + + + + + + + +
Vue I18n

# Sintaxe mensagens locais

# Estrutura

Sintaxe local das mensagens:

// Como definição do Flowtype, a sintaxe das mensagens de tradução é semelhante à anotação BNF
+type LocaleMessages = { [key: Locale]: LocaleMessageObject }
+type LocaleMessageObject = { [key: Path]: LocaleMessage }
+type LocaleMessageArray = LocaleMessage[]
+type MessageContext = {
+  list: (index: number) => mixed,
+  named: (key: string) => mixed,
+  linked: (key: string) => TranslateResult,
+  values: any,
+  path: string,
+  formatter: Formatter,
+  messages: LocaleMessages,
+  locale: Locale
+};
+type MessageFunction = (ctx: MessageContext) => string;
+type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;
+type Locale = string
+type Path = string
+

Com base na sintaxe acima, você pode configurar a seguinte estrutura de mensagens locais:

{
+  // localização 'pt'
+  "pt": {
+    "key1": "esta é a mensagem 1", // uso comum
+    "nested": {
+      // aninhado
+      "message1": "esta é a mensagem aninhada 1"
+    },
+    "errors": [
+      // array
+      "esta é a mensagem de código de erro 0",
+      {
+        // um objeto em array
+        "internal1": "esta é uma mensagem de código de erro interno 1"
+      },
+      [
+        // array em array
+        "este é o erro de array aninhado 1"
+      ]
+    ]
+  },
+  // localização 'en'
+  "en": {
+    // ...
+  }
+}
+

Na estrutura de mensagens locais acima, você pode traduzir usando os caminhos-chave abaixo.

<div id="app">
+  <!-- uso comum -->
+  <p>{{ $t('key1') }}</p>
+  <!-- aninhado -->
+  <p>{{ $t('nested.message1') }}</p>
+  <!-- array -->
+  <p>{{ $t('errors[0]') }}</p>
+  <!-- um objeto em array -->
+  <p>{{ $t('errors[1].internal1') }}</p>
+  <!-- array em array -->
+  <p>{{ $t('errors[2][0]') }}</p>
+</div>
+

O resultado será o seguinte:

<div id="app">
+  <!-- uso comum -->
+  <p>esta é a mensagem 1</p>
+  <!-- aninhado -->
+  <p>esta é a mensagem aninhada 1</p>
+  <!-- array -->
+  <p>esta é a mensagem de código de erro 0</p>
+  <!-- um objeto em array -->
+  <p>esta é uma mensagem de código de erro interno 1</p>
+  <!-- array em array -->
+  <p>este é o erro de array aninhado 1</p>
+</div>
+

# Mensagens de localização relacionadas

Se houver uma chave de tradução que sempre terá o mesmo texto concreto igual outra, você pode simplesmente criar um link para essa. Para vincular a outra chave de tradução, tudo que você precisa fazer é prefixar seu conteúdo com um sinal @: seguido pelo nome completo da chave de tradução incluindo o namespace ao qual deseja vincular.

Mensagens de localização a seguir:

const messages = {
+  en: {
+    message: {
+      the_world: 'the world',
+      dio: 'DIO:',
+      linked: '@:message.dio @:message.the_world !!!!'
+    }
+  }
+}
+

Template:

<p>{{ $t('message.linked') }}</p>
+

O resultado será o seguinte:

<p>DIO: the world !!!!</p>
+

# Formatando mensagens de localização relacionadas

Se o idioma distinguir casos de caracteres, você pode precisar controlar o caso das mensagens de localização relacionadas. +Mensagens relacionadas podem ser formatadas com o modificador @.modifier:key

Mensagens de localização a seguir:

  • upper: Letras maiúsculas em todos os caracteres na mensagem vinculada.
  • lower: Letras minúsculas em todos os caracteres na mensagem vinculada.
  • capitalize: Primeiro caractere em maiúsculo da mensagem vinculada.

Mensagens de localização:

const messages = {
+  en: {
+    message: {
+      homeAddress: 'Home address',
+      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
+    }
+  },
+  pt: {
+    message: {
+      homeAddress: 'Endereço residencial',
+      missingHomeAddress: 'Por favor, providencie o @.lower:message.homeAddress'
+    }
+  }
+}
+
<label>{{ $t('message.homeAddress') }}</label>
+
+<p class="error">{{ $t('message.missingHomeAddress') }}</p>
+

O resultado será o seguinte:

<label>Endereço residencial</label>
+
+<p class="error">Por favor, providencie o Endereço residencial</p>
+

Você pode adicionar modificadores ou sobrescrever os existentes passando as opções de modificadores para o construtor VueI18n.

const i18n = new VueI18n({
+  locale: 'pt',
+  modifiers: {
+    // Adicionando um novo modificador
+    snakeCase: str => str.split(' ').join('-')
+  },
+  messages: {
+    // ...
+  },
+})
+

# Agrupando com parêntese

Uma chave de tradução de uma mensagem também pode ser especificada com @:(message.foo.bar.baz), onde a referência a outra chave de tradução está entre parêntese ().

Isso pode ser necessário se um ponto . for exigido após um link para outra mensagem @:message.something, que de outra forma seria considerado parte do link.

Mensagens de localização:

const messages = {
+  en: {
+    message: {
+      dio: 'DIO',
+      linked: "There's a reason, you lost, @:(message.dio)."
+    }
+  },
+  pt: {
+    message: {
+      dio: 'DIO',
+      linked: "Há uma razão pela qual você falhou, @:(message.dio)."
+    }
+  }
+}
+

Template:

<p>{{ $t('message.linked') }}</p>
+

O resultado será o seguinte:

<p>Há uma razão pela qual você falhou, DIO.</p>
+

# Mensagem com função

vue-i18n recomenda o uso de strings para formatação de lista ou formatação nomeada como mensagem de localização ao traduzir as mensagens.

No entanto, existem situações em que, devido à sintaxe complexa da linguagem, todo o poder do JavaScript é necessário. Nesse caso, em vez de mensagens de string, você pode usar uma mensagem com função.

A função abaixo retorna uma saudação:

const messages = {
+  en: {
+    greeting: (ctx) => 'Hello!'
+  },
+  pt: {
+    greeting: (ctx) => 'Olá!'
+  }
+}
+

Usar a função da mensagem é fácil! Você só precisa especificar a chave usando $t ou t:

<p>{{ $t('greeting') }}</p>
+

O resultado será o seguinte:

<p>Olá!</p>
+

O resultado de retorno da função é usado para a mensagem.

# Formatação nomeada

vue-i18n suporta formatação nomeada como um formato de mensagem baseado em string. vue-i18n interpola os valores dos parâmetros com $t ou t, e os retorna.

O mesmo pode ser feito com a função da mensagem usando o contexto de mensagem:

Aqui está o exemplo de saudação:

const messages = {
+  en: {
+    greeting: (ctx) => `Hello, ${ctx.named('name')}!`
+  },
+  pt: {
+    greeting: (ctx) => `Olá, ${ctx.named('name')}!`
+  }
+}
+

Template:

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>
+

O resultado será o seguinte:

<p>Olá, DIO!</p>
+

O contexto da mensagem fornece acesso à função named. Você deve especificar a chave especificada para $t ou t, que resolverá com o valor necessário.

# Formatação de lista

O uso da formatação de lista é semelhante ao formatação nomeada descrito acima.

vue-i18n suporta formatação de lista para mensagens de string. vue-i18n interpola os valores dos parâmetros com $t ou t, e os retorna.

O mesmo pode ser feito com a função da mensagem usando o contexto de mensagem:

Aqui está o exemplo de saudação:

const messages = {
+  en: {
+    greeting: (ctx) => `Hello, ${ctx.list(0)}!`
+  },
+  pt: {
+    greeting: (ctx) => `Olá, ${ctx.list(0)}!`
+  }
+}
+

Template:

<p>{{ $t('greeting', ['DIO']) }}</p>
+

O resultado será o seguinte:

<p>Olá, DIO!</p>
+

O contexto da mensagem fornece acesso à função list. Você deve especificar a chave especificada para $t ou t, que resolverá com o valor necessário.

# Limitação

Em uma função para mensagem, os seguintes recursos, que estão disponíveis em uma versão de string, não estarão disponíveis por meio do contexto da mensagem:

  • Mensagens de localidade vinculadas
  • Pluralização

+ ← + + Fallback Localização + + → +

+ + + diff --git a/pt/guide/number.html b/pt/guide/number.html new file mode 100644 index 000000000..9db22478a --- /dev/null +++ b/pt/guide/number.html @@ -0,0 +1,166 @@ + + + + + + Localização de números | Vue I18n + + + + + + + + + +
Vue I18n

# Localização de números

Suporta a versão

🆕 7.0+

Você pode localizar números com seus formatos de definição.

Formato de exemplo para números:

const numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD'
+    }
+  },
+  'pt-BR': {
+    currency: {
+      style: 'currency',
+      currency: 'BRL',
+      currencyDisplay: 'symbol'
+    }
+  }
+}
+

Conforme declarado acima, você pode especificar formatos numéricos (por exemplo, currency para moeda) usando opções ECMA-402 Intl.NumberFormat (opens new window).

Depois disso, para poder usar este formato em mensagens de localização, você precisa definir a opção numberFormats do construtor na instância VueI18n:

const i18n = new VueI18n({
+  numberFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

Template:

<div id="app">
+  <p>{{ $n(100, 'currency') }}</p>
+  <p>{{ $n(100, 'currency', 'pt-BR') }}</p>
+</div>
+

O resultado será o seguinte:

<div id="app">
+  <p>$100.00</p>
+  <p>100,00 ₽</p>
+</div>
+

# Formatação personalizada

Suporta a versão

🆕 8.10+

O método $n retorna o resultado como uma string numérica totalmente formatada que só pode ser usada em sua totalidade. Nos casos em que você precisa estilizar alguma parte de um número formatado (por exemplo, uma parte fracionária), $n não será suficiente. Nesses casos, é necessário usar o componente funcional <i18n-n> será útil.

Com um conjunto mínimo de propriedades, <i18n-n> gera o mesmo resultado que $n envolvido em um elemento DOM configurado.

Template:

<div id="app">
+  <i18n-n :value="100"></i18n-n>
+  <i18n-n :value="100" format="currency"></i18n-n>
+  <i18n-n :value="100" format="currency" locale="pt-BR"></i18n-n>
+</div>
+

O resultado será o seguinte:

<div id="app">
+  <span>100</span>
+  <span>$100.00</span>
+  <span>R$ 100,00</span>
+</div>
+

O verdadeiro poder deste componente entra em ação quando é usado com slots com escopo (opens new window).

Digamos que haja um requisito para exibir a parte inteira de um número em negrito. Isso pode ser obtido especificando integer no elemento do slot com escopo:

<i18n-n :value="100" format="currency">
+  <span v-slot:integer="slotProps" styles="font-weight: bold">
+    {{ slotProps.integer }}
+  </span>
+</i18n-n>
+

O resultado será o seguinte:

<span>$<span styles="font-weight: bold">100</span>.00</span>
+

É possível especificar vários slots com escopo ao mesmo tempo:

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
+  <span v-slot:currency="slotProps" styles="color: green">
+    {{ slotProps.currency }}
+  </span>
+  <span v-slot:integer="slotProps" styles="font-weight: bold">
+    {{ slotProps.integer }}
+  </span>
+  <span v-slot:group="slotProps" styles="font-weight: bold">
+    {{ slotProps.group }}
+  </span>
+  <span v-slot:fraction="slotProps" styles="font-size: small">
+    {{ slotProps.fraction }}
+  </span>
+</i18n-n>
+

(O HTML de resultado abaixo é formatado para melhor legibilidade)

<span>
+  <span styles="color: green">€</span>
+  <span styles="font-weight: bold">1</span>
+  <span styles="font-weight: bold">,</span>
+  <span styles="font-weight: bold">234</span>
+  <span styles="font-size: small">00</span>
+</span>
+

Você pode especificar o tipo do elemento raiz usando o parâmetro de entrada tag. Se nenhum parâmetro de entrada for especificado, o padrão é 'span'. Você também pode defini-lo com o valor booleano false para inserir os nós filhos diretamente sem criar um elemento raiz.

A lista completa dos slots de escopo suportados, bem como outras propriedades <i18n-n>, pode ser encontradas na página da API.

+ ← + + Sintaxe mensagens locais + + → +

+ + + diff --git a/pt/guide/pluralization.html b/pt/guide/pluralization.html new file mode 100644 index 000000000..c1487942b --- /dev/null +++ b/pt/guide/pluralization.html @@ -0,0 +1,203 @@ + + + + + + Pluralização | Vue I18n + + + + + + + + + +
Vue I18n

# Pluralização

Você pode usar pluralização para mensagens traduzidas. Para fazer isso, precisa definir a localidade e especificar as strings de tradução para os diferentes casos por meio do separador |.

Seu template precisará usar $tc() em vez de $t().

Mensagens locais abaixo:

const messages = {
+  en: {
+    car: 'car | cars',
+    apple: 'no apples | one apple | {count} apples'
+  },
+  pt: {
+    car: 'carro | carros',
+    apple: 'sem maçãs | uma maçã | {count} maçãs'
+  }
+}
+

Template:

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+
+<p>{{ $tc('apple', 0) }}</p>
+<p>{{ $tc('apple', 1) }}</p>
+<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+

O resultado será o seguinte:

<p>carro</p>
+<p>carros</p>
+
+<p>sem maçãs</p>
+<p>uma maçã</p>
+<p>10 maçãs</p>
+

# Acessando o número por meio do argumento predefinido

Não há necessidade de passar explicitamente o número para pluralização. Em mensagens de localização, um número está disponível através dos argumentos nomeados {count} e/ou {n}. Você pode substituí-los, se desejar.

Mensagens locais abaixo:

const messages = {
+  en: {
+    apple: 'no apples | one apple | {count} apples',
+    banana: 'no bananas | {n} banana | {n} bananas'
+  },
+  pt: {
+    apple: 'sem maçãs | uma maçã | {count} maçãs'
+    banana: 'sem bananas | {n} banana | {n} bananas'
+  }
+}
+

Template:

<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+<p>{{ $tc('apple', 10) }}</p>
+
+<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
+<p>{{ $tc('banana', 1) }}</p>
+<p>{{ $tc('banana', 100, { n: 'Muitas' }) }}</p>
+

O resultado será o seguinte:

<p>10 maçãs</p>
+<p>10 maçãs</p>
+
+<p>1 banana</p>
+<p>1 banana</p>
+<p>Muitas bananas</p>
+

# Pluralização personalizadas

Essa pluralização, entretanto, não se aplica a todas as línguas (as línguas eslavas, por exemplo, têm regras de pluralização diferentes).

Para implementar essas regras, você pode passar um objeto pluralizationRules opcional para as opções do construtor VueI18n.

Um exemplo simplificado para idiomas eslavos (russo, ucraniano e outros):

new VueI18n({
+  // Key - idioma para usar a regra, `'ru'`, neste caso
+  // Value - função para escolher a forma plural correta
+  pluralizationRules: {
+    /**
+     * @param choice {number} um índice de escolha dado pela entrada de $tc: `$tc('path.to.rule', choiceIndex)`
+     * @param choicesLength {number} quantidade geral de opções disponíveis
+     * @returns índice final para selecionar as palavras no plural
+     */
+    'ru': function(choice, choicesLength) {
+      // this === Instância VueI18n, então a propriedade locale também existe aqui
+
+      if (choice === 0) {
+        return 0;
+      }
+
+      const teen = choice > 10 && choice < 20;
+      const endsWithOne = choice % 10 === 1;
+
+      if (choicesLength < 4) {
+        return (!teen && endsWithOne) ? 1 : 2;
+      }
+      if (!teen && endsWithOne) {
+        return 1;
+      }
+      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+        return 2;
+      }
+
+      return (choicesLength < 4) ? 2 : 3;
+    }
+  }
+})
+

Essa implementação permitirá que você use:

const messages = {
+  ru: {
+    car: '0 машин | {n} машина | {n} машины | {n} машин',
+    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
+  }
+}
+

Onde o formato é 0 coisas | número de itens termina em 1 | o número de coisas que termina em 2-4 | o número de coisas que termina com 5-9, 0 e o número coisas que termina de 11 a 19. +P.S. A pluralização eslava é complexa, você pode ler mais sobre isso aqui (opens new window).

No template, você ainda precisa usar $tc() em vez de $t():

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+<p>{{ $tc('car', 4) }}</p>
+<p>{{ $tc('car', 12) }}</p>
+<p>{{ $tc('car', 21) }}</p>
+
+<p>{{ $tc('banana', 0) }}</p>
+<p>{{ $tc('banana', 4) }}</p>
+<p>{{ $tc('banana', 11) }}</p>
+<p>{{ $tc('banana', 31) }}</p>
+

O resultado será o seguinte:

<p>1 машина</p>
+<p>2 машины</p>
+<p>4 машины</p>
+<p>12 машин</p>
+<p>21 машина</p>
+
+<p>нет бананов</p>
+<p>4 банана</p>
+<p>11 бананов</p>
+<p>31 банан</p>
+

# Pluralização padrão

Se nenhuma regra de pluralização for fornecida para a localidade em uso, a regra padrão do idioma inglês será usada.

+ ← + + Localização de datas + + → +

+ + + diff --git a/pt/guide/sfc.html b/pt/guide/sfc.html new file mode 100644 index 000000000..1a95442f0 --- /dev/null +++ b/pt/guide/sfc.html @@ -0,0 +1,387 @@ + + + + + + Componentes de arquivo único | Vue I18n + + + + + + + + + +
Vue I18n

# Componentes de arquivo único

# Uso básico

Se você estiver construindo um componente ou aplicativo Vue usando componentes de arquivo único, você pode gerenciar as mensagens de localização usando um bloco i18n personalizado.

Código de componente com exemplo de componentes de arquivo único (opens new window):

<i18n>
+{
+  "en": {
+    "hello": "Hello World!"
+  },
+  "pt": {
+    "hello": "Olá Mundo!"
+  }
+}
+</i18n>
+
+<template>
+  <div id="app">
+    <label for="locale">Idiomas</label>
+    <select v-model="locale">
+      <option>en</option>
+      <option>pt</option>
+    </select>
+    <p>Mensagem: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () {
+    this.$i18n.locale = 'pt';
+    return { locale: 'pt' }
+  },
+  watch: {
+    locale (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>
+

# Instalação vue-i18n-loader

Você precisa instalar vue-loader e vue-i18n-loader devido ao uso de blocos personalizados <i18n>. Embora vue-loader (opens new window) provavelmente já seja usado em seu projeto se você estiver trabalhando com componentes de arquivo único, mas você vai precisar instalar vue-i18n-loader (opens new window) adicionalmente:

npm i --save-dev @kazupon/vue-i18n-loader
+

# Webpack

O Webpack requer a seguinte configuração:

Para vue-loader v15 ou posterior:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        loader: '@kazupon/vue-i18n-loader'
+      }
+      // ...
+    ]
+  }
+  // ...
+}
+

Para vue-loader v14:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // você precisa especificar a chave do carregador `i18n` com o `vue-i18n-loader`
+            // (https://github.com/kazupon/vue-i18n-loader)
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
+      }
+      // ...
+    ]
+  }
+  // ...
+}
+

# Vue CLI 3.0

Vue CLI 3.0 (opens new window) ocultar a configuração do Webpack, portanto, para adicionar suporte para tags <i18n> em componentes de arquivo único, precisamos modificar a configuração existente.

Para fazer isso, temos que criar um vue.config.js na raiz do nosso projeto. Depois de fazer isso, devemos incluir o seguinte código:

Para vue-loader v15 ou posterior:

module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('i18n')
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use('i18n')
+        .loader('@kazupon/vue-i18n-loader')
+        .end()
+  }
+}
+

Para vue-loader v14:

const merge = require('deepmerge')
+
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options =>
+        merge(options, {
+          loaders: {
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        })
+      )
+  }
+}
+

Não se esqueça de instalar o deepmerge (opens new window)! (npm i deepmerge -D ou yarn add deepmerge -D)

Você pode aprender mais sobre as possibilidades de modificar a configuração do Webpack existente neste guia (opens new window).

# Laravel-Mix

Para Laravel-mix 4 com vue-loader v15 ou posterior:

// Estenda o Mix usando o método "i18n", que carrega o vue-i18n-loader
+mix.extend( 'i18n', new class {
+        webpackRules() {
+            return [
+                {
+                    resourceQuery: /blockType=i18n/,
+                    type:          'javascript/auto',
+                    loader:        '@kazupon/vue-i18n-loader',
+                },
+            ];
+        }
+    }(),
+);
+
+// Certifique-se de chamar .i18n() para carregar o loader antes do .js(..., ...)
+mix.i18n()
+   .js( 'resources/js/App.js', 'public/js/app.js' )
+   ...
+

para Laravel-mix 2 com vue-loader v14:

No Laravel-mix, começando na versão V2.1 (opens new window), você pode adicionar regras personalizadas usando mix.extend(). O Laravel-mix já possui suas próprias regras para lidar com arquivos .vue. Para adicionar vue-i18n-loader, no arquivo webpack.mix.js adicione o seguinte código:

// O código a seguir injetará o i18n Kazupon/vue-18-loader como o loader de arquivos .vue
+mix.extend( 'i18n', function( webpackConfig, ...args ) {
+    webpackConfig.module.rules.forEach( ( module ) => {
+        // Procure o componente "vue-loader", que processa os arquivos .vue
+        if( module.loader !== 'vue-loader' ) {
+            return;
+        }
+
+        // Neste módulo, adicione o vue-i18n-loader para a tag i18n.
+        module.options.loaders.i18n = '@kazupon/vue-i18n-loader';
+    } );
+} );
+
+// Certifique-se de chamar .i18n() para carregar o loader antes de .js(..., ...)
+mix.i18n()
+   .js( 'resources/assets/js/App.js', 'public/js/app.js' )
+   ...
+

# Carregando YAML

Os blocos personalizados i18n podem ser especificados no formato JSON ou YAML usando o recurso de pré-carregador do vue-loader.

Os blocos personalizados i18n no formato YAML:

<i18n>
+  en:
+    hello: "Hello World!"
+  pt:
+    hello: "Olá Mundo!"
+</i18n>
+

Configuração do Webpack:

Para vue-loader v15 ou posterior:

// Vue CLI 3.0
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('i18n')
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use('i18n')
+        .loader('@kazupon/vue-i18n-loader')
+        .end()
+      .use('yaml')
+        .loader('yaml-loader')
+        .end()
+  }
+}
+

Para vue-loader v14:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preLoaders: {
+            i18n: 'yaml-loader'
+          },
+          loaders: {
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
+      }
+      // ...
+    ]
+  }
+  // ...
+}
+

# Vários blocos personalizados

Você pode usar mensagens de localização com vários blocos personalizados i18n.

<i18n src="./common/locales.json"></i18n>
+<i18n>
+  {
+    "en": {
+      "hello": "Hello World!"
+    },
+    "pt": {
+      "hello": "Olá Mundo!"
+    }
+  }
+</i18n>
+

No exemplo acima, o primeiro bloco personalizado carrega as mensagens de localização genérica usando o atributo src, o segundo bloco personalizado carrega as mensagens de localização que são definidas apenas neste componente de arquivo único. Todos eles serão mesclados com mensagens de localização de componentes.

Desta forma, vários blocos personalizados são úteis quando usados ​​como módulos.

# Estilos Locais

Ao usar vue-i18n com estilos locais style scoped, é importante lembrar de usar deep selector (opens new window) para estilizar o elemento dentro da string de tradução.

Por exemplo:

Quando a tradução contém apenas texto (funciona sem deep selector)

<i18n>
+  {
+    "en": {
+      "hello": "Hello World!"
+    },
+    "pt": {
+      "hello": "Olá Mundo!"
+    }
+  }
+</i18n>
+
+<template>
+  <div class="parent">
+    <p>Mensagem: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<!-- Vai funcionar por exemplo -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+</style>
+

Tradução que contém elemento HTML (deve usar deep selector)

<i18n>
+  {
+    "en": {
+      "hello": "Hello <span>World!</span>"
+    },
+    "pt": {
+      "hello": "Olá <span>Mundo!</span>"
+    }
+  }
+</i18n>
+
+<template>
+  <div class="parent">
+    <p v-html="$t('hello')"></p>
+  </div>
+</template>
+
+<!-- Não vai funcionar por exemplo -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p span {
+    color: red;
+  }
+</style>
+
+<!-- Vai funcionar por exemplo >>> -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p >>> span {
+    color: red;
+  }
+</style>
+
+<!-- Vai funcionar por exemplo /deep/ -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p /deep/ span {
+    color: red;
+  }
+</style>
+
+<!-- Vai funcionar por exemplo ::v-deep -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  ::v-deep .parent p span {
+    color: red;
+  }
+</style>
+

# Blocos personalizados em componente funcional

Se os componentes de arquivo único têm o template usando um componente funcional, e você definiu blocos personalizados i18n, observe que você não pode localizar usando mensagens de local.

Por exemplo, o código a seguir não pode usar mensagens de localização do bloco i18n.

<i18n>
+  {
+    "en": {
+      "hello": "Hello World"
+    },
+    "pt": {
+      "hello": "Olá Mundo"
+    }
+  }
+</i18n>
+
+<template functional>
+  <!-- Mensagem de localização 'hello' na instância pai -->
+  <p>{{ parent.$t('hello') }}</p>
+</template>
+

+ ← + + Hot reloading + + → +

+ + + diff --git a/pt/guide/tooling.html b/pt/guide/tooling.html new file mode 100644 index 000000000..f2f1183c8 --- /dev/null +++ b/pt/guide/tooling.html @@ -0,0 +1,95 @@ + + + + + + Ferramentas | Vue I18n + + + + + + + + + +
Vue I18n

# Ferramentas

Para suportar os aplicativos i18n do Vue, algumas ferramentas são fornecidas oficialmente.

Existem também ferramentas de terceiros que integram o Vue I18n.

# Ferramentas oficiais

# Plugin para Vue CLI

vue-cli-plugin-i18n (opens new window) é o plugin oficial para o Vue CLI.

Com este plugin, você pode configurar um ambiente i18n para seu aplicativo Vue e oferecer suporte ao ambiente de desenvolvimento i18n.

# Módulo para Nuxt

nuxt-i18n (opens new window) é o módulo correspondente para Nuxt.js.

# Loader para Webpack

vue-i18n-loader (opens new window) — é o loader para webpack oficial.

Com este loader é possível usar blocos i18n personalizados em componentes de arquivo único.

Para obter mais informações sobre blocos i18n personalizados, consulte Componentes de arquivo único

# Plugin para ESLint

eslint-plugin-vue-i18n (opens new window) - Plug-in ESLint para Vue I18n.

Permite que você integre facilmente alguns recursos de localização do lint ao seu aplicativo Vue.js.

# Extensões

vue-i18n-extensions (opens new window) fornece algumas extensões para Vue I18n.

Você pode usar esta extensão para habilitar o SSR e melhorar o desempenho do i18n.

# Ferramentas de terceiros

# BabelEdit

BabelEdit (opens new window) é um editor de tradução para aplicativos da web.

O BabelEdit pode traduzir arquivos json e também pode trabalhar com blocos personalizados i18n de componentes de arquivo único.

Mais informações sobre o BabelEdit podem ser encontradas na página de introdução (opens new window).

# i18n Ally

[i18n Ally] (https://marketplace.visualstudio.com/items?itemName=antfu.i18n-ally) é uma extensão i18n para VSCode.

i18n Ally oferece um DX(Experiência do desenvolvedor) incrível para o desenvolvimento de i18n.

Você pode aprender mais sobre a extensão i18n Ally em README (opens new window).

# i18nPlugin (plataforma intellij)

i18nPlugin (opens new window) — Plugin de suporte para idea Intellij i18next (Página do plugin Jetbrains (opens new window)).

Plugin para i18n typescript/javascript/PHP. Suporta vue-i18n. Para habilitar o suporte a vue-i18n vá em configurações -> Ferramentas -> Configuração do plugin i18n e selecione "Vue-i18n". É necessário instalar os diretórios com os arquivos de tradução (tradução por padrão).

# vue-i18n-extract

vue-i18n-extract (opens new window) faz uma análise estática de um projeto Vue.js com base em vue-i18n e relata as seguintes informações:

  • lista de todas as chaves vue-i18n não utilizadas (entradas encontradas nos arquivos de idioma, mas não utilizadas no projeto)
  • lista de todas as chaves ausentes (entradas encontradas no projeto, mas não nos arquivos de idioma)

É possível mostrar a saída no console ou gravá-la em um arquivo json.

As chaves ausentes também podem ser adicionadas automaticamente aos arquivos de tradução fornecidos.

+ ← +

+ + + diff --git a/pt/index.html b/pt/index.html new file mode 100644 index 000000000..f463c0543 --- /dev/null +++ b/pt/index.html @@ -0,0 +1,101 @@ + + + + + + Vue I18n + + + + + + + + + +
Vue I18n
hero

+ Vue I18n +

+ Vue I18n é um internacionalizador de idiomas para Vue.js +

+ Introdução → +

🥇 Patrocinadores Ouro

Nuxt.js

🥈 Patrocinadores prata

Editor de tradução BabelEdit para aplicativos (web apps)

🥉 Patrocinadores Bronze

zenarchitects sendcloud

Simples

Você pode introduzir a internacionalização em seu aplicativo com uma API simples.

Poderoso

Além de traduções simples, suporta a localização, com pluralização, número, data, hora... e etc.

Orientado a componentes

Você pode gerenciar as mensagens de localização dentro de componentes de arquivo único.

+ Distribuído sob a Licença MIT | Copyright © 2020 kazuya kawaguchi +
+ + + diff --git a/pt/installation.html b/pt/installation.html new file mode 100644 index 000000000..ef044bc9d --- /dev/null +++ b/pt/installation.html @@ -0,0 +1,114 @@ + + + + + + Instalação | Vue I18n + + + + + + + + + +
Vue I18n

# Instalação

# Nota de compatibilidade

  • Vue.js versões 2.0.0+

# Download direto / CDN

https://unpkg.com/vue-i18n/dist/vue-i18n (opens new window)

O serviço unpkg.com (opens new window) fornece links CDN com base em pacotes NPM. O link acima sempre apontará para a versão mais recente do NPM. Você pode usar uma versão ou tag específica usando um URL como este https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js (opens new window)

Ao conectar o vue-i18n após o Vue, o plug-in será instalado automaticamente:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+

# NPM

npm install vue-i18n
+

# Yarn

yarn add vue-i18n
+

Ao usar o sistema de módulos, você deve definir explicitamente vue-i18n +via Vue.use():

import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+

Você não precisa fazer isso ao usar tags de script globais <script>.

# Vue CLI 3.x

vue add i18n
+

O Vue CLI 3.x deve ser instalado previamente, podendo instalá-lo com o próximo comando:

npm install @vue/cli -g
+

# Dev Build

Se você precisa utilizar a última compilação de dev, precisará clonar o repositório do GitHub e compilar vue-i18n você mesmo.

git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
+cd node_modules/vue-i18n
+npm install # ou `yarn`
+npm run build  # ou `yarn run build`
+

# Explicação sobre diferentes versões

Dentro do diretório dist/ do pacote NPM (opens new window) você encontrará muitas compilações diferentes do VueI18n. Aqui está uma visão geral da diferença entre eles:

  • UMD: vue-i18n.js
  • CommonJS: vue-i18n.common.js
  • ES Module para empacotadores: vue-i18n.esm.js
  • ES Module para navegadores: vue-i18n.esm.browser.js

# Termos

  • UMD (opens new window): As compilações UMD podem ser usadas diretamente no navegador através de uma tag <script>. O arquivo padrão do Unpkg CDN em https://unpkg.com/vue-i18n (opens new window) é a versão UMD compilada (vue-i18n.js).

  • CommonJS (opens new window): As compilações do CommonJS são destinadas ao uso com sistemas de compilação mais antigos, como browserify (opens new window) ou webpack 1 (opens new window). O arquivo padrão para esses sistemas de compilação (pkg.main) é a compilação CommonJS (vue-i18n.common.js).

  • ES Module (opens new window): VueI18n desde a versão 8.11 fornece duas compilações de Módulos ES (ESM):

    • ESM para sistemas de compilação: projetado para uso com sistemas de compilação modernos, como webpack 2 (opens new window) ou Rollup (opens new window). O formato ESM é projetado para análise estática para que os sistemas de construção possam realizar uma "agitação de árvore" e remover o código não utilizado no pacote final. O arquivo padrão para esses sistemas de construção (pkg.module) é a construção do Módulo ES somente em tempo de execução (vue-i18n.esm.js).
    • ESM para navegadores (apenas para 8.11+, vue-i18n.esm.browser.js): destinado a importações diretas em navegadores modernos usando a tag <script type="module">.

+ ← + + Formatação + + → +

+ + + diff --git a/pt/introduction.html b/pt/introduction.html new file mode 100644 index 000000000..052f284a5 --- /dev/null +++ b/pt/introduction.html @@ -0,0 +1,97 @@ + + + + + + Introdução | Vue I18n + + + + + + + + + +
Vue I18n

# Introdução

Atenção

⚠️ Documentação para Vue I18n v6.0 ou posterior. Se você estiver usando e procurando por documentação para v5.x, consulte Legado.

Vue I18n é um plugin para internacionalização em Vue.js. Ele integra facilmente recursos de localização ao seu aplicativo Vue.js.

É melhor começar o estudo pela a seção Iniciando

# Patrocinadores

# 🥇 Ouro

Nuxt.js

# 🥈 Prata

Editor de tradução BabelEdit para aplicativos (web)

# 🥉 Bronze

zenarchitects sendcloud

# Ajude no Patreon

Sua empresa usa vue-i18n ou vue-cli-plugin-i18n para criar aplicativos incríveis? Junte-se a outros patrocinadores ou torne-se um patrocinador para ver seu logotipo na documentação! +O suporte do Patreon permite ao autor que trabalhe menos e desenvolva mais em software de código aberto como o vue-i18n! +Obrigado!

+ Iniciando + + → +

+ + + diff --git a/pt/started.html b/pt/started.html new file mode 100644 index 000000000..987f8b215 --- /dev/null +++ b/pt/started.html @@ -0,0 +1,141 @@ + + + + + + Iniciando | Vue I18n + + + + + + + + + +
Vue I18n

# Iniciando

NOTA

Neste guia usamos ES2015 (opens new window) nos exemplos de código.

# HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+
+<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+</div>
+

# JavaScript

// Se você usa um sistema de módulos (p. ex. via vue-cli)
+// Importe o Vue e VueI18n assim utilize-o Vue.use(VueI18n).
+//
+// import Vue from 'vue'
+// import VueI18n from 'vue-i18n'
+//
+// Vue.use(VueI18n)
+
+// Mensagens traduzidas de suas localidades
+const messages = {
+  en: {
+    message: {
+      hello: 'Hello World'
+    }
+  },
+  pt: {
+    message: {
+      hello: 'Olá Mundo'
+    }
+  }
+}
+
+// Crie uma instância do VueI18n com opções
+const i18n = new VueI18n({
+  locale: 'pt', // Defina uma localidade
+  messages, // Defina as mensagens
+})
+
+
+// Crie uma instância Vue com a opção `i18n`
+new Vue({ i18n }).$mount('#app')
+
+// Pronto agora o aplicativo foi iniciado!
+

O resultado será o seguinte:

<div id="#app">
+  <p>Olá Mundo</p>
+</div>
+

+ ← + + Instalação + + → +

+ + + diff --git a/ru/api/index.html b/ru/api/index.html new file mode 100644 index 000000000..7e79d6fdf --- /dev/null +++ b/ru/api/index.html @@ -0,0 +1,177 @@ + + + + + + Справочник API | Vue I18n + + + + + + + + + +
Vue I18n

# Справочник API

# Расширение прототипа Vue

# Опции конструктора Vue

# i18n

  • Тип: I18nOptions

Опция локализации на основе компонентов.

  • См. также: Опции конструктора класса VueI18n

# Внедряемые методы

# $t

  • Аргументы:

    • {Path} key: обязательный
    • {Locale} locale: опционально
    • {Array | Object} values: опционально

  • Возвращает: TranslateResult

Получение переведённого сообщения по ключу key. Сообщения локализации в компоненте имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана locale, то используются сообщения локализации из locale. Если был указан key именованного формата / формата списков сообщений локализации, то необходимо указывать также values. Подробнее про значения values можно изучить в разделе Формат сообщений локализации.

Совет

Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции data, const $t = this.$t.bind(this)).

# $tc

  • Аргументы:

    • {Path} key: обязательный
    • {number} choice: опционально, по умолчанию 1
    • {Locale} locale: опционально
    • {string | Array | Object} values: опционально

  • Возвращает: TranslateResult

Получение переведённого сообщения по ключу key с использованием плюрализации. Сообщения локализации компонента имеют приоритет над глобальными сообщениями. Если сообщений локализации в компоненте нет, то локализация осуществляется с помощью глобальных сообщений локализации. Если указана locale, то используются сообщения локализации из locale. Если указано строковое значение для values, то локализация выполняется для этого значения. Если указано значение Array или Object в values, то необходимо указывать с values из $t.

Если вам не подходит реализация плюрализации по умолчанию, смотрите pluralization rules в опциях конструктора и пользовательскую плюрализацию.

Совет

Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции data, const $tc = this.$tc.bind(this)).

# $te

  • Аргументы:

    • {Path} key: обязательный
    • {Locale} locale: опционально

  • Возвращает: boolean

Проверяет существует ли перевод для ключа в сообщениях локализации. Если нет сообщений локализации в компоненте, то проверяет в глобальных сообщениях локализации. Если указана locale, то проверяется наличие в сообщениях локализации locale.

Совет

Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции data, const $te = this.$te.bind(this)).

# $d

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {number | Date} value: обязательный
    • {Path | Object} key: опционально
    • {Locale | Object} locale: опционально

  • Возвращает: DateTimeFormatResult

Локализация даты из value по указанному формату даты из key. Формат указанный в key должен быть зарегистрирован в опции dateTimeFormats класса VueI18n, и зависит от опции locale конструктора VueI18n. Если указать аргумент locale, то он будет иметь приоритет над опцией locale конструктора VueI18n.

Если формата даты для key нет в опции dateTimeFormats, то будет использован запасной формат, основываясь на опции fallbackLocale конструктора VueI18n.

Совет

Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции data, const $d = this.$d.bind(this)).

# $n

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {number} value: обязательный
    • {Path | Object} format: опционально
    • {Locale} locale: опционально

  • Возвращает: NumberFormatResult

Локализация числа value с помощью формата чисел format. Числовой формат из format должен быть зарегистрирован в опции numberFormats класса VueI18n, и зависит от опции locale конструктора VueI18n. Если указать аргумент locale, то он будет иметь приоритет над опцией locale конструктора VueI18n.

Если формат чисел для format не указан в опции numberFormats, будет использован запасной формат, основываясь на опции fallbackLocale конструктора VueI18n.

Если второй аргумент format указан объектом, то в нём должны быть следующие свойства:

  • key {Path}: опционально, форматируемое число
  • locale {Locale}: опционально, локализация
  • compactDisplay {string}: опционально, опция форматирования чисел
  • currency {string}: опционально, опция форматирования чисел
  • currencyDisplay {string}: опционально, опция форматирования чисел
  • currencySign {string}: опционально, опция форматирования чисел
  • localeMatcher {string}: опционально, опция форматирования чисел
  • notation {string}: опционально, опция форматирования чисел
  • numberingSystem {string}: опционально, опция форматирования чисел
  • signDisplay {string}: опционально, опция форматирования чисел
  • style {string}: опционально, опция форматирования чисел
  • unit {string}: опционально, опция форматирования чисел
  • unitDisplay {string}: опционально, опция форматирования чисел
  • useGrouping {boolean}: опционально, опция форматирования чисел
  • minimumIntegerDigits {string}: опционально, опция форматирования чисел
  • minimumFractionDigits {string}: опционально, опция форматирования чисел
  • maximumFractionDigits {string}: опционально, опция форматирования чисел
  • minimumSignificantDigits {string}: опционально, опция форматирования чисел
  • maximumSignificantDigits {string}: опционально, опция форматирования чисел

Любые указанные опции форматирования числа будут иметь приоритет над значениями numberFormats из конструктора VueI18n.

Совет

Обратите внимание, что в хуках жизненного цикла контекст должен быть экземпляром компонента (например в опции data, const $n = this.$n.bind(this)).

# Внедряемые свойства

# $i18n

  • Тип: I18n

  • Только для чтения

Получение экземпляра VueI18n, если был определён.

Если в компоненте указана опция i18n, то получение экземпляра VueI18n компонента. В противном случае, получение корневого экземпляра VueI18n.

# Класс VueI18n

Класс VueI18n реализует интерфейс I18n из определений flowtype (opens new window)

# Статические свойства

# version

  • Тип: string

Версия vue-i18n.

# availabilities

🆕 Добавлено в версии 7.0+

  • Тип: IntlAvailability

Проверка доступности следующих возможностей интернационализации:

  • {boolean} dateTimeFormat: форматирование дат для локалей

  • {boolean} numberFormat: форматирование чисел для локалей

Указанные выше возможности интернационализации зависят от окружения браузера (opens new window), в котором реализован ECMAScript Internationalization API (ECMA-402).

# Опции конструктора

Можно указывать некоторые опции конструктора I18nOptions, основываясь на определениях flowtype (opens new window)

# locale

  • Тип: Locale

  • По умолчанию: 'en-US'

Локаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль явно определяет запасную локализацию.

# fallbackLocale

  • Тип: FallbackLocale

  • По умолчанию: false

Запасная локаль для локализации. Подробнее в разделе Запасная локализация.

# messages

  • Тип: LocaleMessages

  • По умолчанию: {}

Сообщения локализации для локали.

# dateTimeFormats

🆕 Добавлено в версии 7.0+

  • Тип: DateTimeFormats

  • По умолчанию: {}

Форматы дат для локализации.

# numberFormats

🆕 Добавлено в версии 7.0+

  • Тип: NumberFormats

  • По умолчанию: {}

Форматы чисел для локализации.

# availableLocales

🆕 Добавлено в версии 8.9.0+

  • Тип: Locale[]

  • По умолчанию: []

  • Примеры: ["en", "ru"]

Список доступных локалей в messages в лексическом порядке.

# formatter

  • Тип: Formatter

  • По умолчанию: Встроенный formatter

Метод форматирования, реализующий интерфейс Formatter.

# modifiers

🆕 Добавлено в версии 8.15.0+

  • Тип: Modifiers

  • По умолчанию: модификаторы lower и upper

Функции модификаторов для связанных сообщений

# missing

  • Тип: MissingHandler

  • По умолчанию: null

Обработчик для отсутствующих сообщений локализации. Обработчик будет вызван с локалью, ключом сообщения локализации и значениями values.

Если указан этот обработчик и произойдёт попытка доступа к отсутствующему сообщению локализации, то предупреждения в консоли не будет.

# fallbackRoot

  • Тип: Boolean

  • По умолчанию: true

При использовании локализации в компонентах определяет обращаться ли к локализации корневого уровня (глобальной) при неудаче.

При значении false будет выбрасываться предупреждение и возвращаться ключ.

# fallbackRootWithEmptyString

🆕 Добавлено в версии 8.26+

  • Тип: Boolean

  • По умолчанию: true

В локализации компонента укажите, следует ли вернуться к локализации корневого уровня (глобальной), если локальное сообщение представляет собой пустую строку.

Обратите внимание, что поведение по умолчанию в vue-i18n 9.x заключается в том, чтобы не возвращаться к корневому каталогу для локального сообщения, которое является пустой строкой.

Если false, пустое локальное сообщение не будет возвращено в корень и будет храниться как пустая строка.

# sync

  • Тип: Boolean

  • По умолчанию: true

Синхронизировать ли локализацию корневого уровня с локализацией компонента.

При значении false, независимо от локали определённой на корневом уровне, будет использоваться локаль установленная в компоненте.

# silentTranslationWarn

6.1+, 🆙 8.13

  • Тип: Boolean | RegExp

  • По умолчанию: false

Отключение предупреждений, отображаемых при неудаче локализации.

При значении true, отключаются предупреждения об ошибках локализации. Если использовать регулярное выражение, то можно отключать предупреждения об ошибках, которые будут соответствовать key (например, $t).

# silentFallbackWarn

🆕 Добавлено в версии 8.8+, 🆙 8.13

  • Тип: Boolean | RegExp

  • По умолчанию: false

Отключение предупреждений при использовании запасной локали из fallbackLocale или root.

При значении true предупреждения будут генерироваться только если недоступна локализация вообще, а не для случаев использования запасной локали. При использовании регулярного выражения можно отключать предупреждения которые будут соответствовать key (например, $t).

# pluralizationRules

8.5+

  • Тип: PluralizationRules

  • По умолчанию: {}

Набор правил для плюрализации в следующем формате:

  {
+    // Ключ - локаль для которой будет применяться правило.
+    // Value - функция для получения индекса варианта плюрализации от текущего числа и заданного количества вариантов. (См. функцию getChoiceIndex)
+    'pt': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'ru': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'en': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'jp': function(choice, choiceIndex) => Number/* index of the plural word */;
+  }
+

# preserveDirectiveContent

Добавлено в версии 8.7+

  • Тип: Boolean

  • По умолчанию: false

Определяет должен ли элемент директивы v-t сохранять textContent после того как директива будет снята с элемента.

# warnHtmlInMessage

Добавлено в версии 8.11+

  • Тип: WarnHtmlInMessageLevel

  • По умолчанию: off

Разрешить ли использование HTML-форматирования в сообщениях локализации. См. также свойство warnHtmlInMessage.

Внимание!

Со следующей мажорной версии значение по умолчанию warnHtmlInMessage будет warn.

# sharedMessages

Добавлено в версии 8.12+

  • Тип: LocaleMessages

  • По умолчанию: undefined

Общие сообщения локализации при локализации в компонентах. Подробнее в разделе Локализация на основе компонентов.

# postTranslation

Добавлено в версии 8.16+

  • Тип: PostTranslationHandler

  • По умолчанию: null

Пост-обработчик локализации. Выполняется после вызова $t, t, $tc и tc.

Может пригодиться при необходимости дополнительно обработать итоговый текст перевода, например избавиться от висящих пробелов.

# componentInstanceCreatedListener

Добавлено в версии 8.18+

  • Тип: ComponentInstanceCreatedListener

  • По умолчанию: null

Обработчик получения уведомления о создании локального экземпляра компонента. Вызывается с новым и старым (корневыми) экземплярами VueI18n.

Обработчик может потребоваться при расширении корневого экземпляра VueI18n и необходимости ожидания для применения этих расширений к локальному экземпляру компонента.

# escapeParameterHtml

Добавлено в версии 8.22+

  • Тип: Boolean

  • По умолчанию: false

Если escapeParameterHtml установлен в значение true, то параметры интерполяции будут экранированы перед переводом сообщения. Это полезно, когда результат перевода используется в v-html и текст для перевода содержит HTML-разметку (например, <b> вокруг предоставленного пользователем значения). Этот шаблон в основном предназначен для случаев, когда передаются предварительно скомпилированные текстовые строки в компоненты UI.

Процесс экранирования включает в себя замену следующих символов на соответствующие HTML-сущности: <, >, ", '.

Установка escapeParameterHtml в значение true не должна нарушать существующую функциональность, а предоставит защиту от векторов атаки типа XSS.

# Свойства

# locale

  • Тип: Locale

  • Чтение/Запись

Локаль используемая для локализации. Если локаль содержит территорию и диалект, то эта локаль неявно указывает на запасные варианты.

# fallbackLocale

  • Тип: FallbackLocale

  • Чтение/Запись

Локаль используемая для запасной локализации. Способы определения и переключения на запасную локализацию можно изучить в разделе Запасная локализация.

# messages

  • Тип: LocaleMessages

  • Только для чтения

Переведённые сообщения используемые для локализации.

# dateTimeFormats

🆕 Добавлено в версии 7.0+

  • Тип: DateTimeFormats

  • Только для чтения

Форматы форматирования дат для локализации.

# numberFormats

🆕 Добавлено в версии 7.0+

  • Тип: NumberFormats

  • Только для чтения

Форматы форматирования чисел для локализации.

# missing

  • Тип: MissingHandler

  • Чтение/Запись

Обработчик для отсутствующих ключей локализаций.

# formatter

  • Тип: Formatter

  • Чтение/Запись

Метод форматирования, который реализует интерфейс Formatter.

# silentTranslationWarn

6.1+, 🆙 8.13

  • Тип: Boolean | RegExp

  • Чтение/Запись

Отключение предупреждений выводимых при ошибке локализации.

# silentFallbackWarn

🆕 Добавлено в версии 8.8+, 🆙 8.13

  • Тип: Boolean | RegExp

  • Чтение/Запись

Отключение предупреждений выводимых при ошибке использования запасной локализации.

# pluralizationRules

8.5+

  • Тип: PluralizationRules

  • Чтение/Запись

Набор зависимых от локали правил плюрализации.

# preserveDirectiveContent

Добавлено в версии 8.7+

  • Тип: Boolean

  • Чтение/Запись

Должен ли элемент директивы v-t сохранять textContent после того как директива снята с элемента.

# warnHtmlInMessage

Добавлено в версии 8.11+

  • Тип: WarnHtmlInMessageLevel

  • Чтение/Запись

Разрешить ли использование HTML-форматирования в сообщениях локализации.

При установке warn или error проверяются сообщения локализации экземпляра VueI18n.

При установке warn выводятся предупреждения в консоль.

При установке error генерируется Error.

В качестве значения по умолчанию в экземпляре VueI18n установлено off.

# postTranslation

Добавлено в версии 8.16+

  • Тип: PostTranslationHandler

  • Чтение/Запись

Обработчик для пост-обработки перевода.

# Методы

# getChoiceIndex

  • Аргументы:

    • {number} choice
    • {number} choicesLength

  • Возвращает: finalChoice {number}

Получение индекса для плюрализации текущего числа и заданного количества вариантов. Реализация может быть переопределена через изменение прототипа:

VueI18n.prototype.getChoiceIndex = /* пользовательская реализация */
+

Однако в большинстве случаев достаточно передать нужную функцию в pluralizationRules опцию конструктора.

# getLocaleMessage( locale )

  • Аргументы:

    • {Locale} locale

  • Возвращает: LocaleMessageObject

Получение сообщений локализации для локали.

# setLocaleMessage( locale, message )

  • Аргументы:

    • {Locale} locale
    • {LocaleMessageObject} message

Установка сообщений локализации для локали.

ПРИМЕЧАНИЕ

Добавлено в версии 8.11+

При использовании warn или error в свойстве warnHtmlInMessage, при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.

# mergeLocaleMessage( locale, message )

6.1+

  • Аргументы:

    • {Locale} locale
    • {LocaleMessageObject} message

Объединение указанных сообщений локализации с сообщениями локализации локали.

ПРИМЕЧАНИЕ

Добавлено в версии 8.11+

При использовании warn или error в свойстве warnHtmlInMessage, при выполнении этого метода будет проверено используется ли HTML-форматирование для сообщения локализации.

# t( key, [locale], [values] )

  • Аргументы:

    • {Path} key: обязательный
    • {Locale} locale: опционально
    • {Array | Object} values: опционально

  • Возвращает: : TranslateResult

Аналогично функции возвращаемой методом $t. Подробнее см. $t.

# tc( key, [choice], [values] )

  • Аргументы:

    • {Path} key: обязательный
    • {number} choice: опционально, по умолчанию 1
    • {string | Array | Object} values: опционально

  • Возвращает: TranslateResult

Аналогично функции возвращаемой методом $tc. Подробнее см. $tc.

# te( key, [locale] )

  • Аргументы:

    • {string} key: обязательный
    • {Locale} locale: опционально

  • Возвращает: boolean

Проверяет существует ли указанный ключ в глобальных сообщениях локализации. Если указать locale, проверка будет осуществляться в сообщениях локализации locale.

# getDateTimeFormat ( locale )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {Locale} locale

  • Возвращает: DateTimeFormat

Получение форматов форматирования дат локализации.

# setDateTimeFormat ( locale, format )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {Locale} locale
    • {DateTimeFormat} format

Установка форматов форматирования дат для локализации.

# mergeDateTimeFormat ( locale, format )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {Locale} locale
    • {DateTimeFormat} format

Объединение указанных форматов форматирования дат с форматами локализации.

# d( value, [key], [locale] )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {number | Date} value: обязательный
    • {Path | Object} key: опционально
    • {Locale | Object} locale: опционально

  • Возвращает: DateTimeFormatResult

Аналогично функции возвращаемой методом $d. Подробнее см. $d.

# getNumberFormat ( locale )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {Locale} locale

  • Возвращает: NumberFormat

Получение форматов форматирования чисел для локализации.

# setNumberFormat ( locale, format )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {Locale} locale
    • {NumberFormat} format

Установка форматов форматирования чисел для локализации.

# mergeNumberFormat ( locale, format )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {Locale} locale
    • {NumberFormat} format

Объединение указанных форматов форматирования чисел с форматами локализации.

# n( value, [format], [locale] )

🆕 Добавлено в версии 7.0+

  • Аргументы:

    • {number} value: обязательный
    • {Path | Object} format: опционально
    • {Locale} locale: опционально

  • Возвращает: NumberFormatResult

Аналогично функции возвращаемой методом $n. Подробнее см. $n.

# Директивы

🆕 Добавлено в версии 7.3+

# v-t

  • Ожидает: string | Object

  • Модификаторы:

    • .preserve: (8.7.0+) сохраняет textContent элемента при снятии директивы с элемента.

  • Подробности:

Обновление textContent элемента, который был переведён с помощью сообщений локализации. Можно использовать строковый или объектный синтаксис. Строковый синтаксис может быть задан в качестве пути к сообщению локализации. При использовании объектного синтаксиса необходимо указать следующие свойства:

  • path: обязательный, ключ сообщения локализации
  • locale: опционально, локализация
  • args: опционально, для списка или именованного форматирования

ПРИМЕЧАНИЕ

По умолчанию значение textContent элемента удаляется при снятии директивы v-t. Это может быть нежелательной ситуацией например при анимировании списков (opens new window). Для сохранения данных textContent после снятия директивы следует использовать модификатор .preserve или глобальную опцию preserveDirectiveContent.

  • Примеры:
<!-- строковый синтаксис: литерал -->
+<p v-t="'foo.bar'"></p>
+
+<!-- строковый синтаксис: привязка к данным -->
+<p v-t="msg"></p>
+
+<!-- объектный синтаксис: литерал -->
+<p v-t="{ path: 'hi', локализация: 'ru', args: { name: 'kazupon' } }"></p>
+
+<!-- объектный синтаксис: привязка к данным -->
+<p v-t="{ path: greeting, args: { name: fullName } }"></p>
+
+<!-- с модификатором preserve -->
+<p v-t.preserve="'foo.bar'"></p>
+

# Компоненты

# Функциональный компонент i18n

🆕 Добавлено в версии 7.0+

# Входные параметры:

  • path {Path}: обязательный, путь к сообщению локализации
  • locale {Locale}: опционально, локализация
  • tag {string | boolean | Object}: опционально, по умолчанию 'span'
  • places {Array | Object}: опционально (7.2+)

Внимание!

Со следующей мажорной версии опция places будет удалена. Используйте синтаксис слотов.

# Использование:

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ru: {
+    tos: 'Условия обслуживания',
+    term: 'Я соглашаюсь с xxx {0}.'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

# См. также:

Интерполяция компонента

# Функциональный компонент i18n-n

🆕 Добавлено в версии 8.10+

# Входные параметры:

  • value {number}: обязательный, число для форматирования
  • format {string | NumberFormatOptions}: опционально, форматируемое число или объект с указанными опциями форматирования
  • locale {Locale}: опционально, локализация
  • tag {string | boolean | Object}: опционально, по умолчанию 'span'

# Использование:

<div id="app">
+  <!-- ... -->
+  <i18n-n :value="money" format="currency" tag="label">
+    <span v-slot:currency="slotProps" class="font-weight: bold">
+      {{ slotProps.currency }}
+    <span>
+  </i18n-n>
+  <!-- ... -->
+</div>
+
var numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD'
+    }
+  },
+  'ru-RU': {
+    currency: {
+      style: 'currency',
+      currency: 'RUB'
+    }
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en-US',
+  numberFormats
+})
+
+new Vue({
+  i18n,
+  data: {
+    money: 10234
+  }
+}).$mount('#app')
+

# Слоты с ограниченной областью видимости

Функциональный компонент <i18n-n> может принимать различные слоты с ограниченной областью видимости. Список поддерживаемых имён слотов основан на выходных типах Intl.NumberFormat.formatToParts() (opens new window):

  • currency
  • decimal
  • fraction
  • group
  • infinity
  • integer
  • literal
  • minusSign
  • nan
  • plusSign
  • percentSign

Каждый из слотов предоставляет доступ к значениям трёх параметров:

  • [slotName] {FormattedNumberPartType}: параметр с тем же именем, что и имя слота (например, integer)
  • index {Number}: индекс конкретной части в массиве частей числа
  • parts {Array}: массив со всеми отформатированными частями числа

# См. также:

Локализация чисел

# Специальные атрибуты

# place

🆕 Добавлено в версии 7.2+

# Ожидает: {number | string}

Используется при интерполяции компонента для указания индекса при форматировании списком или ключа при именованном форматировании.

Подробнее об использовании в разделе по ссылке ниже.

# См. также:

Интерполяция компонента

+ + + diff --git a/ru/guide/component.html b/ru/guide/component.html new file mode 100644 index 000000000..3e0155ab0 --- /dev/null +++ b/ru/guide/component.html @@ -0,0 +1,195 @@ + + + + + + Локализация на основе компонентов | Vue I18n + + + + + + + + + +
Vue I18n

# Локализация на основе компонентов

В основном данные для локализации (например, locale,messages, и т.д.) задаются опциями конструктора экземпляра VueI18n и устанавливаются через свойство i18n в корневой экземпляр Vue.

Поэтому можно глобально выполнять переводы, используя методы $t или $tc в корневом экземпляре Vue и любом из компонентов в нём. Но также возможно указывать данные для локализации в каждом компоненте в отдельности, что может быть удобнее благодаря компонентно-ориентированному дизайну.

Пример локализации на основе компонентов:

// Установка локализации в корневой экземпляр Vue
+const i18n = new VueI18n({
+  locale: 'ru',
+  messages: {
+    en: {
+      message: {
+        hello: 'hello world',
+        greeting: 'good morning'
+      }
+    },
+    ru: {
+      message: {
+        hello: 'привет мир',
+        greeting: 'доброе утро'
+      }
+    }
+  }
+})
+
+// Определение компонента
+const Component1 = {
+  template: `
+    <div class="container">
+     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
+     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
+   </div>`,
+  i18n: {
+    // опция `i18n`, определение данных локализации для компонента
+    messages: {
+      en: { message: { hello: 'hello component1' } },
+      ru: { message: { hello: 'привет component1' } }
+    }
+  }
+}
+
+new Vue({
+  i18n,
+  components: {
+    Component1
+  }
+}).$mount('#app')
+

Шаблон:

<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+  <component1></component1>
+</div>
+

Результат:

<div id="app">
+  <p>привет мир</p>
+  <div class="container">
+    <p>Component1 locale messages: привет component1</p>
+    <p>Fallback global locale messages: доброе утро</p>
+  </div>
+</div>
+

Если компонент не имеет собственного сообщения для локализации, то в качестве запасного выхода он обратится к глобальным данным для локализации. Компонент использует локаль, установленную в корневом экземпляре (в примере выше установлена: locale: 'ru').

Обратите внимание, по умолчанию при обращении к данным корневой локализации будут генерироваться предупреждения в консоли:

[vue-i18n] Value of key 'message.greeting' is not a string!
+[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.
+

Чтобы скрыть эти предупреждения (оставив те, что предупреждают о полном отсутствии перевода для данного ключа) установите опцию silentFallbackWarn: true при инициализации экземпляра VueI18n.

Если необходимо осуществлять перевод, основываясь на локали компонента, то это можно сделать с помощью опции sync: false и locale в настройках i18n.

# Общие сообщения локализации для компонентов

Иногда может потребоваться импортировать сообщения локализации в определённых компонентах, чтобы не обращаться к глобальным сообщениям локализации (например, общие сообщения для определённых функций компонентов).

Для этого можно использовать опцию sharedMessages в свойстве i18n компонента.

Пример использования общих сообщений локализации:

export default {
+  en: {
+    buttons: {
+      save: 'Save'
+      // ...
+    }
+  },
+  ru: {
+    buttons: {
+      save: 'Сохранить'
+      // ...
+    }
+  }
+}
+

Компонент:

import commonMessage from './locales/common' // импорт общих сообщений локализации
+
+export default {
+  name: 'ServiceModal',
+  template: `
+    <div class="modal">
+      <div class="body">
+        <p>Это хороший сервис</p>
+      </div>
+      <div class="footer">
+        <button type="button">
+          {{ $t('buttons.save') }}
+        </button>
+      </div>
+    </div>
+  `,
+  i18n: {
+    messages: { ... },
+    sharedMessages: commonMessages
+  }
+}
+

Если указаны опции sharedMessages и messages, то их сообщения будут объединены в сообщения локализации в экземпляре VueI18n этого компонента.

# Локализация в функциональных компонентах

При использовании функционального компонента все данные (включая props, children, slots, parent, и т.д.) передаются через context, в котором содержатся все эти атрибуты. Кроме того отсутствует возможность использовать this, поэтому при использовании vue-i18n с функциональными компонентами следует обращаться к $t как к parent.$t, например так:

...
+<div>
+  <a href="#" target="_blank" rel="noopener noreferrer">
+    <img src="./assets/example.jpg" :alt="parent.$t('message.hello')" />
+  </a>
+</div>
+...
+

+ ← + + Пользовательская директива + + → +

+ + + diff --git a/ru/guide/datetime.html b/ru/guide/datetime.html new file mode 100644 index 000000000..ec703623a --- /dev/null +++ b/ru/guide/datetime.html @@ -0,0 +1,147 @@ + + + + + + Локализация дат | Vue I18n + + + + + + + + + +
Vue I18n

# Локализация дат

Поддержка с версии

🆕 7.0+

Можно выполнять локализацию дат по соответствующему формату.

Пример формата для дат:

const dateTimeFormats = {
+  'en-US': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric'
+    }
+  },
+  'pt-BR': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true
+    }
+  }
+}
+

Как видно выше, можно определять именованный формат даты (например, short, long и т.д.) используя опции ECMA-402 Intl.DateTimeFormat (opens new window)

После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию dateTimeFormats в конструкторе VueI18n:

const i18n = new VueI18n({
+  dateTimeFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

Шаблон:

<div id="app">
+  <p>{{ $d(new Date(), 'short') }}</p>
+  <p>{{ $d(new Date(), 'long', 'pt-BR') }}</p>
+</div>
+

Результат:

<div id="app">
+  <p>Jan 18, 2021</p>
+  <p>domingo, 18 de janeiro de 2021 5:47 AM</p>
+</div>
+

+ ← + + Локализация чисел + + → +

+ + + diff --git a/ru/guide/directive.html b/ru/guide/directive.html new file mode 100644 index 000000000..7d49dd78e --- /dev/null +++ b/ru/guide/directive.html @@ -0,0 +1,173 @@ + + + + + + Пользовательская директива | Vue I18n + + + + + + + + + +
Vue I18n

# Пользовательская директива

Поддержка с версии

🆕 7.3+

Переводы можно осуществлять не только используя пользовательскую директиву v-t, но и с помощью метода $t.

# Строковый синтаксис

Можно передавать ключ сообщения локализации строкой.

JavaScript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hi there!' },
+      ru: { hello: 'привет всем!' }
+    }
+  }),
+  data: { path: 'hello' }
+}).$mount('#string-syntax')
+

Шаблон:

<div id="string-syntax">
+  <!-- строковый литерал -->
+  <p v-t="'hello'"></p>
+  <!-- привязка пути к сообщению из данных -->
+  <p v-t="path"></p>
+</div>
+

Результат:

<div id="string-syntax">
+  <p>привет всем!</p>
+  <p>привет всем!</p>
+</div>
+

# Объектный синтаксис

Можно использовать объектный синтаксис.

JavaScript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hi {name}!' },
+      ru: { hello: 'привет {name}！' }
+    }
+  }),
+  computed: {
+    nickName() { return 'kazupon' }
+  },
+  data: { path: 'hello' }
+}).$mount('#object-syntax')
+

Шаблон:

<div id="object-syntax">
+  <!-- литерал -->
+  <p v-t="{ path: 'hello', locale: 'ru', args: { name: 'kazupon' } }"></p>
+  <!-- привязка к данным -->
+  <p v-t="{ path: path, args: { name: nickName } }"></p>
+</div>
+

Результат:

<div id="object-syntax">
+  <p>привет、kazupon！</p>
+  <p>hi kazupon!</p>
+</div>
+

# Использование с transition

Поддержка с версии

🆕 8.7+

При использовании директивы v-t на элементе внутри компонента <transition> (opens new window), можно заметить как переведённое сообщение исчезает во время анимации перехода. Это поведение связано с реализацией самого компонента <transition> — все директивы в исчезающем элементе внутри компонента <transition> должны быть уничтожены до начала анимации. Это может привести к мерцанию содержимого на коротких анимациях, но наиболее заметно при длинных анимациях переходов.

Чтобы сохранить содержимое директивы во время анимации перехода, необходимо добавить модификатор .preserve при определении директивы v-t.

Javascript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { preserve: 'with preserve' }
+    }
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

Шаблон:

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t.preserve="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

Также можно глобально установить настройку preserveDirectiveContent в экземпляре VueI18n, что повлияет на все директивы v-t без добавления модификатора к ним.

JavaScript:

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { preserve: 'with preserve' }
+    },
+    preserveDirectiveContent: true
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

Шаблон:

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

Подробнее о примерах выше можно изучить здесь (opens new window)

# $t или v-t

# $t

$t — это метод, добавленный в экземпляр Vue. У него следующие плюсы и минусы:

# Плюсы

Предоставляет гибкость в использовании синтаксиса фигурных скобок {{}} в шаблонах, а также применять в вычисляемых свойствах и методах экземпляра Vue.

# Минусы

$t выполняется каждый раз когда происходит перерисовка, поэтому у него есть расходы на осуществление перевода.

# v-t

v-t — пользовательская директива. У неё следующие плюсы и минусы:

# Плюсы

v-t имеет лучшую производительность в сравнении с методом $t, благодаря кэшу в пользовательской директиве после выполнения перевода. Также можно реализовать предварительный перевод с помощью модуля для компилятора Vue, который предоставляет плагин vue-i18n-extensions (opens new window).

Таким образом, можно достичь большей оптимизации производительности.

# Минусы

v-t нельзя использовать также гибко, как $t, и это добавляет сложности. Перевод с помощью v-t вставляется в textContent элемента. Также, при использовании рендеринга на стороне сервера необходимо установить пользовательскую директиву (opens new window) через опцию directives функции createRenderer.

+ ← + + Интерполяция компонента + + → +

+ + + diff --git a/ru/guide/fallback.html b/ru/guide/fallback.html new file mode 100644 index 000000000..5dc024024 --- /dev/null +++ b/ru/guide/fallback.html @@ -0,0 +1,146 @@ + + + + + + Запасная локализация | Vue I18n + + + + + + + + + +
Vue I18n

# Запасная локализация

Вкратце: указывайте fallbackLocale: '<lang>' для определения языка, который будет использоваться, если нет перевода в выбранной локализации.

# Неявное определение запасных локализаций при использовании локалей

Если locale содержит территорию и опционально диалект, то неявно будут определены автоматически запасные локали.

Например для de-DE-bavarian в качестве запасных будут считаться следующие:

  1. de-DE-bavarian
  2. de-DE
  3. de

Для отключения автоматического определения запасных локалей укажите символ !, например de-DE!

# Явное определение одной локали запасной локализации

Иногда не все ключи сообщений переведены на другие языки. В примере ниже, сообщение для ключа hello доступно в английской локали, но отсутствует в русской:

const messages = {
+  en: {
+    hello: 'Hello, world!'
+  },
+  ru: {
+    // упс, не все переведено
+  }
+}
+

Если хочется использовать сообщения локализации из en, когда перевод отсутствует в нужной локализации, то следует указать опцию fallbackLocale в конструкторе VueI18n:

const i18n = new VueI18n({
+  locale: 'ru',
+  fallbackLocale: 'en',
+  messages
+})
+

Шаблон:

<p>{{ $t('hello') }}</p>
+

Результат:

<p>Hello, world!</p>
+

По умолчанию, если использовались сообщения запасной локализации из fallbackLocale, то в консоли будут выведены соответствующие предупреждения:

[vue-i18n] Value of key 'hello' is not a string!
+[vue-i18n] Fall back to translate the keypath 'hello' with 'en' locale.
+

Чтобы скрыть такие предупреждения (оставив при этом те, в случаях полного отсутствия переводов для данного ключа) установите silentFallbackWarn: true при инициализации экземпляра VueI18n.

# Явное определение запасной локали с помощью массива

Можно указать более одной запасной локализации с помощью массива. Например:

fallbackLocale: ['ru', 'en'],
+

# Явное определение запасной локали с помощью объекта

Более сложный алгоритм принятия решений для определения запасной локали можно реализовать с помощью карты принятия решений в виде объекта.

Например для подобного объекта:

fallbackLocale: {
+  /* 1 */ 'de-CH':   ['fr', 'it'],
+  /* 2 */ 'zh-Hant': ['zh-Hans'],
+  /* 3 */ 'es-CL':   ['es-AR'],
+  /* 4 */ 'es':      ['en-GB'],
+  /* 5 */ 'pt':      ['es-AR'],
+  /* 6 */ 'default': ['en', 'ru']
+},
+

Будут следующие цепочки выбора запасной локали:

Локаль Цепочка выбора
'de-CH' de-CH > fr > it > en > ru
'de' de > en > ru
'zh-Hant' zh-Hant > zh-Hans > zh > en > ru
'es-SP' es-SP > es > en-GB > en > ru
'es-SP!' es-SP > en > ru
'fr' fr > en > ru
'pt-BR' pt-BR > pt > es-AR > es > en-GB > en > ru
'es-CL' es-CL > es-AR > es > en-GB > en > ru

# Резервная интерполяция

Вкратце: установите formatFallbackMessages: true чтобы выполнять интерполяции шаблона по ключам перевода, когда в выбранном языке отсутствует данный ключ для перевода.

Так как ключи переводов являются строками, то можно использовать само сообщение в качестве ключа (для определённого языка). Например:

const messages = {
+  ru: {
+    'Hello, world!': 'Привет мир!'
+  }
+}
+

Это может быть полезным, потому что не нужно будет указывать перевод для строки "Hello, world!" в английской локализации.

Фактически, можно указывать даже параметры в ключе. Вместе с formatFallbackMessages: true это позволит опустить создание шаблонов для «базового» языка; потому что его ключи уже находятся в шаблоне.

const messages = {
+  ru: {
+    'Hello {name}': 'Здравствуйте {name}'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'ru',
+  fallbackLocale: 'en',
+  formatFallbackMessages: true,
+  messages
+})
+

Шаблон:

<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>
+<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>
+

Результат:

<p>Здравствуйте, John</p>
+<p>The weather today is sunny!</p>
+

+ ← + + Локализация на основе компонентов + + → +

+ + + diff --git a/ru/guide/formatting.html b/ru/guide/formatting.html new file mode 100644 index 000000000..e777f76d0 --- /dev/null +++ b/ru/guide/formatting.html @@ -0,0 +1,221 @@ + + + + + + Формат сообщений локализации | Vue I18n + + + + + + + + + +
Vue I18n

# Формат сообщений локализации

# Именованный формат

Сообщения локализации:

const messages = {
+  en: {
+    message: {
+      hello: '{msg} world'
+    }
+  },
+  ru: {
+    message: {
+      hello: '{msg} мир'
+    }
+  }
+}
+

Шаблон:

<p>{{ $t('message.hello', { msg: 'привет' }) }}</p>
+

Результат:

<p>привет мир</p>
+

# Формат списков

Сообщения локализации:

const messages = {
+  en: {
+    message: {
+      hello: '{0} world'
+    }
+  },
+  ru: {
+    message: {
+      hello: '{0} мир'
+    }
+  }
+}
+

Шаблон:

<p>{{ $t('message.hello', ['привееет']) }}</p>
+

Результат:

<p>привееет мир</p>
+

Форматирование списков также принимает объекты, соответствующие по структуре массиву:

<p>{{ $t('message.hello', {'0': 'привееет'}) }}</p>
+

Результат:

<p>привееет мир</p>
+

# HTML формат

Обратите внимание

⚠️ Динамическая локализация произвольного HTML на вебсайте очень опасна, потому что легко может привести к XSS-уязвимостям. Используйте HTML-интерполяцию только для доверенного контента и никогда для пользовательского.

Рекомендуем в таких случаях использовать возможности интерполяции компонента.

Обратите внимание

🆕 Добавлено в версии 8.11+

Можно управлять использованием HTML форматирования. Для подробностей см. опцию конструктора warnHtmlInMessage и свойства API.

Иногда требуется отобразить сообщение локализации HTML-кодом, а не статической строкой.

const messages = {
+  en: {
+    message: {
+      hello: 'hello <br> world'
+    }
+  },
+  ru: {
+    message: {
+      hello: 'привет <br> мир'
+    }
+  }
+}
+

Шаблон:

<p v-html="$t('message.hello')"></p>
+

Результат (вместо отформатированного сообщения)

<p>
+  привет
+  <!-- <br> существует, но отрисован как html, а не строкой -->
+  мир
+</p>
+

# Формат ruby on rails i18n

Сообщения локализации:

const messages = {
+  en: {
+    message: {
+      hello: '%{msg} world'
+    }
+  },
+  ru: {
+    message: {
+      hello: '%{msg} мир'
+    }
+  }
+}
+

Шаблон:

<p>{{ $t('message.hello', { msg: 'привет' }) }}</p>
+

Результат:

<p>привет мир</p>
+

# Пользовательский формат

Иногда может потребоваться реализовать локализацию для собственного формата сообщений (например, использовать синтаксиса сообщений ICU (opens new window)).

Реализовать это можно с помощью специального пользовательского метода форматирования, который должен реализовать интерфейс Formatter (opens new window).

Пример пользовательского метода форматирования с синтаксисом класса ES2015:

// Реализация пользовательского Formatter
+class CustomFormatter {
+  constructor(options) {
+    // ...
+  }
+
+  //
+  // interpolate
+  //
+  // @param {string} message
+  //   строка или список или именованный формат
+  //   напр.
+  //   - именованный формат: 'Hi {name}'
+  //   - формат списка: 'Hi {0}'
+  //
+  // @param {Object | Array} values
+  //   значения интерполяции `message`.
+  //   переданные значения с `$t`, `$tc` и функциональным компонентом `i18n`.
+  //   напр.
+  //   - $t('hello', { name: 'Alex' }) -> переданные значения: Object `{ name: 'Alex' }`
+  //   - $t('hello', ['Alex']) -> переданные значения: Array `['Alex']`
+  //   - функциональный компонент `i18n` (интерполяция в компоненте)
+  //     <i18n path="hello">
+  //       <p>Alex</p>
+  //       <p>how are you?</p>
+  //     </i18n>
+  //     -> переданные значения: Array (included VNode):
+  //        `[VNode{ tag: 'p', text: 'Alex', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`
+  //
+  // @return {Array<any>}
+  //   интерполированные значения. Они необходимы чтобы вернуть следующее:
+  //   - массив строк, когда используется `$t` или `$tc`.
+  //   - массив, включая объект VNode, когда используется функциональный компонент `i18n`.
+  //
+  interpolate(message, values) {
+    // реализация логики интерполяции
+    // ...
+
+    // возвращаем интерполированный массив
+    return ['resolved message string']
+  }
+}
+
+// Регистрация через опцию `formatter`
+const i18n = new VueI18n({
+  locale: 'en-US',
+  formatter: new CustomFormatter(/* опции конструктора */),
+  messages: {
+    'en-US': {
+      // ...
+    },
+    'ru-RU': {
+      // ...
+    }
+    // ...
+  }
+})
+
+// Запускаем приложение!
+new Vue({ i18n }).$mount('#app')
+

Также посмотрите официальный пример пользовательского метода форматирования (opens new window).

+ ← + + Плюрализация + + → +

+ + + diff --git a/ru/guide/hot-reload.html b/ru/guide/hot-reload.html new file mode 100644 index 000000000..8cb13326a --- /dev/null +++ b/ru/guide/hot-reload.html @@ -0,0 +1,181 @@ + + + + + + Горячая перезагрузка переводов | Vue I18n + + + + + + + + + +
Vue I18n

# Горячая перезагрузка переводов

С помощью функции Webpack для горячей перезагрузки модулей (HMR) (opens new window) можно отслеживать изменения в файлах локализации и осуществлять их горячую перезагрузку в приложении.

# Простой пример

Для статичного набора локалей, можно явно указать горячую перезагрузку этих переводов:

import Vue from "vue"
+import VueI18n from "vue-i18n"
+import en from './en'
+import ru from './ru'
+
+const messages = {
+  en,
+  ru
+}
+
+// Экземпляр VueI18n
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+// Запускаем приложение
+const app = new Vue({
+  i18n
+  // ...
+}).$mount('#app')
+
+// Добавляем горячую перезагрузку сообщений локализации
+if (module.hot) {
+  module.hot.accept(['./en', './ru'], function() {
+    i18n.setLocaleMessage('en', require('./en').default)
+    i18n.setLocaleMessage('ru', require('./ru').default)
+    // Или добавляем горячую перезагрузку через свойство $i18n
+    // app.$i18n.setLocaleMessage('en', require('./en').default)
+    // app.$i18n.setLocaleMessage('ru', require('./ru').default)
+  })
+}
+

# Продвинутый пример

Если требуется поддержка изменяющегося набор переводов, можно реализовать горячую перезагрузку для всех локалей динамически через require.context:

import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+// Загрузка всех локалей и сохранение контекста
+function loadMessages() {
+  const context = require.context("./locales", true, /[a-z0-9-_]+\.json$/i);
+
+  const messages = context
+    .keys()
+    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
+    .reduce(
+      (messages, { key, locale }) => ({
+        ...messages,
+        [locale]: context(key),
+      }),
+      {}
+    );
+
+  return { context, messages };
+}
+
+const { context, messages } = loadMessages();
+
+// Экземпляр VueI18n
+const i18n = new VueI18n({
+  locale: "en",
+  messages,
+});
+
+// Запускаем приложение
+const app = new Vue({
+  i18n,
+  // ...
+}).$mount('#app');
+
+// Добавляем горячую перезагрузку сообщений локализации
+if (module.hot) {
+  module.hot.accept(context.id, () => {
+    const { messages: newMessages } = loadMessages();
+
+    Object.keys(newMessages)
+      .filter((locale) => messages[locale] !== newMessages[locale])
+      .forEach((locale) => {
+        messages[locale] = newMessages[locale];
+        i18n.setLocaleMessage(locale, messages[locale]);
+      });
+  });
+}
+

+ ← + + Переключение локализации + + → +

+ + + diff --git a/ru/guide/interpolation.html b/ru/guide/interpolation.html new file mode 100644 index 000000000..c6a951898 --- /dev/null +++ b/ru/guide/interpolation.html @@ -0,0 +1,249 @@ + + + + + + Интерполяция компонента | Vue I18n + + + + + + + + + +
Vue I18n

# Интерполяция компонента

# Базовое использование

Поддержка с версии

🆕 7.0+

Иногда требуется перевести сообщения в которых есть HTML теги или компоненты. Например:

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

Для такого сообщения, если хотим использовать $t, то, вероятно, попробуем достичь скомпоновав из следующих сообщений локализации:

const messages = {
+  en: {
+    term1: "I Accept xxx's",
+    term2: 'Terms of Service Agreement'
+  }
+}
+

И в итоге шаблон станет выглядеть так:

<p>{{ $t('term1') }}<a href="/term">{{ $t('term2') }}</a></p>
+

Результат:

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

Это выглядит очень громоздко, но если перенести тег <a> в сообщение локализации, то добавится вероятность XSS-уязвимости из-за применения v-html="$t('term')".

Этого можно избежать воспользовавшись функциональным компонентом i18n. Например:

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ru: {
+    tos: 'Условия обслуживания',
+    term: 'Я соглашаюсь с xxx {0}.'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

Результат:

<div id="app">
+  <!-- ... -->
+  <label for="tos">
+    I accept xxx <a href="/term" target="_blank">Term of Service</a>.
+  </label>
+  <!-- ... -->
+</div>
+

Подробнее о примере можно изучить здесь (opens new window)

Потомки функционального компонента i18n интерполируют сообщения локализации по входному параметру path.

В примере выше:

<a :href="url" target="_blank">{{ $t('tos') }}</a>

интерполируется с сообщением локализации term.

В примере выше интерполяция компонента использует формат в виде списка. Потомки функционального компонента i18n интерполируются по порядку их появления.

Определить тип корневого элемента можно указать с помощью входного параметра tag. Если входной параметр не указан, то по умолчанию будет 'span'. Также можно указать значение false, чтобы вставлять дочерние элементы без создания и оборачивания в корневой.

# Использование синтаксиса слотов

Поддержка с версии

🆕 8.14+

Гораздо удобнее использовать синтаксис именованных слотов. Например:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <template v-slot:limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template v-slot:action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

Результат:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until
+    <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

С версии Vue 2.6 можно использовать сокращённый синтаксис слотов в шаблонах:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <template #limit>
+      <span>{{ changeLimit }}</span>
+    </template>
+    <template #action>
+      <a :href="changeUrl">{{ $t('change') }}</a>
+    </template>
+  </i18n>
+  <!-- ... -->
+</div>
+

Ограничение

⚠️ В компоненте i18n входные параметры слота не поддерживаются.

# Использование синтаксиса places

Внимание!

В следующей мажорной версии входные параметры place и places будут объявлены устаревшими. Рекомендуем использовать синтаксис слотов.

Поддержка с версии

🆕 7.2+

Обратите внимание

⚠️ В компоненте i18n содержимое, состоящее только из пробелов, будет опущено.

Именованное форматирование поддерживается с помощью атрибута place. Например:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <span place="limit">{{ changeLimit }}</span>
+    <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

Результат:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until
+    <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

Обратите внимание

⚠️ Для использования именованного форматирования все потомки компонента i18n должны иметь установленный атрибут place. В противном случае будет использовано форматирование списком.

Если всё же необходимо интерполировать текстовое содержимое с помощью именованного форматирования, можно определить свойство places на компоненте i18n. Например:

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p" :places="{ limit: refundLimit }">
+    <a place="action" :href="refundUrl">{{ $t('refund') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+

Результат:

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/refund">refund your ticket</a> until 30 minutes from
+    departure.
+  </p>
+  <!-- ... -->
+</div>
+

+ ← + + Однофайловые компоненты + + → +

+ + + diff --git a/ru/guide/lazy-loading.html b/ru/guide/lazy-loading.html new file mode 100644 index 000000000..59777b720 --- /dev/null +++ b/ru/guide/lazy-loading.html @@ -0,0 +1,156 @@ + + + + + + Ленивая загрузка переводов | Vue I18n + + + + + + + + + +
Vue I18n

# Ленивая загрузка переводов

Одновременная загрузка всех файлов переводов может быть излишней и ненужной.

Ленивая или асинхронная загрузка файлов переводов очень просто реализуется при использовании Webpack.

Предположим, что у нас есть каталог проекта следующей структуры:

наш-проект-отлично
+-dist
+-src
+--routes
+--store
+--setup
+---i18n-setup.js
+--lang
+---en.js
+---it.js
+

В каталоге lang располагаются все файлы переводов. В каталоге setup сгруппированы различные файлы настроек, например настройки i18n, регистрация глобальных компонентов, инициализации плагинов и другое.

// i18n-setup.js
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from '@/lang/en'
+import axios from 'axios'
+
+Vue.use(VueI18n)
+
+export const i18n = new VueI18n({
+  locale: 'en', // установка локализации
+  fallbackLocale: 'en',
+  messages // установка сообщений локализации
+})
+
+const loadedLanguages = ['en'] // список локализаций, которые пред-загружены
+
+function setI18nLanguage(lang) {
+  i18n.locale = lang
+  axios.defaults.headers.common['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync(lang) {
+  // Если локализация та же
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // Если локализация уже была загружена
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // Если локализация ещё не была загружена
+  return import(
+    /* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`
+  ).then(messages => {
+    i18n.setLocaleMessage(lang, messages.default)
+    loadedLanguages.push(lang)
+    return setI18nLanguage(lang)
+  })
+}
+

Для начала создаём новый экземпляр VueI18n как обычно. Затем определяем массив loadedLanguages в котором будем хранить список загруженных языков. Далее создаём функцию setI18nLanguage, которая будет переключать локализацию в экземпляре vueI18n, axios и где ещё это необходимо.

Функция loadLanguageAsync будет использоваться для изменения языка. Загрузка новых файлов осуществляется функцией import, которую предоставляет Webpack и позволяет загружать файлы динамически, а поскольку она возвращает Promise, то можем легко дождаться окончания загрузки.

Подробнее о динамических импортах можно изучить в документации Webpack (opens new window).

Использовать loadLanguageAsync очень просто. Например, в хуке beforeEach vue-router.

router.beforeEach((to, from, next) => {
+  const lang = to.params.lang
+  loadLanguageAsync(lang).then(() => next())
+})
+

Можно доработать реализацию, например добавив проверку поддерживается ли переданный lang или нет и вызывать reject чтобы отловить подобные случаи в хуке beforeEach и остановить навигацию.

+ ← + + Инструментарий + + → +

+ + + diff --git a/ru/guide/locale.html b/ru/guide/locale.html new file mode 100644 index 000000000..e164d01f3 --- /dev/null +++ b/ru/guide/locale.html @@ -0,0 +1,130 @@ + + + + + + Переключение локализации | Vue I18n + + + + + + + + + +
Vue I18n

# Переключение локализации

Обычно используют корневой экземпляр Vue в качестве точки истины, а все дочерние компоненты используют свойство locale от класса VueI18n передаваемого по ссылке.

Иногда может потребоваться динамически переключать локализацию. Для этого нужно изменить значение свойства locale экземпляра VueI18n.

const i18n = new VueI18n({
+  locale: 'ru', // устанавливаем локализацию по умолчанию
+  ...
+})
+
+// Создаём корневой экземпляр Vue
+new Vue({
+  i18n,
+  ...
+}).$mount('#app')
+
+// Переключаем на другую локализацию
+i18n.locale = 'en'
+

Каждый компонент содержит экземпляр VueI18n, ссылающийся на свойство $i18n, которое также можно использовать для переключения локализации.

Пример:

<template>
+  <div class="locale-changer">
+    <select v-model="$i18n.locale">
+      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
+        {{ lang }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'locale-changer',
+    data() {
+      return { langs: ['ru', 'en'] }
+    }
+  }
+</script>
+

Обратите внимание

⚠️ Изменение локализации игнорируется компонентами с опцией sync: false.

Компонент vs. корневая область видимости

⚠️ Изменение $i18n.locale внутри компонента не приводит к изменению корневой локализации. Если вы полагаетесь на корневую локализацию, например, при использовании корневой запасной локализации, используйте $root.$i18n.locale вместо $i18n.locale.

+ ← + + Ленивая загрузка переводов + + → +

+ + + diff --git a/ru/guide/messages.html b/ru/guide/messages.html new file mode 100644 index 000000000..0c44f6a02 --- /dev/null +++ b/ru/guide/messages.html @@ -0,0 +1,254 @@ + + + + + + Синтаксис сообщений локализации | Vue I18n + + + + + + + + + +
Vue I18n

# Синтаксис сообщений локализации

# Структура

Синтаксис сообщений локализации:

// Как определение Flowtype, синтаксис сообщений перевода аналогичен аннотации BNF
+type LocaleMessages = { [key: Locale]: LocaleMessageObject }
+type LocaleMessageObject = { [key: Path]: LocaleMessage }
+type LocaleMessageArray = LocaleMessage[]
+type MessageContext = {
+  list: (index: number) => mixed,
+  named: (key: string) => mixed,
+  linked: (key: string) => TranslateResult,
+  values: any,
+  path: string,
+  formatter: Formatter,
+  messages: LocaleMessages,
+  locale: Locale
+};
+type MessageFunction = (ctx: MessageContext) => string;
+type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;
+type Locale = string
+type Path = string
+

Используя синтаксис выше, можно создать следующую структуру сообщений локализации:

{
+  // локализация 'ru'
+  "ru": {
+    "key1": "это сообщение 1", // обычное использование
+    "nested": {
+      // вложенное
+      "message1": "это вложенное сообщение 1"
+    },
+    "errors": [
+      // массив
+      "это сообщение кода ошибки 0",
+      {
+        // объект в массиве
+        "internal1": "это внутреннее сообщение кода ошибки 1"
+      },
+      [
+        // массив в массиве
+        "это вложенный массив ошибки 1"
+      ]
+    ]
+  },
+  // локализация 'en'
+  "en": {
+    // ...
+  }
+}
+

Для такой структуры сообщений локализации, можно переводить сообщения используя ключи:

<div id="app">
+  <!-- обычное использование -->
+  <p>{{ $t('key1') }}</p>
+  <!-- вложенное -->
+  <p>{{ $t('nested.message1') }}</p>
+  <!-- массив -->
+  <p>{{ $t('errors[0]') }}</p>
+  <!-- объект в массиве -->
+  <p>{{ $t('errors[1].internal1') }}</p>
+  <!-- массив в массиве -->
+  <p>{{ $t('errors[2][0]') }}</p>
+</div>
+

Результат:

<div id="app">
+  <!-- обычное использование -->
+  <p>это сообщение 1</p>
+  <!-- вложенное -->
+  <p>это вложенное сообщение 1</p>
+  <!-- массив -->
+  <p>это сообщение кода ошибки 0</p>
+  <!-- объект в массиве -->
+  <p>это внутреннее сообщение кода ошибки 1</p>
+  <!-- массив в массиве -->
+  <p>это вложенный массив ошибки 1</p>
+</div>
+

# Связанные сообщения локализации

Когда есть ключ с сообщением перевода, которое в точности повторяется в сообщении по другому ключу, то вместо дублирования можно поставить ссылку на него. Для этого к его содержимому нужно добавить префикс @: после которого указать полное имя ключа к сообщению перевода, включая пространство имён, к которому делаем ссылку.

Сообщения локализации:

const messages = {
+  en: {
+    message: {
+      the_world: 'the world',
+      dio: 'DIO:',
+      linked: '@:message.dio @:message.the_world !!!!'
+    }
+  }
+}
+

Шаблон:

<p>{{ $t('message.linked') }}</p>
+

Результат:

<p>DIO: the world !!!!</p>
+

# Форматирование связанных сообщений локализации

Если важен регистр символов в переводе, то можно управлять регистром связанного сообщения локализации. Связанные сообщения можно отформатировать используя модификатор @.modifier:key

Доступны следующие модификаторы:

  • upper: Форматирование в верхний регистр всех символов в связанном сообщении.
  • lower: Форматирование в нижний регистр всех символов в связанном сообщении.
  • capitalize: Форматирование заглавной первой буквы в связанном сообщении.

Сообщения локализации:

const messages = {
+  en: {
+    message: {
+      homeAddress: 'Home address',
+      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
+    }
+  },
+  ru: {
+    message: {
+      homeAddress: 'Домашний адрес',
+      missingHomeAddress: 'Пожалуйста укажите @.lower:message.homeAddress'
+    }
+  }
+}
+
<label>{{ $t('message.homeAddress') }}</label>
+
+<p class="error">{{ $t('message.missingHomeAddress') }}</p>
+

Результат:

<label>Домашний адрес</label>
+
+<p class="error">Пожалуйста укажите домашний адрес</p>
+

При необходимости можно добавлять новые модификаторы или перезаписывать существующие через опцию modifiers в конструкторе VueI18n.

const i18n = new VueI18n({
+  locale: 'ru',
+  modifiers: {
+    // Добавление нового модификатора
+    snakeCase: str => str.split(' ').join('-')
+  },
+  messages: {
+    // ...
+  },
+})
+

# Группировка с помощью скобок

Ключ связанного сообщения также можно указывать в виде @:(message.foo.bar.baz), где ссылка на другой ключ перевода обрамляется в скобки ().

Подобное может потребоваться, если за ссылкой на другое сообщение @:message.something требуется поставить точку ., которая в противном случае считалась бы частью ссылки.

Сообщения локализации:

const messages = {
+  en: {
+    message: {
+      dio: 'DIO',
+      linked: "There's a reason, you lost, @:(message.dio)."
+    }
+  },
+  ru: {
+    message: {
+      dio: 'DIO',
+      linked: "Есть причина по которой ты проиграл, @:(message.dio)."
+    }
+  }
+}
+

Шаблон:

<p>{{ $t('message.linked') }}</p>
+

Результат:

<p>There's a reason, you lost, DIO.</p>
+

# Функция для сообщения

vue-i18n рекомендует использовать строки для формата списком или именованного формата в качестве сообщения локализации при переводе сообщений.

Однако бывают ситуации, когда из-за сложного синтаксиса языка, необходима полная мощь возможностей JavaScript. В таком случае, вместо строковых сообщений можно использовать функцию для сообщения.

Функция ниже просто возвращает приветствие:

const messages = {
+  en: {
+    greeting: (ctx) => 'hello!'
+  },
+  ru: {
+    greeting: (ctx) => 'привет!'
+  }
+}
+

Использовать функцию для сообщения очень просто! Необходимо просто указать ключ с помощью $t или t:

<p>{{ $t('greeting') }}</p>
+

Результат будет таким:

<p>привет!</p>
+

Используется возвращаемый результат из функции для сообщения.

# Именованный формат

vue-i18n поддерживает именованный формат для строковых сообщений. vue-i18n интерполирует значения с помощью $t или t и выводит их.

Тоже самое можно сделать и с функцией для сообщения, используя контекст сообщения:

Пример приветствия:

const messages = {
+  en: {
+    greeting: (ctx) => `hello, ${ctx.named('name')}!`
+  },
+  ru: {
+    greeting: (ctx) => `привет, ${ctx.named('name')}!`
+  }
+}
+

Шаблон:

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>
+

Результат:

<p>привет, DIO!</p>
+

Контекст сообщения предоставляет доступ к функции named. Необходимо указать ключ, указываемым для $t или t, который разрешится требуемым значением.

# Формат списков

Использование формата списков аналогично именованному формату, описанному выше.

vue-i18n поддерживает формат списков для строковых сообщений. vue-i18n интерполирует значения с помощью $t или t и выводит их.

Тоже самое можно сделать и с функцией для сообщения, используя контекст сообщения:

Пример приветствия:

const messages = {
+  en: {
+    greeting: (ctx) => `hello, ${ctx.list(0)}!`
+  },
+  ru: {
+    greeting: (ctx) => `привет, ${ctx.list(0)}!`
+  }
+}
+

Шаблон:

<p>{{ $t('greeting', ['DIO']) }}</p>
+

Результат:

<p>привет, DIO!</p>
+

Контекст сообщения предоставляет доступ к функции list. Необходимо указать ключ, указываемым для $t или t, который разрешится требуемым значением.

# Ограничение

В функции для сообщения следующие возможности, которые доступны в строковом варианте, не будут доступны через контекст сообщения:

  • Связанные сообщения локализации
  • Плюрализация

+ ← + + Запасная локализация + + → +

+ + + diff --git a/ru/guide/number.html b/ru/guide/number.html new file mode 100644 index 000000000..c81e9eb6c --- /dev/null +++ b/ru/guide/number.html @@ -0,0 +1,166 @@ + + + + + + Локализация чисел | Vue I18n + + + + + + + + + +
Vue I18n

# Локализация чисел

Поддержка с версии

🆕 7.0+

Можно выполнять локализацию чисел по соответствующему формату.

Пример формата для чисел:

const numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD'
+    }
+  },
+  'ru-RU': {
+    currency: {
+      style: 'currency',
+      currency: 'RUB',
+      currencyDisplay: 'symbol'
+    }
+  }
+}
+

Как указано выше, можно задать числовые форматы (например, currency для валюты) используя опции ECMA-402 Intl.NumberFormat (opens new window).

После этого, для возможности использования данного формата в сообщениях локализации, необходимо задать опцию numberFormats конструктора VueI18n:

const i18n = new VueI18n({
+  numberFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

Шаблон:

<div id="app">
+  <p>{{ $n(100, 'currency') }}</p>
+  <p>{{ $n(100, 'currency', 'ru-RU') }}</p>
+</div>
+

Результат:

<div id="app">
+  <p>$100.00</p>
+  <p>100,00 ₽</p>
+</div>
+

# Пользовательское форматирование

Поддержка с версии

🆕 8.10+

Метод $n возвращает результат в виде строки с полностью отформатированным числом, которую можно использовать лишь целиком. В случаях, когда нужно стилизовать некоторую часть отформатированного числа (например, дробную часть), $n будет недостаточно. В таких случаях необходимо использовать функциональный компонент <i18n-n>.

При минимальном наборе свойств <i18n-n> генерирует тот же результат, что и $n обернутый в сконфигурированный DOM-элемент.

Шаблон:

<div id="app">
+  <i18n-n :value="100"></i18n-n>
+  <i18n-n :value="100" format="currency"></i18n-n>
+  <i18n-n :value="100" format="currency" locale="ru-RU"></i18n-n>
+</div>
+

Результат:

<div id="app">
+  <span>100</span>
+  <span>$100.00</span>
+  <span>100,00 ₽</span>
+</div>
+

Но по-настоящему оценить удобство компонента можно лишь тогда, когда он применяется с использованием слотов с ограниченной областью видимости (opens new window).

Допустим, есть требование выводить целую часть числа полужирным шрифтом. Реализовать это можно с помощью слота integer:

<i18n-n :value="100" format="currency">
+  <span v-slot:integer="slotProps" styles="font-weight: bold">
+    {{ slotProps.integer }}
+  </span>
+</i18n-n>
+

Результат:

<span>$<span styles="font-weight: bold">100</span>.00</span>
+

Можно использовать несколько слотов одновременно:

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
+  <span v-slot:currency="slotProps" styles="color: green">
+    {{ slotProps.currency }}
+  </span>
+  <span v-slot:integer="slotProps" styles="font-weight: bold">
+    {{ slotProps.integer }}
+  </span>
+  <span v-slot:group="slotProps" styles="font-weight: bold">
+    {{ slotProps.group }}
+  </span>
+  <span v-slot:fraction="slotProps" styles="font-size: small">
+    {{ slotProps.fraction }}
+  </span>
+</i18n-n>
+

(Полученный HTML ниже отформатирован для лучшей читаемости)

<span>
+  <span styles="color: green">€</span>
+  <span styles="font-weight: bold">1</span>
+  <span styles="font-weight: bold">,</span>
+  <span styles="font-weight: bold">234</span>
+  <span styles="font-size: small">00</span>
+</span>
+

Определить тип корневого элемента можно указать с помощью входного параметра tag. Если входной параметр не указан, то по умолчанию будет 'span'. Также можно указать значение false, чтобы вставлять дочерние элементы без создания и оборачивания в корневой.

Полный список поддерживаемых слотов, а также другие свойства <i18n-n> можно найти на странице справочника API.

+ ← + + Синтаксис сообщений локализации + + → +

+ + + diff --git a/ru/guide/pluralization.html b/ru/guide/pluralization.html new file mode 100644 index 000000000..690f7c83b --- /dev/null +++ b/ru/guide/pluralization.html @@ -0,0 +1,203 @@ + + + + + + Плюрализация | Vue I18n + + + + + + + + + +
Vue I18n

# Плюрализация

Для переводимых сообщений есть возможность использовать плюрализацию. Для этого необходимо указывать строки переводов для различных случаев через разделитель |.

В шаблоне в таких случаях необходимо использовать метод $tc() вместо $t().

Сообщения локализации:

const messages = {
+  en: {
+    car: 'car | cars',
+    apple: 'no apples | one apple | {count} apples'
+  },
+  ru: {
+    car: 'машина | машины',
+    apple: 'нет яблок | одно яблоко | {count} яблок'
+  }
+}
+

Шаблон:

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+
+<p>{{ $tc('apple', 0) }}</p>
+<p>{{ $tc('apple', 1) }}</p>
+<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+

Результат:

<p>машина</p>
+<p>машины</p>
+
+<p>нет яблок</p>
+<p>одно яблоко</p>
+<p>10 яблок</p>
+

# Аргумент для доступа к числу

Нет необходимости явно передавать число для плюрализации. В сообщениях локализации число доступно через именованные аргументы {count} и/или {n}. При желании их можно переопределить.

Сообщения локализации:

const messages = {
+  en: {
+    apple: 'no apples | one apple | {count} apples',
+    banana: 'no bananas | {n} banana | {n} bananas'
+  },
+  ru: {
+    apple: 'нет яблок | одно яблоко | {count} яблок',
+    banana: 'нет бананов | {n} банан | {n} бананов'
+  }
+}
+

Шаблон:

<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+<p>{{ $tc('apple', 10) }}</p>
+
+<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
+<p>{{ $tc('banana', 1) }}</p>
+<p>{{ $tc('banana', 100, { n: 'слишком много' }) }}</p>
+

Результат:

<p>10 яблок</p>
+<p>10 яблок</p>
+
+<p>1 банан</p>
+<p>1 банан</p>
+<p>слишком много бананов</p>
+

# Пользовательская плюрализация

Стандартная реализация плюрализации не подходит для некоторых языков (к примеру, в славянских языках другие правила множественности).

Можно предоставить собственную реализацию, передав pluralizationRules в конструктор VueI18n.

Упрощенный пример для славянских языков (Русский, Украинский и другие):

new VueI18n({
+  // Ключ - язык, для которого будет применяться правило, в этом примере - `'ru'`
+  // Value - функция плюрализации
+  pluralizationRules: {
+    /**
+     * @param choice {number} индекс выбора, переданный в $tc: `$tc('path.to.rule', choiceIndex)`
+     * @param choicesLength {number} общее количество доступных вариантов
+     * @returns финальный индекс для выбора соответственного варианта слова
+     */
+    'ru': function(choice, choicesLength) {
+      // this === VueI18n экземпляра, так что свойство locale также существует здесь
+
+      if (choice === 0) {
+        return 0;
+      }
+
+      const teen = choice > 10 && choice < 20;
+      const endsWithOne = choice % 10 === 1;
+
+      if (choicesLength < 4) {
+        return (!teen && endsWithOne) ? 1 : 2;
+      }
+      if (!teen && endsWithOne) {
+        return 1;
+      }
+      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+        return 2;
+      }
+
+      return (choicesLength < 4) ? 2 : 3;
+    }
+  }
+})
+

Такая реализация позволит использовать:

const messages = {
+  ru: {
+    car: '0 машин | {n} машина | {n} машины | {n} машин',
+    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
+  }
+}
+

Для такого формата вариантов 0 вещей | количество вещей заканчивается на 1 | количество вещей заканчивается на 2-4 | количество вещей заканчивается на 5-9, 0 и числа от 11 до 19. +P.S. Славянское множественное число - сложное явление, подробнее о нем можно прочитать здесь (opens new window).

В шаблоне, по-прежнему, необходимо использовать $tc() вместо $t():

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+<p>{{ $tc('car', 4) }}</p>
+<p>{{ $tc('car', 12) }}</p>
+<p>{{ $tc('car', 21) }}</p>
+
+<p>{{ $tc('banana', 0) }}</p>
+<p>{{ $tc('banana', 4) }}</p>
+<p>{{ $tc('banana', 11) }}</p>
+<p>{{ $tc('banana', 31) }}</p>
+

Результат:

<p>1 машина</p>
+<p>2 машины</p>
+<p>4 машины</p>
+<p>12 машин</p>
+<p>21 машина</p>
+
+<p>нет бананов</p>
+<p>4 банана</p>
+<p>11 бананов</p>
+<p>31 банан</p>
+

# Плюрализация по умолчанию

Если для используемой локали не предоставить правило плюрализации, по умолчанию будет использовано правило для английского языка

+ ← + + Локализация дат + + → +

+ + + diff --git a/ru/guide/sfc.html b/ru/guide/sfc.html new file mode 100644 index 000000000..6b950b45f --- /dev/null +++ b/ru/guide/sfc.html @@ -0,0 +1,387 @@ + + + + + + Однофайловые компоненты | Vue I18n + + + + + + + + + +
Vue I18n

# Однофайловые компоненты

# Базовое использование

В компоненте Vue или приложении Vue с использованием однофайловых компонентов, можно управлять сообщениями локализации с помощью пользовательского блока i18n.

Код компонента из примера использования с однофайловыми компонентами (opens new window):

<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ru": {
+    "hello": "Привет мир!"
+  }
+}
+</i18n>
+
+<template>
+  <div id="app">
+    <label for="locale">Язык</label>
+    <select v-model="locale">
+      <option>en</option>
+      <option>ru</option>
+    </select>
+    <p>Сообщение: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () {
+    this.$i18n.locale = 'ru';
+    return { locale: 'ru' }
+  },
+  watch: {
+    locale (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>
+

# Установка vue-i18n-loader

Требуется установить vue-loader и vue-i18n-loader чтобы использовать пользовательские блоки <i18n>. Скорее всего vue-loader (opens new window) уже используется в проекте, если уже работаете с однофайловыми компонентами, но необходимо дополнительно установить vue-i18n-loader (opens new window):

npm i --save-dev @kazupon/vue-i18n-loader
+

# Webpack

Для Webpack требуется следующая конфигурация:

Для vue-loader v15 или более поздних версий:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      },
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        loader: '@kazupon/vue-i18n-loader'
+      }
+      // ...
+    ]
+  }
+  // ...
+}
+

Для vue-loader v14:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // необходимо указать ключ `i18n` для загрузчика `vue-i18n-loader`
+            // (https://github.com/kazupon/vue-i18n-loader)
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
+      }
+      // ...
+    ]
+  }
+  // ...
+}
+

# Vue CLI 3.0

Vue CLI 3.0 (opens new window) скрывает конфигурацию Webpack, поэтому для добавления поддержки тегов <i18n> в однофайловых компонентах необходимо изменить существующую конфигурацию.

Для этого нужно создать файл vue.config.js в корне проекта и добавить в него следующее:

Для vue-loader v15 или более поздних версий:

module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('i18n')
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use('i18n')
+        .loader('@kazupon/vue-i18n-loader')
+        .end()
+  }
+}
+

Для vue-loader v14:

const merge = require('deepmerge')
+
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options =>
+        merge(options, {
+          loaders: {
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        })
+      )
+  }
+}
+

Не забудьте установить deepmerge (opens new window)! (npm i deepmerge -D или yarn add deepmerge -D)

Подробнее о возможностях изменения существующей конфигурации Webpack можно изучить здесь (opens new window).

# Laravel-Mix

Для Laravel-mix 4 с vue-loader v15 или более поздней версии:

// Расширяем Mix с помощью метода "i18n", который загрузит vue-i18n-loader
+mix.extend( 'i18n', new class {
+        webpackRules() {
+            return [
+                {
+                    resourceQuery: /blockType=i18n/,
+                    type:          'javascript/auto',
+                    loader:        '@kazupon/vue-i18n-loader',
+                },
+            ];
+        }
+    }(),
+);
+
+// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)
+mix.i18n()
+   .js( 'resources/js/App.js', 'public/js/app.js' )
+   ...
+

Для Laravel-mix 2 с vue-loader v14:

В Laravel-mix, начиная с версии V2.1 (opens new window), можно добавлять пользовательские правила с помощью mix.extend(). Laravel-mix уже имеет собственные правила для обработки .vue файлов. Чтобы добавить vue-i18n-loader, нужно добавить в webpack.mix.js следующее:

// Код ниже внедрит загрузчик i18n (@kazupon/vue-i18n-loader) в качестве загрузчика .vue файлов.
+mix.extend( 'i18n', function( webpackConfig, ...args ) {
+    webpackConfig.module.rules.forEach( ( module ) => {
+        // Поиск компонента "vue-loader", который обрабатывает .vue файлы.
+        if( module.loader !== 'vue-loader' ) {
+            return;
+        }
+
+        // В этом модуле добавляем vue-i18n-loader для тега i18n.
+        module.options.loaders.i18n = '@kazupon/vue-i18n-loader';
+    } );
+} );
+
+// Убедитесь что вызвали .i18n() (для загрузки загрузчика) перед .js(..., ...)
+mix.i18n()
+   .js( 'resources/assets/js/App.js', 'public/js/app.js' )
+   ...
+

# Загрузка YAML

Пользовательские блоки i18n можно указывать в формате JSON или YAML (используя функцию предварительного загрузчика vue-loader).

Пользовательский блок i18n в формате YAML:

<i18n>
+  en:
+    hello: "hello world!"
+  ru:
+    hello: "привет мир!"
+</i18n>
+

Конфигурация Webpack:

Для vue-loader v15 или более поздних версий:

// Vue CLI 3.0
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('i18n')
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use('i18n')
+        .loader('@kazupon/vue-i18n-loader')
+        .end()
+      .use('yaml')
+        .loader('yaml-loader')
+        .end()
+  }
+}
+

Для vue-loader v14:

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preLoaders: {
+            i18n: 'yaml-loader'
+          },
+          loaders: {
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
+      }
+      // ...
+    ]
+  }
+  // ...
+}
+

# Несколько пользовательских блоков

Можно использовать сообщения локализации из нескольких пользовательских блоков i18n.

<i18n src="./common/locales.json"></i18n>
+<i18n>
+  {
+    "en": {
+      "hello": "hello world!"
+    },
+    "ru": {
+      "hello": "Привет мир!"
+    }
+  }
+</i18n>
+

В примере выше, первый пользовательский блок загружает общие сообщения локализации с помощью атрибута src, второй пользовательский блок загружает сообщения локализации, которые определены только в этом однофайловом компоненте. Все они будут объединены в качестве сообщений локализации компонента.

Несколько пользовательских блоков полезны, когда использовать их в качестве модулей.

# Локальные стили

При использовании vue-i18n с локальными стилями (style scoped) необходимо помнить и использовать глубокий селектор (opens new window) для стилизации элемента внутри строки перевода. Например:

Когда перевод содержит только текст (работает без глубокого селектора)

<i18n>
+  {
+    "en": {
+      "hello": "hello world!"
+    },
+    "ru": {
+      "hello": "Привет мир!"
+    }
+  }
+</i18n>
+
+<template>
+  <div class="parent">
+    <p>Сообщение: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<!-- Будет работать -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+</style>
+

Когда перевод содержит HTML-элемент (необходимо использовать глубокий селектор)

<i18n>
+  {
+    "en": {
+      "hello": "hello<span>world!</span>"
+    },
+    "ru": {
+      "hello": "привет <span>мир!</span>"
+    }
+  }
+</i18n>
+
+<template>
+  <div class="parent">
+    <p v-html="$t('hello')"></p>
+  </div>
+</template>
+
+<!-- НЕ БУДЕТ РАБОТАТЬ! -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p span {
+    color: red;
+  }
+</style>
+
+<!-- Будет работать >>> -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p >>> span {
+    color: red;
+  }
+</style>
+
+<!-- Будет работать /deep/ -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p /deep/ span {
+    color: red;
+  }
+</style>
+
+<!-- Будет работать ::v-deep -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  ::v-deep .parent p span {
+    color: red;
+  }
+</style>
+

# Пользовательские блоки в функциональном компоненте

Если в шаблоне однофайловых компонентов используется функциональный компонент и определены пользовательские блоки i18n, то обратите внимание что невозможно локализовать с помощью сообщений локализации.

Например, следующий код не может использовать сообщения локализации из блока i18n.

<i18n>
+  {
+    "en": {
+      "hello": "hello world"
+    },
+    "ru": {
+      "hello": "привет мир"
+    }
+  }
+</i18n>
+
+<template functional>
+  <!-- Сообщение локализации 'hello' из родительского экземпляра -->
+  <p>{{ parent.$t('hello') }}</p>
+</template>
+

+ ← + + Горячая перезагрузка переводов + + → +

+ + + diff --git a/ru/guide/tooling.html b/ru/guide/tooling.html new file mode 100644 index 000000000..bea6fe71f --- /dev/null +++ b/ru/guide/tooling.html @@ -0,0 +1,95 @@ + + + + + + Инструментарий | Vue I18n + + + + + + + + + +
Vue I18n

# Инструментарий

Для поддержки i18n приложений Vue некоторые инструменты предоставляются официально.

Также есть инструменты от сторонних разработчиков, которые интегрируются в Vue I18n.

# Официальный инструментарий

# Плагин для Vue CLI

vue-cli-plugin-i18n (opens new window) — официальный плагин для Vue CLI.

С помощью этого плагина можно настроить среду i18n для приложения Vue и поддерживать среду разработки i18n.

# Модуль для Nuxt

nuxt-i18n (opens new window) — соответствующий модуль для Nuxt.js.

# Загрузчик для Webpack

vue-i18n-loader (opens new window) — официальный загрузчик для webpack.

С помощью этого загрузчика можно использовать пользовательские блоки i18n в однофайловых компонентах.

Подробнее о пользовательских блоках i18n можно изучить в разделе Однофайловых компонентов

# Плагин для ESLint

eslint-plugin-vue-i18n (opens new window) — ESLint-плагин для Vue I18n.

Позволяет легко интегрировать функции проверки локализацией в ваше приложение Vue.js.

# Расширения

vue-i18n-extensions (opens new window) — предоставляет некоторые расширения дляVue I18n.

Эти расширения позволяет использовать в рендеринге на стороне сервера (SSR) и улучшить производительность i18n.

# Сторонние разработки

# BabelEdit

BabelEdit (opens new window) — редактор переводов для веб-приложений.

BabelEdit может переводить файлы json, а также умеет работать с пользовательскими блоками i18n однофайловых компонентов.

Подробнее про BabelEdit можно узнать на странице введения (opens new window).

# i18n Ally

i18n Ally (opens new window) — расширение i18n для VSCode.

i18n Ally предоставляет потрясающий DX для разработки с использованием i18n.

Подробнее о расширении i18n Ally можно изучить в README (opens new window).

# i18nPlugin (платформа intellij)

i18nPlugin (opens new window) — плагин Intellij idea для поддержки i18next (Jetbrains plugin page (opens new window)).

Плагин для i18n typescript/javascript/PHP. Поддерживает vue-i18n. Для включения поддержки vue-i18n в настройках -> Tools -> i18n Plugin configuration выберите "Vue-i18n". Необходимо установить каталоги с файлами локализаций (по умолчанию locales).

# vue-i18n-extract

vue-i18n-extract (opens new window) выполняет статический анализ проекта Vue.js на основе vue-i18n и сообщает следующую информацию:

  • список всех неиспользуемых ключей vue-i18n (записи, найденные в файлах перевода, но не использованные в проекте)
  • список всех пропущенных ключей (записи, найденные в проекте, но отсутствующие в файлах перевода)

Имеется возможность отобразить результат в консоли или записать его в файл json.

Пропущенные ключи также могут быть автоматически добавлены в заданные файлы переводов.

+ ← +

+ + + diff --git a/ru/index.html b/ru/index.html new file mode 100644 index 000000000..e01828ef8 --- /dev/null +++ b/ru/index.html @@ -0,0 +1,101 @@ + + + + + + Vue I18n + + + + + + + + + +
Vue I18n
hero

+ Vue I18n +

+ Vue I18n — плагин для интернационализации во Vue.js +

+ Введение → +

🥇 Золотые спонсоры

Nuxt.js

🥈 Серебряные спонсоры

Редактор переводов BabelEdit для приложений (веб-приложений)

🥉 Бронзовые спонсоры

zenarchitects sendcloud

Простой

Позволяет легко добавить интернационализацию в приложение с помощью простого API

Функциональный

В дополнение к переводам, поддерживает плюрализацию, локализацию для чисел, дат ... и т.д.

Ориентированный на компоненты

Можно управлять сообщениями локализации в однофайловых компонентах

+ MIT Licensed | Copyright © 2020 kazuya kawaguchi +
+ + + diff --git a/ru/installation.html b/ru/installation.html new file mode 100644 index 000000000..82066ff05 --- /dev/null +++ b/ru/installation.html @@ -0,0 +1,114 @@ + + + + + + Установка | Vue I18n + + + + + + + + + +
Vue I18n

# Установка

# Примечание совместимости

  • Vue.js версии 2.0.0+

# Загрузка файла / CDN

https://unpkg.com/vue-i18n@8 (opens new window)

Сервис unpkg.com (opens new window) предоставляет CDN-ссылки на основе NPM-пакетов. Ссылка выше будет всегда указывать на последнюю версию на NPM. Можно использовать конкретную версию или тег с помощью URL следующего вида https://unpkg.com/vue-i18n@8.17.5/dist/vue-i18n.js (opens new window)

При подключении vue-i18n после Vue плагин установит себя автоматически:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n@8"></script>
+

# NPM

npm install vue-i18n
+

# Yarn

yarn add vue-i18n
+

При использовании системы модулей нужно явно устанавливать vue-i18n +через Vue.use():

import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+

Подобного не требуется делать при подключении через глобальный тег <script>.

# Vue CLI 3.x

vue add i18n
+

Предварительно требуется установить Vue CLI 3.x, его можно установить следующей командой:

npm install @vue/cli -g
+

# Dev-сборка

При необходимости использовать последнюю dev-сборку нужно склонировать репозиторий с GitHub и выполнить сборку vue-i18n самостоятельно.

git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
+cd node_modules/vue-i18n
+npm install # или `yarn`
+npm run build  # или `yarn run build`
+

# Отличия различных сборок

Внутри каталога dist / NPM-пакета (opens new window) можно обнаружить несколько различных сборок VueI18n. Вот следующие отличия между ними:

  • UMD: vue-i18n.js
  • CommonJS: vue-i18n.common.js
  • ES Module для систем сборки: vue-i18n.esm.js
  • ES Module для браузеров: vue-i18n.esm.browser.js

# Термины

  • UMD (opens new window): UMD-сборки можно использовать непосредственно в браузере через тег <script>. Файл по умолчанию с Unpkg CDN https://unpkg.com/vue-i18n (opens new window) указывает на UMD-сборку (vue-i18n.js).

  • CommonJS (opens new window): CommonJS сборки предназначены для использования со старыми системами сборки, такими как browserify (opens new window) или webpack 1 (opens new window). Файлом по умолчанию для этих систем сборки (pkg.main) будет сборка CommonJS (vue-i18n.common.js).

  • ES Module (opens new window): VueI18n, начиная с версии 8.11, предоставляет две сборки ES-модулей (ESM):

    • ESM для систем сборки: предназначен для использования с современными системами сборки, такими как webpack 2 (opens new window) или Rollup (opens new window). Формат ESM разработан для возможности статического анализа, чтобы системы сборки могли применять "tree-shaking" и удалять неиспользуемый код из финального приложения. Файлом по умолчанию для этих систем сборки (pkg.module) будет ES-сборка (vue-i18n.esm.js).
    • ESM для браузеров (только для 8.11+, vue-i18n.esm.browser.js): предназначен для импорта напрямую в современных браузерах через тег <script type="module">.

+ ← + + Формат сообщений локализации + + → +

+ + + diff --git a/ru/introduction.html b/ru/introduction.html new file mode 100644 index 000000000..e9b2ee1f6 --- /dev/null +++ b/ru/introduction.html @@ -0,0 +1,95 @@ + + + + + + Введение | Vue I18n + + + + + + + + + +
Vue I18n

# Введение

Предупреждение

⚠️ Документация для Vue I18n v6.0 или более поздних версий. Если используете и ищете документацию для версии v5.x, обратитесь к разделу устаревшей версии.

Vue I18n — плагин для интернационализации во Vue.js. Он легко интегрирует дополнительные возможности по локализации приложения Vue.js.

Изучение лучше начинать с раздела Начало работы

# Спонсоры

# 🥇 Золото

Nuxt.js

# 🥈 Серебряные

Редактор переводов BabelEdit для приложений (веб-приложений)

# 🥉 Бронза

zenarchitects sendcloud

# Поддержите на Patreon

Ваша компания для создания потрясающих приложений использует vue-i18n или vue-cli-plugin-i18n? Присоединяйтесь к другим патронам или становитесь спонсором, чтобы увидеть свой логотип в документации! Поддержка на Patreon позволяет автору меньше работать и больше заниматься развитием свободным опенсорсом, таким как vue-i18n! Спасибо!

+ Начало работы + + → +

+ + + diff --git a/ru/started.html b/ru/started.html new file mode 100644 index 000000000..d579199e9 --- /dev/null +++ b/ru/started.html @@ -0,0 +1,140 @@ + + + + + + Начало работы | Vue I18n + + + + + + + + + +
Vue I18n

# Начало работы

ПРИМЕЧАНИЕ

В примерах кода этого руководства используется ES2015 (opens new window).

# HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n@8"></script>
+
+<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+</div>
+

# JavaScript

// При использовании модульной системы (например, через vue-cli)
+// нужно импортировать Vue и VueI18n и вызвать Vue.use(VueI18n).
+//
+// import Vue from 'vue'
+// import VueI18n from 'vue-i18n'
+//
+// Vue.use(VueI18n)
+
+// Готовые переводы сообщений локализаций
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world'
+    }
+  },
+  ru: {
+    message: {
+      hello: 'Привет мир'
+    }
+  }
+}
+
+// Создание экземпляра VueI18n с настройками
+const i18n = new VueI18n({
+  locale: 'ru', // установка локализации по умолчанию
+  messages // установка сообщений локализаций
+})
+
+// Создание экземпляра Vue с опцией `i18n`
+new Vue({ i18n }).$mount('#app')
+
+// Теперь можно запускать приложение!
+

Результат будет таким:

<div id="#app">
+  <p>Привет мир</p>
+</div>
+

+ ← + + Установка + + → +

+ + + diff --git a/started.html b/started.html new file mode 100644 index 000000000..7981849a4 --- /dev/null +++ b/started.html @@ -0,0 +1,148 @@ + + + + + + Getting started | Vue I18n + + + + + + + + + +
Vue I18n

# Getting started

NOTE

We will be using ES2015 (opens new window) in the +code samples in the guide.

# HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n@8"></script>
+
+<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+</div>
+

# JavaScript

// If using a module system (e.g. via vue-cli), import Vue and VueI18n and then call Vue.use(VueI18n).
+// import Vue from 'vue'
+// import VueI18n from 'vue-i18n'
+//
+// Vue.use(VueI18n)
+
+// Ready translated locale messages
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world'
+    }
+  },
+  ja: {
+    message: {
+      hello: 'こんにちは、世界'
+    }
+  }
+}
+
+// Create VueI18n instance with options
+const i18n = new VueI18n({
+  locale: 'ja', // set locale
+  messages, // set locale messages
+})
+
+
+// Create a Vue instance with `i18n` option
+new Vue({ i18n }).$mount('#app')
+
+// Now the app has started!
+

Output the following:

<div id="#app">
+  <p>こんにちは、世界</p>
+</div>
+

+ ← + + Installation + + → +

+ + + diff --git a/vue-i18n-logo.png b/vue-i18n-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..4fdeb1ffc811628d2c78e27931e706e07737fa53 GIT binary patch literal 15042 zcmZv@1yp6ht|)kLm&TogyF=qn?(Xh1u8q69!$BK&Z`|FraTxA>f9B7hHG8ev zWl1W@mP%D6k&5yXNbq>@0000WVuE06z5ez4GA_i@;C>8}jZTv$#R0H}{ccr%3h zssoKBmE`~cFG>I)AOrw-`DzL{1^`@{0f18j0DvbQ0Kj(0>QLhQ>VR{Q)N%#@kO%&g zz*6Xt@c{s^aZ6QA7fm@?9%Fl3Mne;OBU45XTZb=b0D#Yf=c{OI>S74=u(h#s=JDVs z{VxR1SNT89Or*g7g1A`olWNK-0!8heOo1GX?2OE$0`Nc}kk84)j7M2a{C}Z;)%Zy* zTwEM@n3&w%-5K54810?RnOL~FxtW+*nOIpFz91N!J?&f!Js9kq$^M7P|4m2C)Y;g{ z(!s^j-VXR5x`syft}gtfr2iS{|GEB$PZvwG|2>kO^Zyd-OF*Xo^f0k7GBf@Ep?wMa z|M2&JV0joi{14K9rTU-2`2ItRN5RR`^o!m9FeSjk_h0h=N8A5qj_->)kEoNWp^Lqf zs=d99z<)GgX=m+hZ0KP6A3g9f{eL0;7cw8yf5iQNiT^*k{cr1+as}YOF#qodB>)e( za6AqGa2ZO839EX5UHHNnq%5v{I&1vfBq0gudL%N8ihz$*ulDv)vu@T8U;WouJuthp zRMEWn)0R#Rweoli4jj1!2o%LY1rNa$8QB~q{M@<%J%(gDpeJUc+F2m4zixuAGN$jm zbMLZ__>KsYJm4~FWbgPgj#x8fYZ90?O{0$!xq1l**cZu5ZWv3QBgQFccAY{ar6%+e z-8WAyFdQP$LG4$tz=LKw!fy@Mi%qhf;|Hw#q;cu2av4)$a%>zR7FW}f zlt>T%q3}4f^dS1yb}>d4tqENKwc{$`uG22E;sP!s5I&%ll8roQk(BYHkvA?nUBGE+ z`KT6jzw=;IPW9bo{0!{)H)m}5qv3b1Db+4aRG_fPFDeV-{Xuf(^W6b1cQbxzpUL4pKH5<4`e0 zz+8dlTzCdQc(4sZ6-glaxv3iRqFTm)Q=m#^qott+1-RCG>Encl_KmMKNmt++|U!tYqxi$IVbB0FUWjzmtJ}$W8<0=_2@iY4gx+JgEb)(oEI6LH-&TF0c&K9Z#=g{k=>!Y;=U?12-)EI{wGl)# znOuxqTBar74U$n7OP0_~5W*Fm+&cO9$ehK}7QlKJDW-m=`*E$FB4%S)M1doR|Bxa{ zb8aatG7DHCu*r}nBMCcaG%njzJ)JWDe832p6V1#UHIjmZMaqaOhn@HMnT|B>R2q2Q zLj*LZ3W(HH`e%~l2}*I+o?7KWxLZkTB^N)kk&r2Kz1(eih=)CPRIo&tznp5pYhUUJ1CsvO@Ck9Ad>^POLD3SluJ%DE) ztH6kXhRPTWvCixQtG0a){hb5q9o9k~^{)^==k1FdA+7(1k`iF3WORWBo&xS;L1ww& z1!(X4!&u=Zk-tzygQ`(3D!T)aB?!UCBz7@%RSv)5{nK6y*iw-sfir@E2ok;hYe)O- zHOC2VA|fFme>PrxTMj><%oQ-V9hjriE}&qgfi3I;&c#wjklS}!jTg}366RJCP$1YX z>0O3df>YNqM5A_f6j@lN9z-=5O@r~ceYp5rug@J&A9UP8?MeGLhrJg)?p)IlTq0cl z+CsYNQ*B=FSAQ=vI9!*=#i@v_SR1*;PoqkT1bcx=NEEsFHg$Wt_|@h?Bk61KoPShW z=8<2Y$h%SIb-~{%CUuYsKa`SC&I_s!1S)+0Jq*SnYq^$MUI&BPce*mAD^XLPq%322 zk9*`2*v8##LOyaPUnB+vsiJ~2Cy}f2&7agYv?IepCi8Ga`kpi0C+rcuY_~OL_#Uu& zc!kHQ8pQ_y5!@`^M&j^aFruz1Vrv$647Fb7@VPX3LXe_B5A!WGl7Ct7tc#`RKcRuG zm!ihW??Sj37V7{%p9?|XiW_dpBAZMi9)Q$nTG7XmOJB?wJ0VZq2LYro{9;g=2n5;e zOut*R4+b<@a$}YHxkTlR>vP!Zoty`KvM44j>gvKavmFPW0@mVhFUSRdkESF+$4m%( zdiOvCOpSgV;_RbmJN>(H3DI8B*KZS8dH8G+%ZQn}cWf5zk0gWpDW1b-^7 zdd5nNt5iTPS83LRKk}&dKr{aSQJj*fp~O&H7b8`XkCL3{Yx-1u^M~#M1PiiH*KUB+ zq=1?SXE78;!y?GLEvjC)3@~w1#APQ>f7zMV-zG$gWxSr#QYA|r0kCUvc6egi=R+DD zDt6Oe?9z&!)O~NQ1060_{4)N=W!9(_1aT8alANkG)*5=C9QiF`0DAnM$dR={BT8&| zSlURZiF^+a^BX0W{Ir8+>AeCv&od~RqevY48XO~Qb zoSjS2s@^M&7)evDOwcbO`+TTZMjB`gIhkqWekXze79uO9aG#cibFg+kJqD063{8it zTP?y$+^G~TEqb!ZxF=2ra+)G083udFJld5fZgTuEDkvPlLIny3f}s(FL`pERR|T%w ztGPBWEGwDu{C*XWqHdq4cJ?SE^4H-c z1p|t?|FHjHXJiJSSnwcQD=X*J0|a?j%zo)k~8i1PtrG$rKjgx{v`P^QIS6jRgzWjn7Yq9?ZL zA&4!)zcmfj-rq)OSa>HBJN`igTd8WM`|4Bo|K$6)-M{4vkz{E5^Y)A{6S)&;gS?Zr1MWG@jgeU zbbtlvW2>pAzLbf)ARS#bGW^z~v1*OjgtZ<{4e>&6I5=cwirz=<6H>?s=t%R~-}$Bo zDaty^L5z&Z((J7~`5x|LAHm_|q@*Hf`37u^!O$rmla+t?;f+^A+B7qGy~AP%1T@X$ z^vL`_9=#jB(`m4JQA#37*v!Pe!H8A)jt3XNPR_GwC&t`S{#%zmC^LcQ?I~ntpy&?* zC#S0wa~iYS57pnId|dzF$Av667S#}kO2wBe>#_$BmC!KIX>_0jiqR{s<@1;2)oJE@ z9)WW^9mmJu2o%M($22<3uCabTJen?V`zf}Ook^NWQl!lVTFuy^)roh9nHUX3Tr=bH zl=aBs%<78}rrZwA+0IdbA?tyC=QtOv1r{(Au2U@a85+q2HD=s?v+8zW-ghVD=9xl~ z217_ELd={v)g3mq@Jgijy(DQrc&SXe-*$FW8&iaxNs@X+AxhQwysIJLPBoUqCWR;j z8{&4nP3C)8AHS`9^^Y(Y_jyQH5}LlQL)E&EqdMpd|0G}Q*}MQ_ETk*g_pBIm+1#K-CS zS805EhhH-8+~ccA8A}KUk&n9(VYsn?xXEcn zrJu6Z^${uA8hsO!m@<8xL>v%-Wq#rsc|J9j5KiPR|L<~I9mtY?m1w8iDcO^=VX_pH zJ6h}a8sl?6`rAv0G~y{TGAce3>{cP?Q&1`bK5ep&B2>g)*+8xNR8yZ2SqP7>iM)2p zN6hcDM`JWt@P+s!Bd283gjGr=UIpq$!_!9Ges}l>wfp+L_emN71E)T(hAZ2G8Z2{c z)TWPn2H(xoE33CAXM(8OP`o;sgsT^H1bL;ZR}saCL}ufDs6RuHVZGwPPTsOao5iVE z#^Y<|L8xFCRodofvdPB|_X_BNuDqt)^-MP%TI3z}12<`S+&S(;)$IO)*1ACf-c9}_ z9(ej?TyEz(Uf&T8A3P7+rFdU~w04aOFpZzqX9OYt9P7qI`lni7d5g>E(4ygHk-Bd( zYalhd^0E3N;P_1EVvVNbTGkP%IQ3C0mx5b-3t2nOk)oxwHW{0#xjiZsOhrlcEh!=d zlQB^IY=28UnX~uu$4$bcKuEJsWO3)C|J1oI*+0O}v&#}-5gKR+N5KUuOuk0ya8|@s zjZdk}lM>3Ix#9qB2&uSilKC=`$MuOi^z1rs@ZiGVLnn;4@8C5fwsc?W*YD@IMrFoZ zNA7P_D5BqZg+!PDezRj1>y`Y8mR6E5@ELPVE0L!-Cons z+=i!ZrfzJREk=L+D~Q{l8xU8T1Qo>Zr4yA#zd3C&9gc&x-ha4VZbqMjkuD^;=H1lT zUlH9NGhL;Ohr6UL0+gsv`&fCTkC_1l0NDOAtBoA=+vRtSaRyEw7<(U}OVa!{4J~5= z_UAis`%4YgAiVz?jc;NxGcCmHa7>+&m^o<4$8o`C*9zWKlB=(ZgSOQ7qZN}am`LKS| z(`qu&f#N{#MNgvL7=}p)VUUzIz6}zCn|?cp@i|&Z6hYY zYUs=>wLkMNT?}yu-xHLlI`k-;NW6K&Z#r>z-g28yFZg^ecraVKl|qAiVl|eB7G({f zpZ7+=9;Hx`kolX;SixoMobU9StF|Tiw++@s*X`k4mbKy6!&*7Xk5P%&`JKWa4QB6@ z#WCopRrX?N;cL8xu&u4FJH6ux?Hi+h@7!!7lgR0Kl^#uJ7H^LB zf{4`9Qlq#tB>9*OW*Y0gw^(s6P(;q5Pd!(mNQ9xPS6f3KUo7;Nz9QOCnD;nOyAk$_M8?;~cw%-AcE6ILNgT-v8Qs2y;22%+e zwu3pG7OPcQ)C_S@;dscZk;uL`PUNuYwc9ca2uq;O)-5w}h(i|*7QPms#rA6w-B&AE;?qYq?UA%PKxX6Wu)a0mKMa0}jbury8 zbuMx-sd@nZakKYpm9Tr+ghDC=(>`sPg?(!$qo4{-wu_Cz%ysv1HK#>i|HQB5zA`)~ z{y}&jyYI8{WGyZnszE{p;j?lxwT5hDZ|+*e(vq!;3M%Re{=faP≷f!0&RLUZE55zV^(wX2!Yw@+;NB~X=Re*u6ReD4`e;!L{+b zEnb&FiF)J*m?>kDE6l&Zp;0lh@vF`Dkn(2CREv|n4{OPj%(X7Po8!f1%k))ELMp=K z$4}xVKAu3JI-9~6sc4l;ngN?k7%%d}Rf^*Xe(4~!skS%aoDnfhq z(hb(NZJK&oEpP^{bkout*>hPFt1Pklr$Uf$64b>G_uaRN<>`V^>;r;u5W9)OzonwC z$-9jLUQa(J&7qCuRa8q=ZtzPShpFiBp*Jfvu;#t|@F*RIImc>=A7gw_|5_wjHpgZJ5t#y4|@Qpyw z+vq_mVJD5{-(4*3<4+OCK6W%^d>ETMc~~T?`6%D56y!TSVEof4OPH&X9R@7KA6eH@ zA#tk*%<#J(;r=D|Yb`+7<6ZeDd{=nvP(JZINlxAS(23L$<@Y|>TK8lGojE4?$Exkd zDBO<4Xc-mp)tkCFRhQ`9SH1QV9Qh_Cea7ZVyivQ!U|E;sowb*svwb?R$ek=A1{nRbFE1iofM2uQYHhE*6_Rl2UoZ zM~fDIz;6h~Ooa{`(eHwTH%J~L)i?Ec@Z8e_Im+2Y6wqS#u6+64r;EnsQG<~+;Goa& zthBO+kl|39?Tf$PMG;+$04Negk_E5rdX5D(TA-h1(Sm!cZ@??+elJxIx|UdKyd8)ULh|7@|om^~uiSQV~TVnQ{)$_u> zObLTbJlsI6*>}S!Y9U#6kIyVAGPFP5R&!H_-v^l&q*QaWCiy9+(^jR~E?n|wF_^LW zWiTHDkDCc%GR-v2{hsE39l%P2tK?7OH;YSZ4!EF zX6p`@f~K1=KgaXva~Umak_K9e2IKLXhBC#hBTL;G&c}?4dGV*C`ah*+=qxP5SQ{5F zGL+7rUSy>}5&$JxeBINw0>$8U%($})PwHrs8qSN;MuzGN1-7%zD&8c!VfxZ>N-90( zu=Jt}%!PdE**Fi*gTdcqEJD&+o8{uSTCHwqDd{xw41UXWA7_wcb(!hwJH-=Hzz92d zSrJH@@?Kgo`dyNIkW0sT=G~{ot@2(zGN3!ay*qXkNfOSCw{K*>h>L@5sx+BZRV0p3 zP?$HsDCY4V+JW5%Z~y!wNdbR|*=#ZR55&Q7q>3_lt~GRO;4V2)rEa^&w08z=1-O8Q z%Sb)zO7}Z{dCm88RY)?bSeW}i81jCgJmlkq=2ZI5-f_k3{Si7(oHyQx2i*4Q>+A9w^J^Nx><2 zTNSz5&v1i+LCW>!rUv*qnsiQ9hYNy{rPxbQH-Tqbb;su*2V}?Mr|KM?bSI2*;kkWsz<00 zWXMs+*q#<9dX+(`s!aUGsCkCz@GEH=F>1t$4gBEYdnY%BW8bP-DAJkW30IYk|CsKi zb|t#gZjr&XSsBmnmg$WqMqg(5ZT*7V_KIBHLFoZQg{!=eXfu!+0L3dSZ>Z7^n(TL1 ziIPgqME=erz%9o(I~IZ)cyXInjNp8c)Jt#)MH}PVBu_VgOZ_-}!wTPN=cZ7GVhc0} z1}GQ&DFXMx)=wS+r;3DN@uY80FPju7Sgk10jt62mJJMLvI1%sw8!c#ahi(P2AKzhw zP_a|gn!ik3>BM@wY+-A>XB__O=a&FP+1L=)b*?)pRq3FJ2w+T5o`MIYbY9jjd|OOE z76hu-QQ>1J(aN^Dv7?2A2qz+8Y$lTjG^-$9FGDzZO{dB9(F^Amk~}=ZX`8uzOCpF? zfG8v^Ogi@-!vjHR^s(^E$hG{}(#=6m5UKxDi>`|~`BxmrJuyRRB`vK98|a%TGkXb9 zeypAtsdQmSoN`rr7fSLJ>Uo23=mMD{%_MX{TWSniguS=!&p01|aGa`5VQ2QKQI*|8 zYV0#h1^V(19t$)QM-5GM0K$1ayfN%mwN23Pq@Ie&r)>XI3>W@FM*292nEepVX8UiG z&~ji(n41Mm?)citLlNunyz!KAD8*h<{Rzq}VNLnpc8>iJ53Na43?2~zv4u=Lm;qw1 zztRvLqW}1^B~M6FH?o6yK=Tw2_6A{x^7~|QVac6|^B{j7ZVJpX=-}SOymtJGXB^3# zRwdwDaGgK#L=t*LkH-p3FbS<7n}j(P2q2Dp4@(q2FmWPd125= znGXM4QRK!d@oCHb9t6Y(p;$LclN(B|<0977R3z`|+obM!`YumrpM(WDDeu+Uj^`gZ z416+5KbpkJSXF=-@vXrz4HZ7)lyvsx(^hoL9-GxQ7*A8SMeCH4Q*e447`P%tNmH0_ zd@m0vHBzGKAgP5Fxq>n_;lKjhRupO{F63s^nhTugR8r~-%NeejYK-DZRM4%>~|UkMX&z5fE?BOG*?nX_KhTvl8^o2b&NfK~RaqQNMUyw` zbv_A;_v$K_Y-gtVYdZu$PCOycCteOt9I&2r08dJuxSn?epsCqv;JSt{ksYM&gInf~R$qR(p z-)p=QukZO;<$Bs<`tHpS`>0CiubINaEIn&)?tR7_c!=#!XjbAQzcr8AXQOD;-9DZO zA^1?l{4$K6`#^gup!{8>-X^JP(5YMM{Z#R7{}%}~*cp1;jrXRo<8QdlTkiMd9=zIM zbI{P85|%|khi9KR2yZ!U%-~cqtYIo2Bna69K(!Qh5_4Jw7d7DcTU_?1lkz;o3-YY( zyC~S9z|b$4#OyFJyuG0~+)z2@q-1%~L&xxXrtkK)4fuQb`pEe5xtkk1ir+!f0_uRkoH0#;j~d@`QANjg{yN99Me=F zL9F3o?6(u9(-{@H;^(RWlsBN$6P zPCgZ{RoE%@3^W!PWAj%}VXW-z{!Ib5ERi4#5iw7lkl-+y{#_}t4wR8pvUxhq1NkTQ z!SS5n1n&PVPf_0~QCh zq4aLc+x6EoQ=2Q3gMmTLPD5aRxjPXZb#0On53+<3iRSp!#vyl;26`)z4SAz&*2nn{&y6j0@X$$yk z!)kl5j^9(n9{w2;$*Lsj!;L$>+XW4cEG)x5S*w+E{tmcK9X?@NOG2Y>jA+g1V{Grti--5I3n z*zC+foNXKPw}6=`sm%mdC?uDc!>J96k5R$KnWv4k8NM&ZzQmO12Ly-5NiONxjGWY$ ztCOuXo!NeZp%x)w4#GZ7R&BY1uN4z$gv>ym2WP-9W4)eHCMZKffgwsePsE;ixt zl3xx3ZylLW+@+=T5s9eBzX4M=s&T>3+f;&!*w$n|b!d)vyFF<2mI{aKfb-5*X!`II z+id`+_hUxo?U;y*jM_LSrxV4S(6F&w3Urt`v&t&g7s^ zfj5tA*$l20yHMy($PQN!Xxp)>i&mwO?Y+eNP|8wR!pAP5KMyV^U@+`)%Qstx#W{h{96vdhEDF75ZrdK{JeRwqN?Tt9c&;ghmAAF#B{I{+S{5P{{f#UtD|-xx+GV6ttvEKI~7= zL-0YA)auV9Blbwa zFm=g1=QV;3+d0>~Y687yVLTzEa; zF6>H=(b-`pss`U3*YoJT__lA@x_*jb=^`TTlq4TBuY3q=aG6N;vge2rHzI*lco?NG zHPm@B$Nz!waB27CsGV;Q(nc9F2wvu5STWhFwF3hn_~ z!Ot!7LH(eBKt`eyM_~~);>0}K~6RE2OE-4sE z8t#7P=_V%2CQTciWRIU26y)^k>oRzuKm6+xH7#AZ*>(K9fEt&beyR6YYti?rWL$cW z=NnApt;9*V#xJyMSe@cI@|x;O6yb`c?x}nw;vqI<{1C82-OMtn)yd(x-ujeCGD_O7 zveSrus)<5kKe4*tuwm6XLkSsZ*fjf zF^)KCJgOuuyUs>VZgWowuFe`waE?DtDju{0C=2l!Lqm*t8=P)UA!0jxj&6v@4zLx} zyy8x8*8w{<51gNd-H2ytdE}(IBwD2>M{L3OijgV6gPCeZ84jXw|@t%5A`FRp2l6j}l(#_*^YeQgh~b6>@A3WVuCnob-D5J5)G+?#Pu?>1 z`nD}KaRfFoEkNyT5M4kd_GPO#^z_I3ZmN78+RBE{ur>TV;U{vvq3@0JYXuj&ScAV! zfF6o`PukC?+De3~{S-VuR4PPt_YpU9XniE!9yn~(^8)1fGirU>#u~X;wZdxMj`GlR zGgf(@!KGT_?wL$w32R>J6zp1_EU1p-gyR#=+>D2$RQ;W3*UX+OB!>e`mZvY~+9&c$ zATS3ZO7L5mE_MXpzFYn|crYjGS4uUG%0huVFk1qKOggcVL^<6usyBO897-v%%`SQ1i*4EL&o|k$=+-2;QzALzgg{4dT`Z?oG z^y%@=wMG-^M-NGP+Q|zUZT7h`5X#oqRDx36%nAo5bCCYM;6}7_gumxElmF{5I7iH3 z=7j4(6n6xt(J}D(!rqV6p6}Io!ftpQb+POAG?RGO=a-7Kp<1SFzChAYT;kTp8*hW* z1_?#zZ%RrqJfQY0q3>1HH>XL=#+1uHAXovS?auRgj)sq5h6YT0IbZWJhn4F%Pp6~m zzlNk-;xyMk4Jm0_F4h@P_-@U$njGU~`1a`cNOL_uwey@*%x8JKe-8Y@8@e;n- z@M#__;n$=FuSl4V4%v%&;SC9iKHqq-(HM4w%Luff%EO|hz+84=qD^p#sIa}?{nFkK z^hDU7BA!+%MfgR`PmswXR$*304-KAu=V5I~?emn8=IG~>BYPrs?T{n$<3v%PP#WBF z%nEf;1kDstDuoKmk6!TQA*lhZ5T|>`OC(8_Ou@rvj*!z=Bem-mrp+Z}bT$i}mhNyb zsG1royyb1T)P3}vMKSD=Nn@zbYh8?zb~;#J2FfPl^XXk7#Wd>$wUhB@zrrEr2&Xs7 zNaA0%gUAV(eb$%;SfZi)5K@Py{Mvs(pCGb%|9i-Pjf|-*H1&j7eB=fH^|8U^$b2>p zDr-4XkMcEdPwx*9L`lid&}x!mXU%15Ce-grDl|Eo<_js6Y zPKa(XT&rp?P1sFFcRnbbfY63NNr8|VsnRipxg2kkK76@1_Cq9y4-xT?w+@W&*jz=X zv%KR64-{)Ain&~oLoRT?5^_9QFFg_9g_^k>7*G1S9j36267ziuX~0-JaH-z--)@yX zZy03z^%C*}20TltJ!rfx-+s(6Qwsr6J|?&DfUeWmeF;P0b`UE=hTxs;AodJJ)VQB07_sABq^Wa)hF-^y90AC)cRG6;W11Nx*ASwL}!_{-WCzRUa!Kb{rV zY}SdmV5OPeR<6;G8T*q8tm{l2Fl)Hu*;m5jc2T$f{MUQX{YZEsEoBc>kCVYpDK}e+ zr<{OqRxh8EcbE9?*#SiS^WX9L4eFUEaE**fDwS zLQg+XiczWk*=&`$j9t~onuD6LLPqorC~@RtQC2&&j1)(awjX zvx5N=RSN6?jZRQ*Cw*i;9z{BxX~fnIX$@E~+bm3)&%1YJAZr)<2VPU2M1xY{*>%=VT4a+jcF3wU;cs>@=qt&fSg=Lu2SYR#w zvkWh?gt(*969kZpuuVPJAGeTYZuLE?0>PDm_MGoi=2x$W=z-;c>g@Y_v>6C5{kt*= zYC+wrcGo}7+FJ%_)N<*jpDMvchk#UMbfE{DEl}dLF+CEwdSD?<^Ati)b1!pEju11o zOdfNYy&p+b>_J9p)B;JjqIa9r&t4gdz!)&gXe+-}jI}J2A}oYJWRo+nS`d(2BX#_c z{NENAWDGQlwN#cx`L5?80}xjg&$p0FZw2-`mai!&ZNHpF)<(a}n$wsQWNQM=f+B1wrazP6!a7{4;VY^BHRM6B+nR$Hf?otRP>}7%{>xS+oy% zDJj4IGgLSb<|0i0yC*g?-|BI<&$-kWDCeYZU8H8G5pOHa>@Ka7^=vlq)?Uo&Ixn@x zs4629k722aIi|!{(QlpM0ZAxXgdV*dB79g<2znh$-pFK6N!a}(8{5Ai;1!Ch)@EC4 z+rg%=)N`~FCI6t1SvTTx%%MYXrUg}r(^?h0U($sS?gfRK{~OqI-XZEg|L33cEqtwpU~ ztl~nVwUPCPmIJj=YoKc$t>j!>H`6a^$tmQ`%_!*})D4AelV3-9oc~4Mz-02%j>*%8 z0e+9gJa9n8geM@RN@ZOBVJ(rr>~8F^C$n#H3*y{>~@m*D`j_DvdL+0Rkya_fQ+le4{}( z(7$}mSKl%nf?>MB$jMG_6BkF@TEk6S%{b>r&M5ZKf}kd?W(+Y&nS|Okw@ccU)vQqf zDGZqMFh&H5kntrEWG`fNGrlKU%xk*eE@SgPSW=TPAV9XaEc#UKET|KSv1+(K%-<;3 z&0Y>p%|5WPN<1rlhP{K;T~u4+=X^N_KTW@NmU36QBEf5&lqdUdnY>&EX8vBgs6an= zPw*I9U>v0vTVgK5tMd!NTqxUFRUjx&s;DmLh1YuLFseFm5&D1-Qpg-t>uxUwrhAjQ9k?hPZza*b zv`@#@+FBi4U7O)0H5`?Dg;KE%4omOofYC{=RTVr_ZIoP={Bnq@KG=ud_h*anW-pYZ zx&x{zy}e=({5$}JpKPLNpGN#r-cnIqid!QD$(bCl1(;RT)V~8GJ(YwUSP^mF&0>f{ zIOJvquTtDJklPSHw@~dwD>*kl1XR{5O+wAjKqG;{a)GlL?@euINEzW{+673;q(aZ~ ze%ge9U;C4&>mU!;uUZ{RHBDqFNgNSVX(e0V%HVBK$zrWuX*5!-KPo0b7UK$|BHZ`mWt-yt|i&tMsD z>ti7i!VW0giXi16A}A$r)t${GtUb-Sg24%j(eV!f2sYBOJ^pUbwSrV`6LBMC($bj- zGM|tpz7}u@4e9iht8`4~?n;5MiLlVEc`=Z1>Bz0gBBt)l$!7?i59WZPa(ugMuBzU! z!j6BzMh2lbk%Z1AH1phF;aU$#)}M-Bj@Wm`-lmgY))w(de|%&&^qw{{ex?Ya%0Wh$ zp^6<(aSh}hpzrh$Nu0M#P?mlLEuEHC=xXR{y(TdQVj6`lE18V>nWo(RH*Tx*)EsjySiSX1(US2`0P3u+|Y1H-iDwX2{iv*wf!AbuMq0&1qA-l2!CwZ}!p}ZawCt zomf{+mZ%RPp9SS`hTd2K`v3|qV2rhX@?SiC3668MWRSy1xiI9glQq0s8Oo4RKhyXC zMqFbT^m`g0!u!gReCMzpH!l#Ch4bg!wmsy%M(>|E1kH~8WdfAH2BnnpUDN@J3EREEi z4WWJ4T1752@zN`kO*GRNr7@PFm0lzWY?TbnT7WB(zmm0!-5{q6`6_~sDo&P6NRO*Mk KSdEB5(EkNOQe>zA literal 0 HcmV?d00001 diff --git a/zh/api/index.html b/zh/api/index.html new file mode 100644 index 000000000..b953522be --- /dev/null +++ b/zh/api/index.html @@ -0,0 +1,138 @@ + + + + + + API参考 | Vue I18n + + + + + + + + + +
Vue I18n

# API参考

# 扩展 Vue

# Vue 构造函数选项

# i18n

  • 类型： I18nOptions

基于组件的本地化选项

  • 请参阅： VueI18n 类构造函数选项

# Vue 注入方法

# $t

  • 参数

    • {Path} key：必填
    • {Locale} locale：可选
    • {Array | Object} values：可选

  • 返回值：TranslateResult

本地化语言环境信息 key，在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 locale 参数，则使用 locale 提供的语言环境进行本地化。如果你为列表/格式化的语言环境信息指定了 key，就必须同时指定 values。有关 values 的详细信息，请参阅格式化。

提示

注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 data 选项中，const $t = this.$t.bind(this))。

# $tc

  • 参数：

    • {Path} key：必填
    • {number} choice：可选，默认为 1
    • {Locale} locale：可选
    • {string | Array | Object} values：可选

  • 返回值：TranslateResult

以复数形式将语言环境信息 key 本地化。在本地化时组件的语言环境信息优先于全局语言环境信息。如果未指定组件的语言环境信息，就使用全局语言环境信息进行本地化。如果你指定了 locale 参数，则使用 locale 提供的语言环境进行本地化。如果将 values 指定为字符串，则该字符串会作为语言环境信息进行本地化。如果将 values 指定为 Array 或 Object，则格式必须为 $t 的 values。

提示

注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 data 选项中，const $tc = this.$tc.bind(this))

# $te

  • 参数：

    • {Path} key：必填
    • {Locale} locale：可选

  • 返回值：boolean

检查 key 是否存在。在 Vue 实例中，如果未指定组件语言环境信息，则使用全局语言环境信息。如果指定了 locale，则使用 locale 的语言环境。

提示

注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 data 选项中，const $te = this.$te.bind(this))。

# $d

🆕 7.0+ 新增

  • 参数：

    • {number | Date} value：必填
    • {Path | Object} key：可选
    • {Locale | Object} locale：可选

  • 返回值：DateTimeFormatResult

将日期时间 value 以 key 的格式本地化。日期时间格式 key 需要注册到 VueI18n 类的 dateTimeFormats 选项，并依赖于 VueI18n 构造函数的 locale 选项。如果要指定 locale 参数，它将优先于 VueI18n 构造函数的 locale 选项。

如果 dateTimeFormats 选项中不存在日期时间格式的 key，则根据 VueI18n 构造函数的 fallbackLocale 选项回退。

提示

注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 data 选项中，const $d = this.$d.bind(this))。

# $n

🆕 7.0+ 新增

  • 参数：

    • {number} value：必填
    • {Path | Object} key：可选
    • {Locale} locale：可选

  • 返回值：NumberFormatResult

将数字 value 以 key 的格式本地化。数字格式 key 需要注册到 VueI18n 类的 numberFormats 选项，并依赖于 VueI18n 构造函数的 locale 选项。如果要指定 locale 参数，它将优先于 VueI18n 构造函数的 locale 选项。

如果 numberFormats 选项中不存在用数字格式 key，则根据 VueI18n 构造函数的 fallbackLocale 选项回退。

如果第二个 key 参数指定为对象，则它应具有以下属性：

  • key {Path}：可选，数字格式
  • locale {Locale}：可选，语言环境
  • style {string}：可选，数字格式选项
  • currency {string}：可选，数字格式选项
  • currencyDisplay {string}：可选，数字格式选项
  • useGrouping {boolean}：可选，数字格式选项
  • minimumIntegerDigits {string}：可选，数字格式选项
  • minimumFractionDigits {string}：可选，数字格式选项
  • maximumFractionDigits {string}：可选，数字格式选项
  • minimumSignificantDigits {string}：可选，数字格式选项
  • maximumSignificantDigits {string}：可选，数字格式选项
  • localeMatcher {string}：可选，数字格式选项
  • formatMatcher {string}：可选，数字格式选项

任何指定数字的格式选项将优先于 VueI18n 构造函数的 numberFormats。

提示

注意，你需要在生命周期方法中保证上下文是组件实例 (例如在 data 选项中，const $n = this.$n.bind(this))。

# 注入属性

# $i18n

  • 类型：I18n

  • 只读

若已经指定了 VueI18n 实例，则将其返回。

如果在组件选项中指定了 i18n 选项，则可以在组件上获得 VueI18n 实例，否则，你将获得 VueI18n 的根实例。

# VueI18n 类

Vuei18n 类实现了 I18n flowtype 接口 (opens new window)

# 静态属性

# version

  • 类型：string

vue-i18n 版本

# availabilities

🆕 7.0+ 新增

  • 类型：IntlAvailability

是否提供以下国际化功能：

  • {boolean} dateTimeFormat：环境敏感的时间格式

  • {boolean} numberFormat：环境敏感的数字格式

由于使用 ECMAScript Internationalization API (ECMA-402) 实现，上述国际化功能取决于浏览器环境 (opens new window)。

# 构造函数选项

你可以基于flowtype 定义 (opens new window) 中的 I18nOptions 指定下列构造函数选项

# locale

  • 类型：Locale

  • 默认值：'en-US'

语言环境。

# fallbackLocale

  • 类型：Locale

  • 默认值：'en-US'

预设的语言环境。

# messages

  • 类型：LocaleMessages

  • 默认值：{}

本地化的语言环境信息。

# dateTimeFormats

🆕 7.0+ 新增

  • 类型：DateTimeFormats

  • 默认值：{}

本地化的日期时间格式。

# numberFormats

🆕 7.0+ 新增

  • 类型：NumberFormats

  • 默认值：{}

本地化的数字格式。

# availableLocales

🆕 8.9.0+ 新增

  • 类型：Locale[]

  • 默认值：[]

  • 示例：["en", "ja"]

以词法顺序排列的 messages 中的可用语言环境列表。

# formatter

  • 类型：Formatter

  • 默认值： Built in formatter

使用 Formatter 接口实现的格式化。

# missing

  • 类型：MissingHandler

  • 默认值：null

缺少本地化时的处理函数。该处理函数在被调用时会使用本地化目标语言环境，本地化路径关键字和 Vue 实例。

如果设置了该函数，则本地化信息未定义时不会产生警告。

# fallbackRoot

  • 类型：Boolean

  • 默认值：true

在组件本地化中，当本地化失败时是否回退到根级别 (全局) 本地化。

如果为 false，则会发出警告，并返回 key。

# fallbackRootWithEmptyString

🆕 8.26+ 新增

  • Type: Boolean

  • Default: true

在组件本地化中，当本地化文本为空字符串时，是否回退到根级别 (全局) 本地化。

请注意，vue-i18n 9.x版本的默认行为是对空字符串本地化文本进行回退到根级别本地化。

如果为false，则空的本地化文本将不会回退到根目录，并将保留为空字符串。

# sync

  • 类型：Boolean

  • 默认值：true

是否将根级别语言环境与组件本地化语言环境同步。

如果为 false，则无论根级别语言环境如何，都要为每个组件语言环境进行本地化。

# silentTranslationWarn

6.1+ 新增

  • 类型：Boolean

  • 默认值：false

是否取消本地化失败时输出的警告。

如果为 true，则禁止本地化失败警告。

# silentFallbackWarn

🆕 8.8 新增

  • 类型：Boolean
  • 默认值：false

是否在回退到 fallbackLocale 或 root 时取消警告。

如果为 true，则仅在根本没有可用的转换时生成警告，而不是在回退时。

# pluralizationRules

8.5+

  • Type: PluralizationRules

  • Default: {}

A set of rules for word pluralization in a following format:

  {
+    // Key - locale for the rule to be applied to.
+    // Value - mapping function that maps a choice index from `$tc` to the actual choice of the plural word. (See getChoiceIndex for details)
+    'pt': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'ru': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'en': function(choice, choiceIndex) => Number/* index of the plural word */;
+    'jp': function(choice, choiceIndex) => Number/* index of the plural word */;
+  }
+

# preserveDirectiveContent

8.7+ 新增

  • 类型：Boolean

  • 默认值：false

在指令解除绑定后，v-t 指令的元素是否应该保留 textContent。

# Properties

# locale

  • 类型：Locale

  • 可读/可写

语言环境。

# fallbackLocale

  • 类型：Locale

  • 可读/可写

预设的语言环境。

# messages

  • 类型：LocaleMessages

  • 只读

本地化的语言环境信息。

# dateTimeFormats

🆕 7.0+ 新增

  • 类型：DateTimeFormats

  • 只读

本地化的日期时间格式。

# numberFormats

🆕 7.0+ 新增

  • 类型：NumberFormats

  • 只读

本地化的数字格式。

# missing

  • 类型：MissingHandler

  • 可读/可写

缺少本地化时的处理函数。

# formatter

  • 类型：Formatter

  • 可读/可写

使用 Formatter 接口实现的格式化。

# silentTranslationWarn

6.1 新增

  • 类型：boolean

  • 可读/可写

是否取消本地化失败时输出的警告。

# pluralizationRules

8.5+

  • Type: PluralizationRules

  • Read/Write

A set of locale-dependent rules for word pluralization.

# preserveDirectiveContent

8.7+ 新增

  • 类型：boolean

  • 可读/可写

在指令解除绑定后，v-t 指令的元素是否应该保留 textContent。

# 方法

# getChoiceIndex

  • 参数：

    • {number} choice
    • {number} choicesLength

  • 返回值：finalChoice {number}

根据当前的数字和一组给定的选项，获取其复数索引，可以通过原型变更覆盖：

VueI18n.prototype.getChoiceIndex = /* 自定义实现 */
+

However, for most usages pluralizationRules constructor option should be enough.

# getLocaleMessage( locale )

  • 参数：

    • {Locale} locale

  • 返回值：LocaleMessageObject

获取语言环境的 locale 信息。

# setLocaleMessage( locale, message )

  • 参数：

    • {Locale} locale
    • {LocaleMessageObject} message

设置语言环境的 locale 信息。

# mergeLocaleMessage( locale, message )

6.1+ 新增

  • 参数：

    • {Locale} locale
    • {LocaleMessageObject} message

将语言环境信息 locale 合并到已注册的语言环境信息中。

# t( key, [locale], [values] )

  • 参数：

    • {Path} key：必填
    • {Locale} locale：可选
    • {Array | Object} values：可选

  • 返回值：：TranslateResult

这与 $t 方法返回的 Function 相同。更多细节见$t。

# tc( key, [choice], [values] )

  • 参数：

    • {Path} key：必填
    • {number} choice：可选，默认为 1
    • {string | Array | Object} values：可选

  • 返回值：TranslateResult

这与 $tc 方法返回的 Function 相同。更多细节见$tc。

# te( key, [locale] )

  • 参数：

    • {string} key：必填
    • {Locale} locale：可选

  • 返回值：boolean

检查全局语言环境信息中是否存在键名路径。如果指定了 locale，请检查语言环境信息 locale。

# getDateTimeFormat ( locale )

🆕 7.0+ 新增

  • 参数：

    • {Locale} locale

  • 返回值：DateTimeFormat

获取语言环境的日期时间格式。

# setDateTimeFormat ( locale, format )

🆕 7.0+ 新增

  • 参数：

    • {Locale} locale
    • {DateTimeFormat} format

设置语言环境的日期时间格式。

# mergeDateTimeFormat ( locale, format )

🆕 7.0+ 新增

  • 参数：

    • {Locale} locale
    • {DateTimeFormat} format

将已注册的日期时间格式与语言环境的日期时间格式合并。

# d( value, [key], [locale] )

🆕 7.0+ 新增

  • 参数：

    • {number | Date} value：必填
    • {Path | Object} key：可选
    • {Locale | Object} locale：可选

  • 返回值：DateTimeFormatResult

这与 Vue 实例方法的 $d 方法相同。更多细节见$d。

# getNumberFormat ( locale )

🆕 7.0+ 新增

  • 参数：

    • {Locale} locale

  • 返回值：NumberFormat

获取语言环境的数字格式。

# setNumberFormat ( locale, format )

🆕 7.0+ 新增

  • 参数：

    • {Locale} locale
    • {NumberFormat} format

设置语言环境的数字格式。

# mergeNumberFormat ( locale, format )

🆕 7.0+ 新增

  • 参数：

    • {Locale} locale
    • {NumberFormat} format

将已注册的数字格式与语言环境的数字格式合并。

# n( value, [key], [locale] )

🆕 7.0+ 新增

  • 参数：

    • {number} value：必填
    • {Path | Object} key：可选
    • {Locale} locale：可选

  • 返回值：NumberFormatResult

这与 Vue 实例方法的 $n 方法相同。更多细节见$n。

# 指令

🆕 7.3+ 新增

# v-t

  • 预期：string | Object

  • 修饰符：

    • .preserve：(8.7.0 新增) 当指令解除绑定时，保留元素 textContent。

  • 详细：

更新使用语言环境信息进行本地化的元素 textContent。你可以使用字符串语法或对象语法。字符串语法可以指定为语言环境信息的关键字路径。如果可以使用对象语法，则需要将以下参数指定为对象键：

  • path：必填，语言环境信息的关键字
  • locale：可选，语言环境
  • args：可选，用于列表或命名格式

注意

当 v-t 指令解除绑定时，默认情况下将清除元素 textContent。在过渡动画 (opens new window)内部使用的时候，可能出现不合预期的情况。为了在指令解除绑定之后保留 textContent 数据，可使用 .preserve 修饰符或全局的 preserveDirectiveContent 选项。

  • 示例：
<!-- 字符串语法：字面量 -->
+<p v-t="'foo.bar'"></p>
+
+<!-- 字符串语法：通过数据或计算属性绑定 -->
+<p v-t="msg"></p>
+
+<!-- 对象语法： 字面量 -->
+<p v-t="{ path: 'hi', locale: 'ja', args: { name: 'kazupon' } }"></p>
+
+<!-- 对象语法： 通过数据或计算属性绑定 -->
+<p v-t="{ path: greeting, args: { name: fullName } }"></p>
+
+<!-- `preserve` 修饰符 -->
+<p v-t.preserve="'foo.bar'"></p>
+

# 组件

# i18n 函数式组件

🆕 7.0+ 新增

# 参数：

  • path {Path}：必填，关于语言环境信息的键名路径
  • locale {Locale}：可选，语言环境
  • tag {string}：可选，默认值 span
  • places {Array | Object}：可选 (7.2 新增)

# 用法：

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ja: {
+    tos: '利用規約',
+    term: '私は xxx の{0}に同意します。'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

# 请参阅：

组件插值

# 特殊属性

# place

🆕 7.2+ 新增

# 预期：{number | string}

用于组件插槽，指示格式列表的索引值或具名格式的关键字。

有关详细用法，请参阅下面链接的指南部分。

# 请参阅：

组件插值

+ + + diff --git a/zh/guide/component.html b/zh/guide/component.html new file mode 100644 index 000000000..7fe072913 --- /dev/null +++ b/zh/guide/component.html @@ -0,0 +1,190 @@ + + + + + + 基于组件的本地化 | Vue I18n + + + + + + + + + +
Vue I18n

# 基于组件的本地化

通常语言环境信息 (例如：locale、messages 等) 会被设置为 VueI18n 实例的构造函数选项，并且该实例会被作为 i18n 选项设置在 Vue 的根实例上。

因此你可以全局地在 Vue 的根实例以及任何被组合的组件中使用 $t 或者 $tc 进行翻译。当然面向 Vue 组件的设计，你也可以更方便的分别控制每个组件的语言环境信息。

基于组件的本地化示例：

// 为 Vue 的根实例设置语言环境信息
+const i18n = new VueI18n({
+  locale: 'ja',
+  messages: {
+    en: {
+      message: {
+        hello: 'hello world',
+        greeting: 'good morning'
+      }
+    },
+    ja: {
+      message: {
+        hello: 'こんにちは、世界',
+        greeting: 'おはようございます'
+      }
+    }
+  }
+})
+
+// 定义组件
+const Component1 = {
+  template: `
+    <div class="container">
+     <p>Component1 locale messages: {{ $t("message.hello") }}</p>
+     <p>Fallback global locale messages: {{ $t("message.greeting") }}</p>
+   </div>`,
+  i18n: { // `i18n` 选项，为组件设置语言环境信息
+    messages: {
+      en: { message: { hello: 'hello component1' } },
+      ja: { message: { hello: 'こんにちは、component1' } }
+    }
+  }
+}
+
+new Vue({
+  i18n,
+  components: {
+    Component1
+  }
+}).$mount('#app')
+

模板：

<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+  <component1></component1>
+</div>
+

输出如下：

<div id="app">
+  <p>こんにちは、世界</p>
+  <div class="container">
+    <p>Component1 locale messages: こんにちは、component1</p>
+    <p>Fallback global locale messages: おはようございます</p>
+  </div>
+</div>
+

在上面的例子中，如果组件没有语言环境信息，它将回退到全局定义的本地化信息。组件使用根实例中设置的语言 (在上面的例子中：locale: 'ja')。

注意，在默认情况下，回退到根语言环境会在控制台中生成两个警告：

[vue-i18n] Value of key 'message.greeting' is not a string!
+[vue-i18n] Fall back to translate the keypath 'message.greeting' with root locale.
+

为避免以上警告 (同时保留那些完全没有翻译给定关键字的警告) 需初始化 VueI18n 实例时设置 silentFallbackWarn：true。

如果你希望在组件语言环境中进行本地化，可以在 i18n 选项中用 sync: false 和 locale。

# 组件的共享语言环境消息

有时您可能想为某些组件导入共享的语言环境消息，而不是从全局语言环境消息（例如，组件某些功能的常用消息）回退。

您可以使用 i18n 的 sharedMessages 选项。

通用语言环境消息示例：

export default {
+  en: {
+    buttons: {
+      save: "Save",
+      // ...
+    }
+  },
+  ja: {
+    buttons: {
+      save: "保存",
+      // ...
+    }
+  }
+}
+

Components:

import commonMessage from './locales/common' // 导入通用语言环境消息
+
+export default {
+  name: 'ServiceModal',
+  template: `
+    <div class="modal">
+      <div class="body">
+        <p>This is good service</p>
+      </div>
+      <div class="footer">
+        <button type="button">
+          {{ $t('buttons.save') }}
+        </button>
+      </div>
+    </div>
+  `,
+  i18n: {
+    messages: { ... },
+    sharedMessages: commonMessages
+  }
+}
+

如果将 sharedMessages 选项与 messages 选项一起指定，则这些消息将被合并为语言环境消息，并进入目标组件的VueI18n实例。

# 函数式组件的翻译

使用函数式组件时，所有数据 (包括 prop、子内容、插槽、父级内容等) 都通过包含属性的 context 传递，并且它无法识别 this 的范围，因此在函数式组件上使用 vue-i18n 时，你必须将 $t 称为 parent.$t，请查看以下示例：

...
+<div>
+  <a href="#" target="_blank" rel="noopener noreferrer">
+    <img src="./assets/example.jpg" :alt="parent.$t('message.hello')">
+  </a>
+</div>
+...
+

+ ← + + 自定义指令本地化 + + → +

+ + + diff --git a/zh/guide/datetime.html b/zh/guide/datetime.html new file mode 100644 index 000000000..ff8670f78 --- /dev/null +++ b/zh/guide/datetime.html @@ -0,0 +1,143 @@ + + + + + + 日期时间本地化 | Vue I18n + + + + + + + + + +
Vue I18n

# 日期时间本地化

支持版本

🆕 7.0+ 新增

你可以使用你定义的格式来本地化日期时间。

日期时间格式如下：

const dateTimeFormats = {
+  'en-US': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric'
+    }
+  },
+  'ja-JP': {
+    short: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    },
+    long: {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+      weekday: 'long',
+      hour: 'numeric',
+      minute: 'numeric',
+      hour12: true
+    }
+  }
+}
+

如上，你可以定义具名的 (例如：short、long 等) 日期时间格式，并需要使用 ECMA-402 Intl.DateTimeFormat 的选项 (opens new window)。

之后就像语言环境信息一样，你需要指定 VueI18n 构造函数的 dateTimeFormats 选项：

const i18n = new VueI18n({
+  dateTimeFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

模板如下：

<div id="app">
+  <p>{{ $d(new Date(), 'short') }}</p>
+  <p>{{ $d(new Date(), 'long', 'ja-JP') }}</p>
+</div>
+

输出如下：

<div id="app">
+  <p>Jan 18, 2021</p>
+  <p>2021年1月18日日曜日 午前5:47</p>
+</div>
+

+ ← + + 数字本地化 + + → +

+ + + diff --git a/zh/guide/directive.html b/zh/guide/directive.html new file mode 100644 index 000000000..cbb370c99 --- /dev/null +++ b/zh/guide/directive.html @@ -0,0 +1,169 @@ + + + + + + 自定义指令本地化 | Vue I18n + + + + + + + + + +
Vue I18n

# 自定义指令本地化

支持的版本

🆕 7.3+ 新增

你不仅可以使用 $t 方法进行翻译，还可以使用 v-t 自定义指令。

# 字符串语法

你可以使用字符串语法传递语言环境信息的键名路径。

JavaScript：

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hi there!' },
+      ja: { hello: 'こんにちは！' }
+    }
+  }),
+  data: { path: 'hello' }
+}).$mount('#string-syntax')
+

模板：

<div id="string-syntax">
+  <!-- 字符串 -->
+  <p v-t="'hello'"></p>
+  <!-- 通过数据进行键名路径绑定 -->
+  <p v-t="path"></p>
+</div>
+

输出：

<div id="string-syntax">
+  <p>hi there!</p>
+  <p>hi there!</p>
+</div>
+

# 对象语法

你可以使用对象语法。

Javascript：

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { hello: 'hi {name}!' },
+      ja: { hello: 'こんにちは、{name}！' }
+    }
+  }),
+  computed: {
+    nickName () { return 'kazupon' }
+  },
+  data: { path: 'hello' }
+}).$mount('#object-syntax')
+

模板：

<div id="object-syntax">
+  <!-- 文字 -->
+  <p v-t="{ path: 'hello', locale: 'ja', args: { name: 'kazupon' } }"></p>
+  <!-- 通过 `data` 绑定数据 -->
+  <p v-t="{ path: path, args: { name: nickName } }"></p>
+</div>
+

输出：

<div id="object-syntax">
+  <p>こんにちは、kazupon！</p>
+  <p>hi kazupon!</p>
+</div>
+

# 使用翻译

支持版本

🆕 8.7+ 新增

当 v-t 指令应用于 <transition> 组件 (opens new window)内的元素时，你可能会注意到过渡动画之后的翻译过的信息会消失。这与 <transition> 组件实现的方式有关——在过渡开始之前 ，<transition> 组件内消失元素中的所有指令都将被销毁。此行为可能导致内容在短过渡时闪烁，但在长过渡时最明显。

为了确保在转换期间指令内容不会被触及，只需将.preserve 修饰符添加到 v-t 指令定义中。

Javascript：

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { preserve: 'with preserve' },
+    }
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

模板：

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t.preserve="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

也可以在 VueI18n 实例本身设置全局设置，这将对没有修饰符的所有 v-t 指令产生影响。

Javascript：

new Vue({
+  i18n: new VueI18n({
+    locale: 'en',
+    messages: {
+      en: { preserve: 'with preserve' },
+    },
+    preserveDirectiveContent: true
+  }),
+  data: { toggle: true }
+}).$mount('#in-transitions')
+

模板：

<div id="in-transitions">
+  <transition name="fade">
+    <span v-if="toggle" v-t="'preserve'"></span>
+  </transition>
+  <button @click="toggle = !toggle">Toggle</button>
+</div>
+

关于上面的例子，请参阅示例 (opens new window)

# $t vs v-t

# $t

$t 是扩展的 Vue 实例方法， 它有以下优点和缺点：

# 优点

你可以灵活地在模板以及 Vue 实例的计算属性和方法中使用 mustash 语法 {{}}。

# 缺点

$t 在每次重新渲染时都会被执行，因此它确实有翻译成本。

# v-t

v-t 是一个自定义指令，它有以下优点和缺点：

# 优点

v-t 比 $t 方法具有更好的性能，因为在一次翻译时自定义指令会进行缓存。此外可以使用由 vue-i18n-extensions (opens new window) 提供的 Vue 编译器模块进行预翻译。

因此，可以进行更多性能优化。

# 缺点

v-t 不能像 $t 一样灵活使用，它更复杂。带有 v-t 的翻译内容会被插入到元素的 textContent 中。此外，当你使用服务器渲染时，你需要设置自定义指令 (opens new window)到 createRenderer 函数的 directives 选项。

+ ← + + 组件插值 + + → +

+ + + diff --git a/zh/guide/fallback.html b/zh/guide/fallback.html new file mode 100644 index 000000000..1b489e33e --- /dev/null +++ b/zh/guide/fallback.html @@ -0,0 +1,134 @@ + + + + + + 回退本地化 | Vue I18n + + + + + + + + + +
Vue I18n

# 回退本地化

总结：使用fallbackLocale：'<lang>'选择首选语言缺少翻译时要使用的语言。

# 使用语言环境的隐式回退

如果给出的 locale 包含领土和可选的方言，则隐式回退将自动激活。

例如，对于 de-DE-bavarian，以下内容将被视为备用：

  1. de-DE-Bavarian
  2. de-DE
  3. de

要禁止自动回退，请添加后缀感叹号 !，例如 de-DE!。

# 具有一个语言环境的显式回退

以下语言环境信息的 ja 语言环境中不存在 message 键：

const messages = {
+  en: {
+    message: 'hello world'
+  },
+  ja: {
+    // 没有翻译的本地化 `hello`
+  }
+}
+

当为 VueI18n 构造函数选项指定 fallbackLocale 选项时，message 键使用 en 语言环境进行本地化：

const i18n = new VueI18n({
+  locale: 'ja',
+  fallbackLocale: 'en',
+  messages
+})
+

模板如下：

<p>{{ $t('message') }}</p>
+

输出如下：

<p>hello world</p>
+

注意，默认情况下回退到 fallbackLocale 会产生两个控制台警告：

[vue-i18n] Value of key 'message' is not a string!
+[vue-i18n] Fall back to translate the keypath 'message' with 'en' locale.
+

为了避免这些警告 (同时保留那些完全没有翻译给定关键字的警告)，需初始化 VueI18n 实例时设置 silentFallbackWarn：true。

# 回退插值

由于翻译的键值是字符串，因此也可以作为翻译的值：

const messages = {
+  ja: {
+    'Hello world': 'こんにちは、世界'
+  }
+}
+

这是一种很自然的书写方式，如果在message中找不到相应的键值将回退到原本的语言：

注意: fallbackRoot的优先级高于formatFallbackMessages

<p>{{ $t('Hello world') }}</p>
+

为了实现此功能，可以通过设置formatFallbackMessages为true：

const messages = {
+  ru: {
+    'Hello {name}': 'Здравствуйте {name}'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'ru',
+  fallbackLocale: 'en',
+  formatFallbackMessages: true,
+  messages
+})
+

模板如下：

<p>{{ $t('Hello {name}', { name: 'John' }}) }}</p>
+<p>{{ $t('The weather today is {condition}!', { condition: 'sunny' }) }}</p>
+

将会输出：

<p>Здравствуйте John</p>
+<p>The weather today is sunny!</p>
+

+ ← + + 基于组件的本地化 + + → +

+ + + diff --git a/zh/guide/formatting.html b/zh/guide/formatting.html new file mode 100644 index 000000000..9efd5e1c9 --- /dev/null +++ b/zh/guide/formatting.html @@ -0,0 +1,192 @@ + + + + + + 格式化 | Vue I18n + + + + + + + + + +
Vue I18n

# 格式化

# 具名格式

语言环境信息如下：

const messages = {
+  en: {
+    message: {
+      hello: '{msg} world'
+    }
+  }
+}
+

模板如下：

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
+

输出如下：

<p>hello world</p>
+

# 列表格式

语言环境信息如下：

const messages = {
+  en: {
+    message: {
+      hello: '{0} world'
+    }
+  }
+}
+

模板如下：

<p>{{ $t('message.hello', ['hello']) }}</p>
+

输出如下：

<p>hello world</p>
+

列表格式也接受类似数组的对象：

<p>{{ $t('message.hello', {'0': 'hello'}) }}</p>
+

输出如下：

<p>hello world</p>
+

# HTML 格式化

提示

⚠️ 在你的网站上动态插入任意 HTML 可能非常危险，因为它很容易导致 XSS 攻击。仅对可信内容使用 HTML 插值，而不对用户提供的内容使用。

我们建议使用组件插值 功能。

在某些情况下，你可能希望将翻译呈现为 HTML 信息而不是静态字符串。

const messages = {
+  en: {
+    message: {
+      hello: 'hello <br> world'
+    }
+  }
+}
+

模板如下：

<p v-html="$t('message.hello')"></p>
+

输出如下 (取代预先格式化的信息)

<p>hello
+<!--<br> 存在，但呈现为 html 而不是字符串-->
+world</p>
+

# 支持 ruby on rails 的 i18n 格式

语言环境信息如下：

const messages = {
+  en: {
+    message: {
+      hello: '%{msg} world'
+    }
+  }
+}
+

模板如下：

<p>{{ $t('message.hello', { msg: 'hello' }) }}</p>
+

输出如下：

<p>hello world</p>
+

# 自定义格式

有时，你可能需要使用自定义格式进行翻译 (例如：ICU 信息语法 (opens new window))。

你可以使用实现格式化接口 (opens new window) 的自定义格式化函数来实现。

以下使用 ES2015 class 语法的自定义格式化函数：

// 实现自定义格式
+class CustomFormatter {
+     constructor (options) {
+       // ...
+     }
+
+     //
+     // 插值
+     //
+     // @param {string} 信息
+     //   列表或具名格式的字符串。
+     //   例如：
+     //   - 具名格式：'Hi {name}'
+     //   - 列表格式：'Hi {0}'
+     //
+     // @param {Object | Array} 值
+     //   `message` 插值的值
+     //   使用 `$t`， `$tc` 和 `i18n` 函数式组件传递值。
+     //   e.g.
+     //   - $t('hello', { name: 'kazupon' }) -> 传递值：Object `{ name: 'kazupon' }`
+     //   - $t('hello', ['kazupon']) -> 传递值：Array `['kazupon']`
+     //   - `i18n` 函数式组件 (组件插值)
+     //     <i18n path="hello">
+     //       <p>kazupon</p>
+     //       <p>how are you?</p>
+     //     </i18n>
+     //     -> 传递值：Array (included VNode):
+     //        `[VNode{ tag: 'p', text: 'kazupon', ...}, VNode{ tag: 'p', text: 'how are you?', ...}]`
+     //
+     // @return {Array<any>}
+     //   插值，你需要返回以下内容：
+     //   - 当使用 `$t` 或 `$tc` 数组中应该是字符串。
+     //   - 当使用 `i18n` 函数式组件时 数组中应包含 VNode 对象。
+     //
+     interpolate (message, values) {
+       // 在这里实现插值逻辑
+       // ...
+
+       // 返回插值数组
+       return ['resolved message string']
+     }
+}
+
+// 注册 `formatter` 选项
+const i18n = new VueI18n({
+  locale: 'en-US',
+  formatter: new CustomFormatter(/* 这里是构造函数选项 */),
+  messages: {
+    'en-US': {
+      // ...
+    },
+    // ...
+  }
+})
+
+// 启动!
+new Vue({ i18n }).$mount('#app')
+

你可以查看自定义格式化函数的官方示例 (opens new window)。

+ ← + + 复数 + + → +

+ + + diff --git a/zh/guide/hot-reload.html b/zh/guide/hot-reload.html new file mode 100644 index 000000000..ce2d2b9c6 --- /dev/null +++ b/zh/guide/hot-reload.html @@ -0,0 +1,178 @@ + + + + + + 热重载 | Vue I18n + + + + + + + + + +
Vue I18n

# 热重载

您可以使用Webpack的 Hot Module Replacement (opens new window) (HMR) 功能来监视本地化文件中的更改以及将热更改重新加载到您的应用程序中。

你可以监视本地化文件中的更改，并将更改热重载到应用程序中。

# 基本例子

如果仅使用静态语言环境集，则可以显式热加载这些语言环境：

import Vue from "vue"
+import VueI18n from "vue-i18n"
+import en from './en'
+import ja from './ja'
+
+// 语言环境信息
+const messages = {
+  en,
+  ja
+}
+
+// VueI18n 实例
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+
+// 运行程序
+const app = new Vue({
+  i18n,
+  // ...
+}).$mount('#app')
+
+// 热更新
+if (module.hot) {
+  module.hot.accept(['./en', './ja'], function () {
+    i18n.setLocaleMessage('en', require('./en').default)
+    i18n.setLocaleMessage('ja', require('./ja').default)
+    // 同样可以通过 $i18n 属性进行热更新
+    // app.$i18n.setLocaleMessage('en', require('./en').default)
+    // app.$i18n.setLocaleMessage('ja', require('./ja').default)
+  })
+}
+

# 进阶范例

如果您想支持一组不断变化的语言环境，则可以使用 require.context 动态地重新加载这些语言环境：

import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+// 加载所有语言环境并记住上下文
+function loadMessages() {
+  const context = require.context("./locales", true, /[a-z0-9-_]+\.json$/i);
+
+  const messages = context
+    .keys()
+    .map((key) => ({ key, locale: key.match(/[a-z0-9-_]+/i)[0] }))
+    .reduce(
+      (messages, { key, locale }) => ({
+        ...messages,
+        [locale]: context(key),
+      }),
+      {}
+    );
+
+  return { context, messages };
+}
+
+const { context, messages } = loadMessages();
+
+// VueI18n 实例
+const i18n = new VueI18n({
+  locale: "en",
+  messages,
+});
+
+// 运行程序
+const app = new Vue({
+  i18n,
+  // ...
+}).$mount('#app');
+
+// 热更新
+if (module.hot) {
+  module.hot.accept(context.id, () => {
+    const { messages: newMessages } = loadMessages();
+
+    Object.keys(newMessages)
+      .filter((locale) => messages[locale] !== newMessages[locale])
+      .forEach((locale) => {
+        messages[locale] = newMessages[locale];
+        i18n.setLocaleMessage(locale, messages[locale]);
+      });
+  });
+}
+

+ ← + + 语言环境变更 + + → +

+ + + diff --git a/zh/guide/interpolation.html b/zh/guide/interpolation.html new file mode 100644 index 000000000..0bf3d0e53 --- /dev/null +++ b/zh/guide/interpolation.html @@ -0,0 +1,191 @@ + + + + + + 组件插值 | Vue I18n + + + + + + + + + +
Vue I18n

# 组件插值

# 基本用法

支持版本

🆕 7.0+ 新增

有时，我们需要使用包含 HTML 标签或组件的语言环境信息进行本地化。例如：

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

在上面的信息中，如果你使用 $t，可能你会尝试编写以下语言环境信息：

const messages = {
+  en: {
+    term1: 'I Accept xxx\'s',
+    term2: 'Terms of Service Agreement'
+  }
+}
+

你可能会尝试在以下模板中实现：

<p>{{ $t('term1') }}<a href="/term">{{ $t('term2') }}</a></p>
+

输出：

<p>I accept xxx <a href="/term">Terms of Service Agreement</a></p>
+

这是非常麻烦的，如果在语言环境信息中配置 <a> 标签，则可能由于使用了 v-html="$t('term')" 进行本地化而存在被 XSS 攻击的可能性。

你可以使用 i18n 函数式组件来避免它。例如：

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  ja: {
+    tos: '利用規約',
+    term: '私は xxx の{0}に同意します。'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

输出如下：

<div id="app">
+  <!-- ... -->
+  <label for="tos">
+    I accept xxx <a href="/term" target="_blank">Term of Service</a>.
+  </label>
+  <!-- ... -->
+</div>
+

关于上面的例子，见示例 (opens new window)

i18n 函数式组件的子元素用 path 属性的语言环境信息进行插值。

在上面的例子中:

<a :href="url" target="_blank">{{ $t('tos') }}</a>

被插入了语言环境信息 term。

在上面的示例中，组件插值遵循列表格式。i18n 函数式组件的子项按其出现顺序进行插值。

# 高级用法

:::危险提示!! +在下一个主要版本中，place 和 places 属性将被弃用。 请切换到插槽语法。 +:::

支持版本

🆕 7.2+ 新增

提示

⚠️ 在 i18n 组件中，仅包含空格的文本内容将被省略。

在 place 特性的帮助下支持具名格式。例如：

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p">
+    <span place="limit">{{ changeLimit }}</span>
+    <a place="action" :href="changeUrl">{{ $t('change') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    info: 'You can {action} until {limit} minutes from departure.',
+    change: 'change your flight',
+    refund: 'refund the ticket'
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    changeUrl: '/change',
+    refundUrl: '/refund',
+    changeLimit: 15,
+    refundLimit: 30
+  }
+}).$mount('#app')
+

输出：

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/change">change your flight</a> until <span>15</span> minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

提示

⚠️ i18n 组件的所有子项都必须设置 place 属性。否则它将回退到列表格式。

如果你仍想在命名格式中插入文本内容，可以在 i18n 组件上定义 places 属性。例如：

<div id="app">
+  <!-- ... -->
+  <i18n path="info" tag="p" :places="{ limit: refundLimit }">
+    <a place="action" :href="refundUrl">{{ $t('refund') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+

输出：

<div id="app">
+  <!-- ... -->
+  <p>
+    You can <a href="/refund">refund your ticket</a> until 30 minutes from departure.
+  </p>
+  <!-- ... -->
+</div>
+

+ ← + + 单文件组件 + + → +

+ + + diff --git a/zh/guide/lazy-loading.html b/zh/guide/lazy-loading.html new file mode 100644 index 000000000..303531136 --- /dev/null +++ b/zh/guide/lazy-loading.html @@ -0,0 +1,152 @@ + + + + + + 延迟加载翻译 | Vue I18n + + + + + + + + + +
Vue I18n

# 延迟加载翻译

一次加载所有翻译文件是过度和不必要的。

使用 Webpack 时，延迟加载或异步加载转换文件非常简单。

让我们假设我们有一个类似于下面的项目目录

our-cool-project
+-dist
+-src
+--routes
+--store
+--setup
+---i18n-setup.js
+--lang
+---en.js
+---it.js
+

lang 文件夹是我们所有翻译文件所在的位置。setup 文件夹是我们的任意设置的文件，如 i18n-setup，全局组件 inits，插件 inits 和其他位置。

//i18n-setup.js
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import messages from '@/lang/en'
+import axios from 'axios'
+
+Vue.use(VueI18n)
+
+export const i18n = new VueI18n({
+  locale: 'en', // 设置语言环境
+  fallbackLocale: 'en',
+  messages // 设置语言环境信息
+})
+
+const loadedLanguages = ['en'] // 我们的预装默认语言
+
+function setI18nLanguage (lang) {
+  i18n.locale = lang
+  axios.defaults.headers.common['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
+}
+
+export function loadLanguageAsync(lang) {
+  // 如果语言相同
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // 如果语言已经加载
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // 如果尚未加载语言
+  return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`).then(
+    messages => {
+      i18n.setLocaleMessage(lang, messages.default)
+      loadedLanguages.push(lang)
+      return setI18nLanguage(lang)
+    }
+  )
+}
+

简而言之，我们正在创建一个新的 VueI18n 实例。然后我们创建一个 loadedLanguages 数组，它将跟踪我们加载的语言。接下来是 setI18nLanguage 函数，它将实际更改 vueI18n 实例、axios 以及其它需要本地化的地方。

loadLanguageAsync 是实际用于更改语言的函数。加载新文件是通过import功能完成的，import 功能由 Webpack 慷慨提供，它允许我们动态加载文件，并且因为它使用 promise，我们可以轻松地等待加载完成。

你可以在 Webpack 文档 (opens new window) 中了解有关导入功能的更多信息。

使用 loadLanguageAsync 函数很简单。一个常见的用例是在 vue-router beforeEach 钩子里面。

router.beforeEach((to, from, next) => {
+  const lang = to.params.lang
+  loadLanguageAsync(lang).then(() => next())
+})
+

我们可以通过检查 lang 实际上是否支持来改进这一点，调用 reject 这样我们就可以在 beforeEach 捕获路由转换。

+ ← + + 工具 + + → +

+ + + diff --git a/zh/guide/locale.html b/zh/guide/locale.html new file mode 100644 index 000000000..21bf2c262 --- /dev/null +++ b/zh/guide/locale.html @@ -0,0 +1,127 @@ + + + + + + 语言环境变更 | Vue I18n + + + + + + + + + +
Vue I18n

# 语言环境变更

通常，使用 Vue 根实例作为起点，使用 VueI18n 类的 locale 属性作为参考来本地化所有子组件。

有时你可能希望动态更改语言环境。在这种情况下，你可以更改 VueI18n 实例的 locale 属性的值。

const i18n = new VueI18n({
+  locale: 'ja', // 设置语言环境
+  ...
+})
+
+// 创建 Vue 根实例
+new Vue({
+  i18n,
+  ...
+}).$mount('#app')
+
+// 更改为其它的 locale
+i18n.locale = 'en'
+

每个组件都包含一个引用为 $i18n 属性的 VueI18n 实例，该实例也可用于更改语言环境。

示例：

<template>
+  <div class="locale-changer">
+    <select v-model="$i18n.locale">
+      <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">
+        {{ lang }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'locale-changer',
+  data () {
+    return { langs: ['ja', 'en'] }
+  }
+}
+</script>
+

警告

⚠️ 对于使用了 sync: false 的组件，语言环境的更改将被忽略。

组件与根范围

⚠️ 在组件内更改 $i18n.locale 不会更新根语言环境。 +如果您依靠根语言环境，例如在使用 root fallbacks 时，请使用 $root.$i18n.locale 而不是$ i18n.locale。

+ ← + + 延迟加载翻译 + + → +

+ + + diff --git a/zh/guide/messages.html b/zh/guide/messages.html new file mode 100644 index 000000000..0c0244dd1 --- /dev/null +++ b/zh/guide/messages.html @@ -0,0 +1,223 @@ + + + + + + 语言环境信息的语法 | Vue I18n + + + + + + + + + +
Vue I18n

# 语言环境信息的语法

# 结构

语言环境信息的语法如下：

// 作为 Flowtype 定义，语言环境信息的语法类似于 BNF 注释
+type LocaleMessages = { [key: Locale]: LocaleMessageObject };
+type LocaleMessageObject = { [key: Path]: LocaleMessage };
+type LocaleMessageArray = LocaleMessage[];
+type MessageContext = {
+  list: (index: number) => mixed,
+  named: (key: string) => mixed,
+  linked: (key: string) => TranslateResult,
+  values: any,
+  path: string,
+  formatter: Formatter,
+  messages: LocaleMessages,
+  locale: Locale
+};
+type MessageFunction = (ctx: MessageContext) => string;
+type LocaleMessage = string | MessageFunction | LocaleMessageObject | LocaleMessageArray;
+type Locale = string;
+type Path = string;
+

基于以上语法，你可以配置以下结构的 Locale 信息：

{
+  "en": {  // 'en' Locale
+    "key1": "this is message1", // 基本的
+    "nested": { // 嵌套
+      "message1": "this is nested message1"
+    },
+    "errors": [ // 数组
+      "this is 0 error code message",
+      {  // 数组嵌套对象
+        "internal1": "this is internal 1 error message"
+      },
+      [  // 数组嵌套数组
+        "this is nested array error 1"
+      ]
+    ]
+  },
+  "ja": { // 'ja' Locale
+    // ...
+  }
+}
+

在上面的语言环境信息的结构中，你可以使用以下键名路径进行翻译。

<div id="app">
+  <!-- 基本的 -->
+  <p>{{ $t('key1') }}</p>
+  <!-- 嵌套 -->
+  <p>{{ $t('nested.message1') }}</p>
+  <!-- 数组 -->
+  <p>{{ $t('errors[0]') }}</p>
+  <!-- 数组嵌套对象 -->
+  <p>{{ $t('errors[1].internal1') }}</p>
+  <!-- 数组嵌套数组 -->
+  <p>{{ $t('errors[2][0]') }}</p>
+</div>
+

输出以下内容：

<div id="app">
+  <!-- 基本的 -->
+  <p>this is message1</p>
+  <!-- 嵌套 -->
+  <p>this is nested message1</p>
+  <!-- 数组 -->
+  <p>this is 0 error code message</p>
+  <!-- 数组嵌套对象 -->
+  <p>this is internal 1 error message</p>
+  <!-- 数组嵌套数组 -->
+  <p>this is nested array error 1</p>
+</div>
+

# Linked locale messages

如果有一个翻译关键字总是与另一个具有相同的具体文本，你可以链接到它。要链接到另一个翻译关键字，你所要做的就是在其内容前加上一个 @: 符号后跟完整的翻译键名，包括你要链接到的命名空间。

语言环境信息如下：

const messages = {
+  en: {
+    message: {
+      the_world: 'the world',
+      dio: 'DIO:',
+      linked: '@:message.dio @:message.the_world !!!!'
+    }
+  }
+}
+

模板如下：

<p>{{ $t('message.linked') }}</p>
+

输出如下：

<p>DIO: the world !!!!</p>
+

# 格式化链接的语言环境消息

如果语言区分字符大小写，则可能需要控制链接的语言环境消息的大小写。 +链接的消息可以用修饰符 @.modifier:key 格式化。

以下修饰符当前可用。

  • upper: 链接消息中的所有字符均大写
  • lower: 小写链接消息中的所有字符
  • capitalize: 大写链接消息中的第一个字符

语言环境消息如下：

const messages = {
+  en: {
+    message: {
+      homeAddress: 'Home address',
+      missingHomeAddress: 'Please provide @.lower:message.homeAddress'
+    }
+  }
+}
+
<label>{{ $t('message.homeAddress') }}</label>
+
+<p class="error">{{ $t('message.missingHomeAddress') }}</p>
+

输出以下内容：

<label>Home address</label>
+
+<p class="error">Please provide home address</p>
+

您可以添加修饰符或覆盖将 modifiers 选项传递给 VueI18n 构造函数的现有修饰符。

const i18n = new VueI18n({
+  locale: 'en',
+  modifiers: {
+    snakeCase: (str) => str.split(' ').join('-')
+  },
+  messages: {
+    // ...
+  },
+})
+

# 按括号分组

链接到的语言环境信息的键名也可以形如 @:(message.foo.bar.baz)，其中链接到另一段翻译的键名在括号 () 里。

如果链接 @:message.something 后紧跟着一个点 .，则此选项非常有用，因为它本不该成为但却成为了链接的一部分。

语言环境信息如下：

const messages = {
+  en: {
+    message: {
+      dio: 'DIO',
+      linked: 'There\'s a reason, you lost, @:(message.dio).'
+    }
+  }
+}
+

模板如下：

<p>{{ $t('message.linked') }}</p>
+

输出如下：

<p>There's a reason, you lost, DIO.</p>
+

# 留言功能

vue-i18n 建议在翻译消息时使用基于列表的字符串或命名格式作为语言环境消息。

但是，在某些情况下，由于复杂的语言语法，您确实需要JavaScript的全部编程功能。 因此，您可以使用 message function 来代替基于字符串的消息。

以下是一个返回简单问候语的消息函数：

const messages = {
+  en: {
+    greeting: (ctx) => 'hello!'
+  }
+}
+

使用消息功能非常容易！ 您只需使用 $t 或 t 指定消息功能的键：

<p>{{ $t('greeting') }}</p>
+

输出如下：

<p>hello!</p>
+

消息功能输出消息，该消息具有消息功能的返回值。

# 命名格式

vue-i18n 支持命名格式 作为基于字符串的消息格式。 vue-i18n用$ t或t插值参数值，并可以将其输出。

使用 消息上下文 的消息功能可以完成以下操作：

这是问候的示例：

const messages = {
+  en: {
+    greeting: (ctx) => `hello, ${ctx.named('name')}!`
+  }
+}
+

模板：

<p>{{ $t('greeting', { name: 'DIO' }) }}</p>
+

输出如下：

<p>hello, DIO!</p>
+

消息上下文具有命名函数。 您需要指定键来解析以 $t 或 t 命名的值。

# 清单格式

列表格式的使用类似于上述命名格式。

vue-i18n 支持 列表格式 作为基于字符串的消息格式。 vue-i18n用$ t或t插值参数值，并可以将其输出。

您可以通过使用消息上下文对消息函数执行相同的操作：

这是问候的示例：

const messages = {
+  en: {
+    greeting: (ctx) => `hello, ${ctx.list(0)}!`
+  }
+}
+

模板：

<p>{{ $t('greeting', ['DIO']) }}</p>
+

输出如下：

<p>hello, DIO!</p>
+

消息上下文具有列表功能。 您需要指定索引来解析由 $t 或 t 列表指定的值。

# 局限性

在消息功能中，以下基于字符串提供的功能无法通过消息上下文使用：

  • 链接的区域设置消息
  • 复数

+ ← + + 回退本地化 + + → +

+ + + diff --git a/zh/guide/number.html b/zh/guide/number.html new file mode 100644 index 000000000..bc6018136 --- /dev/null +++ b/zh/guide/number.html @@ -0,0 +1,152 @@ + + + + + + 数字本地化 | Vue I18n + + + + + + + + + +
Vue I18n

# 数字本地化

支持版本

🆕 7.0+ 新增

你可以使用你定义的格式来本地化数字。

数字格式如下：

const numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD'
+    }
+  },
+  'ja-JP': {
+    currency: {
+      style: 'currency',
+      currency: 'JPY',
+      currencyDisplay: 'symbol'
+    }
+  }
+}
+

如上，你可以指定具名的 (例如：currency 等) 的数字格式，并且需要使用 ECMA-402 Intl.NumberFormat 的选项 (opens new window)。

之后就像语言环境信息一样，你需要指定 VueI18n 构造函数的 numberFormats 选项：

const i18n = new VueI18n({
+  numberFormats
+})
+
+new Vue({
+  i18n
+}).$mount('#app')
+

模板如下：

<div id="app">
+  <p>{{ $n(100, 'currency') }}</p>
+  <p>{{ $n(100, 'currency', 'ja-JP') }}</p>
+</div>
+

输出如下：

<div id="app">
+  <p>$100.00</p>
+  <p>￥100</p>
+</div>
+

# 自定义格式

支持版本

🆕 8.10+ 新增

$n 方法返回的结果字符串带有完全格式化的数字，该数字只能作为整体使用。 在需要格式化格式化数字的某些部分（例如小数位）的情况下，$n 是不够的。 在这种情况下，<i18n-n> 功能组件将有所帮助。

有了最少的一组属性，<i18n-n> 产生的输出与 $n 相同，并包装到已配置的DOM元素中。

以下模板：

<div id="app">
+  <i18n-n :value="100"></i18n-n>
+  <i18n-n :value="100" format="currency"></i18n-n>
+  <i18n-n :value="100" format="currency" locale="ja-JP"></i18n-n>
+</div>
+

将产生以下输出：

<div id="app">
+  <span>100</span>
+  <span>$100.00</span>
+  <span>￥100</span>
+</div>
+

但是，当与范围内的插槽 (opens new window) 一起使用时，该组件的真正功能就会发挥作用。

假设需要用较粗的字体呈现数字的整数部分。 这可以通过指定 integer 作用域的插槽元素来实现：

<i18n-n :value="100" format="currency">
+  <span v-slot:integer="slotProps" styles="font-weight: bold">{{ slotProps.integer }}</span>
+</i18n-n>
+

上面的模板将产生以下 HTML：

<span>$<span styles="font-weight: bold">100</span>.00</span>
+

可以同时指定多个作用域插槽：

<i18n-n :value="1234" :format="{ key: 'currency', currency: 'EUR' }">
+  <span v-slot:currency="slotProps" styles="color: green">{{ slotProps.currency }}</span>
+  <span v-slot:integer="slotProps" styles="font-weight: bold">{{ slotProps.integer }}</span>
+  <span v-slot:group="slotProps" styles="font-weight: bold">{{ slotProps.group }}</span>
+  <span v-slot:fraction="slotProps" styles="font-size: small">{{ slotProps.fraction }}</span>
+</i18n-n>
+

（此结果 HTML 进行了格式化，以提高可读性）

<span>
+  <span styles="color: green">€</span>
+  <span styles="font-weight: bold">1</span>
+  <span styles="font-weight: bold">,</span>
+  <span styles="font-weight: bold">234</span>
+  <span styles="font-size: small">00</span>
+</span>
+

您可以通过指定 tag 属性来选择根容器的节点类型。 如果省略，则默认为 'span'。 您也可以将其设置为布尔值 false 以直接插入子节点，而无需创建根元素。

可以在 API 页面 中找到受支持的作用域插槽以及其他 <i18n-n> 属性的完整列表。

+ ← + + 语言环境信息的语法 + + → +

+ + + diff --git a/zh/guide/pluralization.html b/zh/guide/pluralization.html new file mode 100644 index 000000000..f8e1befdb --- /dev/null +++ b/zh/guide/pluralization.html @@ -0,0 +1,191 @@ + + + + + + 复数 | Vue I18n + + + + + + + + + +
Vue I18n

# 复数

你可以使用复数进行翻译。你必须定义具有管道 | 分隔符的语言环境，并在管道分隔符中定义复数。

*您的模板将需要使用 $tc() 而不是 $t()。

语言环境信息如下：

const messages = {
+  en: {
+    car: 'car | cars',
+    apple: 'no apples | one apple | {count} apples'
+  }
+}
+

模板如下：

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+
+<p>{{ $tc('apple', 0) }}</p>
+<p>{{ $tc('apple', 1) }}</p>
+<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+

输出如下：

<p>car</p>
+<p>cars</p>
+
+<p>no apples</p>
+<p>one apple</p>
+<p>10 apples</p>
+

# 通过预定义的参数访问该数字

你无需明确指定复数的数字。可以通过预定义的命名参数 {count} 和/或 {n} 在语言环境信息中访问该数字。如有必要，你可以覆盖这些预定义的命名参数。

语言环境信息如下：

const messages = {
+  en: {
+    apple: 'no apples | one apple | {count} apples',
+    banana: 'no bananas | {n} banana | {n} bananas'
+  }
+}
+

模板如下：

<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
+<p>{{ $tc('apple', 10) }}</p>
+
+<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
+<p>{{ $tc('banana', 1) }}</p>
+<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>
+

输出如下：

<p>10 apples</p>
+<p>10 apples</p>
+
+<p>1 banana</p>
+<p>1 banana</p>
+<p>too many bananas</p>
+

# 自定义复数

但是，这种多元化并不适用于所有语言（例如，斯拉夫语言具有不同的多元化规则）。

为了实现这些规则，您可以将可选的 pluralizationRules 对象传递给VueI18n 构造函数选项。

使用针对斯拉夫语言（俄语，乌克兰语等）的规则的非常简化的示例：

new VueI18n({
+  // Key - 在这种情况下，用于规则 `'ru'` 的语言
+  // Value - 选择正确的复数形式的功能
+  pluralizationRules: {
+    /**
+     * @param choice {number} 输入给$的选择索引 $tc：`$tc('path.to.rule', choiceIndex)`
+     * @param choicesLength {number} 可用选择总数
+     * @returns 最终选择索引以选择复数单词
+     */
+    'ru': function(choice, choicesLength) {
+      // this === VueI18n 实例，因此本地属性也存在于此
+
+      if (choice === 0) {
+        return 0;
+      }
+
+      const teen = choice > 10 && choice < 20;
+      const endsWithOne = choice % 10 === 1;
+
+      if (choicesLength < 4) {
+        return (!teen && endsWithOne) ? 1 : 2;
+      }
+      if (!teen && endsWithOne) {
+        return 1;
+      }
+      if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+        return 2;
+      }
+
+      return (choicesLength < 4) ? 2 : 3;
+    }
+  }
+})
+

这将有效地实现以下目的：

const messages = {
+  ru: {
+    car: '0 машин | {n} машина | {n} машины | {n} машин',
+    banana: 'нет бананов | {n} банан | {n} банана | {n} бананов'
+  }
+}
+

格式在哪里 0 东西 | 事情以结尾结束 1 | 事情以结尾结束 2-4 | 事情以结尾结束 5-9, 0 和青少年 (10-19). +附言 斯拉夫多元化是困难的，您可以阅读有关它的更多信息 这里 (opens new window).

你的模板仍然需要使用 $tc()，而不是 $t() ：

<p>{{ $tc('car', 1) }}</p>
+<p>{{ $tc('car', 2) }}</p>
+<p>{{ $tc('car', 4) }}</p>
+<p>{{ $tc('car', 12) }}</p>
+<p>{{ $tc('car', 21) }}</p>
+
+<p>{{ $tc('banana', 0) }}</p>
+<p>{{ $tc('banana', 4) }}</p>
+<p>{{ $tc('banana', 11) }}</p>
+<p>{{ $tc('banana', 31) }}</p>
+

结果如下：

<p>1 машина</p>
+<p>2 машины</p>
+<p>4 машины</p>
+<p>12 машин</p>
+<p>21 машина</p>
+
+<p>нет бананов</p>
+<p>4 банана</p>
+<p>11 бананов</p>
+<p>31 банан</p>
+

# 默认多元

如果在多元化地图中找不到您当前的语言环境，则将使用英语的 默认 规则。

+ ← + + 日期时间本地化 + + → +

+ + + diff --git a/zh/guide/sfc.html b/zh/guide/sfc.html new file mode 100644 index 000000000..d7c70dcec --- /dev/null +++ b/zh/guide/sfc.html @@ -0,0 +1,379 @@ + + + + + + 单文件组件 | Vue I18n + + + + + + + + + +
Vue I18n

# 单文件组件

# 基本用法

如果使用单文件组件构建 Vue 组件或 Vue 应用程序，则可以管理 i18n 自定义块的语言环境信息。

以下是单文件组件示例 (opens new window):

<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界！"
+  }
+}
+</i18n>
+
+<template>
+  <div id="app">
+    <label for="locale">locale</label>
+    <select v-model="locale">
+      <option>en</option>
+      <option>ja</option>
+    </select>
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  data () { return { locale: 'en' } },
+  watch: {
+    locale (val) {
+      this.$i18n.locale = val
+    }
+  }
+}
+</script>
+

# 安装 vue-i18n-loader

为了使用 <i18n> 自定义块，你需要安装 vue-loader 和 vue-i18n-loader。如果你使用了单文件组件，vue-loader (opens new window) 很可能已在项目中使用了，那么 vue-i18n-loader (opens new window) 必须另外安装：

npm i --save-dev @kazupon/vue-i18n-loader
+

# Webpack

需要对 Webpack 进行以下配置：

对于 vue-loader v15 或更高版本：

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      },
+      {
+        resourceQuery: /blockType=i18n/,
+        type: 'javascript/auto',
+        loader: '@kazupon/vue-i18n-loader'
+      }
+      // ...
+    ]
+  },
+  // ...
+}
+

对于 vue-loader v14：

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          loaders: {
+            // 你需要指定 `i18n` 的值为 `vue-i18n-loader`
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
+      },
+      // ...
+    ]
+  },
+  // ...
+}
+

# Vue CLI 3.0

Vue CLI 3.0 (opens new window) 隐藏了 webpack 配置，因此，如果我们想在单文件组件中添加对 <i18n> 标记的支持，我们需要修改现有配置。

为此，我们必须在项目的根目录下创建一个 vue.config.js。完成后，我们必须包括以下内容：

对于 vue-loader v15 或更高版本：

module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule("i18n")
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use("i18n")
+        .loader("@kazupon/vue-i18n-loader")
+        .end();
+  }
+}
+

对于 vue-loader v14：

const merge = require('deepmerge')
+
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options =>
+        merge(options, {
+          loaders: {
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        })
+      )
+  }
+}
+

别忘了安装deepmerge (opens new window)! (npm i deepmerge -D 或 yarn add deepmerge -D)

如果你想了解有关修改现有配置的更多信息点击这里 (opens new window)。

# Laravel-Mix

对于带有 vue-loader v15 或更高版本的 Laravel-mix 4：

// 使用 “i18n” 方法扩展 Mix ，加载 vue-i18n-loader
+mix.extend( 'i18n', new class {
+        webpackRules() {
+            return [
+                {
+                    resourceQuery: /blockType=i18n/,
+                    type:          'javascript/auto',
+                    loader:        '@kazupon/vue-i18n-loader',
+                },
+            ];
+        }
+    }(),
+);
+
+// 确保在 `.js(..., ...)` 之前调用 `.i18n()` (来加载加载器)
+mix.i18n()
+   .js( 'resources/js/App.js', 'public/js/app.js' )
+   ...
+

对于带有 vue-loader v14 的 Laravel-mix 2：

从 Laravel-mix 的 V2.1 (opens new window) 开始，你可以通过 mix.extend() 添加自定义规则。Laravel mix 已经有了处理 .vue 文件的规则。要添加 vue-i18n-loader，请将以下内容添加到 webpack.mix.js：

// 下面的代码将注入 i18n Kazupon/vue-18-loader 作为 .vue 文件的加载器。
+mix.extend( 'i18n', function( webpackConfig, ...args ) {
+    webpackConfig.module.rules.forEach( ( module ) => {
+        // 搜索处理 .vue 文件的 “vue-loader” 组件。
+        if( module.loader !== 'vue-loader' ) {
+            return;
+        }
+
+        // 在此模块中，为 i18n 标记添加 vue-i18n-loader。
+        module.options.loaders.i18n = '@kazupon/vue-i18n-loader';
+    } );
+} );
+
+// 确保在 `.js(...，...)` 之前调用 `.i18n()`
+mix.i18n()
+   .js( 'resources/assets/js/App.js', 'public/js/app.js' )
+   ...
+

# 加载 YAML

i18n 自定义块需要指定为 JSON 格式，你也可以通过使用 vue-loader 预加载器功能来使用 YAML 格式。

以下是 YAML 格式的 i18n 自定义块：

<i18n>
+en:
+  hello: "hello world!"
+ja:
+  hello: "こんにちは、世界！"
+</i18n>
+

Webpack 配置如下：

对于 vue-loader v15 或更高版本：

// Vue CLI 3.0
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule("i18n")
+      .resourceQuery(/blockType=i18n/)
+      .type('javascript/auto')
+      .use("i18n")
+        .loader("@kazupon/vue-i18n-loader")
+        .end()
+      .use('yaml')
+        .loader('yaml-loader')
+        .end()
+  }
+}
+

对于 vue-loader v14：

module.exports = {
+  // ...
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: {
+          preLoaders: {
+            i18n: 'yaml-loader'
+          },
+          loaders: {
+            i18n: '@kazupon/vue-i18n-loader'
+          }
+        }
+      },
+      // ...
+    ]
+  },
+  // ...
+}
+

# 多个自定义块

你可以使用具有多个 i18n 自定义块的语言环境信息。

<i18n src="./common/locales.json"></i18n>
+<i18n>
+  {
+    "en": {
+      "hello": "hello world!"
+    },
+    "ja": {
+      "hello": "こんにちは、世界！"
+    }
+  }
+</i18n>
+

如上所见，第一个自定义块使用 src 特性加载常用的语言环境信息，第二个自定义块加载仅在该单文件组件中定义的语言环境信息。这些语言环境信息将合并为组件的语言环境信息。

这样，多个自定义块在想要用作模块时非常有用。

# Scoped 风格

当使用带有 scoped style vue-i18n 时，重要的是要记住使用深度选择器 (opens new window) 来设置嵌套转换的样式。例如：

翻译仅包含文本（不使用深层选择器）

<i18n>
+{
+  "en": {
+    "hello": "hello world!"
+  },
+  "ja": {
+    "hello": "こんにちは、世界"
+  }
+}
+</i18n>
+
+<template>
+  <div class="parent">
+    <p>message: {{ $t('hello') }}</p>
+  </div>
+</template>
+
+<!-- 可行 -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+</style>
+

使用 HTML 元素翻译（必须使用深度选择器）

<i18n>
+{
+  "en": {
+    "hello": "hello<span>world!</span>"
+  },
+  "ja": {
+    "hello": "こんにちは、<span>世界！</span>"
+  }
+}
+</i18n>
+
+<template>
+  <div class="parent">
+    <p v-html="$t('hello')"></p>
+  </div>
+</template>
+
+<!-- 不可行-->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p span {
+    color: red;
+  }
+</style>
+
+<!-- 可行 >>> -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p >>> span {
+    color: red;
+  }
+</style>
+
+<!-- 可行 /deep/ -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  .parent p /deep/ span {
+    color: red;
+  }
+</style>
+
+<!-- 可行 ::v-deep -->
+<style scoped>
+  .parent p {
+    color: #42b883;
+  }
+
+  ::v-deep .parent p span {
+    color: red;
+  }
+</style>
+

# 函数式组件中的自定义块

如果单个文件组件具有使用函数式组件的模板，并且你已经定义了 i18n 自定义块，请注意你无法使用语言环境信息进行本地化。

例如，以下代码无法使用 i18n 自定义块的语言环境信息进行本地化。

<i18n>
+{
+  "en": {
+    "hello": "hello world"
+  },
+  "ja": {
+    "hello": "こんにちは、世界"
+  }
+}
+</i18n>
+
+<template functional>
+  <!-- 'hello' 的父实例的语言环境信息 -->
+  <p>{{ parent.$t('hello') }}</p>
+</template>
+

+ ← + + 热重载 + + → +

+ + + diff --git a/zh/guide/tooling.html b/zh/guide/tooling.html new file mode 100644 index 000000000..28ffe3049 --- /dev/null +++ b/zh/guide/tooling.html @@ -0,0 +1,92 @@ + + + + + + 工具 | Vue I18n + + + + + + + + + +
Vue I18n

# 工具

为了支持开发，我们官方提供了一些工具。

此外，还有第三方供应商提供的集成了 Vue I18n 的工具。

# 官方工具

# Vue Cli 插件

vue-cli-plugin-i18n (opens new window) 是官方提供的 Vue Cli 插件。

使用此插件，您可以为Vue应用程序设置 i18n 环境，并支持 i18n 开发环境。

# Webpack Loader

vue-i18n-loader (opens new window) 是官方提供的 Webpack Loader。 +使用此加载程序，您可以在单个文件组件中使用 i18n 自定义块。

关于 i18n 自定义块，请参见 单文件组件

# ESLint 插件

eslint-plugin-vue-i18n (opens new window) 是为 Vue I18n 编写的 ESLint 插件。

它可以轻松地将一些本地化 lint 功能集成到 Vue.js 应用程序中。

# Extensions

在vue-i18n-extensions (opens new window) 你可以找到为 Vue I18n 编写的插件。

您可以使用此扩展来启用 SSR 并提高 Vue I18n 的性能。

# 第三方工具

# BabelEdit

BabelEdit (opens new window) 是 Web 应用程序的翻译编辑器。

BabelEdit可以翻译 json 文件，也可以翻译单文件组件的 i18n 自定义块。

欲了解更多，请看教程 (opens new window)

# i18n Ally

i18n Ally (opens new window) 是 VSCode 的 i18n 扩展。

i18n Ally 为您的 i18n 开发提供了出色的 DX。

在自述文件 (opens new window)中了解有关 i18n Ally 的更多信息。

# i18nPlugin (intellij 平台)

i18nPlugin (opens new window) Intellij idea i18next 支持插件(Jetbrains 插件页面 (opens new window))。

适用于 i18n typescript/javascript/PHP 的插件。 支持 vue-i18n。 要启用 vue-i18n 支持，请转到 设置- > 工具 -> i18n 插件配置，然后选中 "Vue-i18n"。 您需要设置您的语言环境目录（默认为语言环境）。

# vue-i18n-extract

vue-i18n-extract (opens new window) 对基于 vue-i18n 的 Vue.js 项目执行静态分析，并报告以下信息：

  • 所有 未使用的 vue-i18n 键的列表（在语言文件中找到但在项目中未使用的条目）
  • 所有 缺失键 的列表（在项目中使用但在语言文件中不存在的条目）

可以在控制台中显示输出或将其写入json文件

丢失的键也可以自动添加到给定的语言文件中

+ ← +

+ + + diff --git a/zh/index.html b/zh/index.html new file mode 100644 index 000000000..15b860642 --- /dev/null +++ b/zh/index.html @@ -0,0 +1,97 @@ + + + + + + Vue I18n + + + + + + + + + +
Vue I18n
hero

+ Vue I18n +

+ Vue I18n 是 Vue.js 的国际化插件 +

+ 快速上手 → +

🥇 金牌赞助商

Nuxt.js

🥈 白银赞助商

适用于应用程序（Web应用程序）的BabelEdit翻译编辑器

🥉 青铜赞助商

zenarchitects sendcloud

简单

通过简单的 API 将你的应用国际化

强大

除了简单的翻译外，还支持复数，数字，日期时间等本地化处理

面向组件

你可以在单文件组件上管理语言环境信息

+ MIT Licensed | Copyright © 2020 kazuya kawaguchi +
+ + + diff --git a/zh/installation.html b/zh/installation.html new file mode 100644 index 000000000..cbfa7f446 --- /dev/null +++ b/zh/installation.html @@ -0,0 +1,109 @@ + + + + + + 安装 | Vue I18n + + + + + + + + + +
Vue I18n

# 安装

# 兼容性说明

  • Vue.js 2.0.0+

# 直接下载 / CDN

https://unpkg.com/vue-i18n/dist/vue-i18n (opens new window)

unpkg.com (opens new window) 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以通过 https://unpkg.com/vue-i18n@8.9.0/dist/vue-i18n.js (opens new window) 这样的 URL 指定版本号或者 tag。

在 Vue 之后引入 vue-i18n，它会自动安装：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+

# NPM

npm install vue-i18n
+

# Yarn

yarn add vue-i18n
+

如果在一个模块系统中使用它，你必须通过 Vue.use() 明确地安装 vue-i18n：

import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+

如果使用全局的 script 标签，则无须如此 (手动安装) <script>。

# Vue Cli 3.x

vue add i18n
+

你需要 Vue cli 3.x 作为先决条件，你可以在命令行上使用下面的命令来安装：

npm install @vue/cli -g
+

# 开发版构建

如果你想使用最新的开发版构建，就得从 GitHub 上直接 clone，然后自己构建一个 vue-i18n。

git clone https://github.com/kazupon/vue-i18n.git node_modules/vue-i18n
+cd node_modules/vue-i18n
+npm install # or `yarn`
+npm run build  # or `yarn run build`
+

+ ← + + 格式化 + + → +

+ + + diff --git a/zh/introduction.html b/zh/introduction.html new file mode 100644 index 000000000..28eb1c62f --- /dev/null +++ b/zh/introduction.html @@ -0,0 +1,91 @@ + + + + + + 介绍 | Vue I18n + + + + + + + + + +
Vue I18n

# 介绍

说明

⚠️ 本文档适用于 Vue I18n v6.0 或更高版本. 如果你使用 v5.x，请参阅旧版部分。

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

让我们开始吧

# 赞助商

# 🥇 金

Nuxt.js

# 🥈 白银赞助商

适用于应用程序（Web应用程序）的BabelEdit翻译编辑器

# 🥉 青铜

zenarchitects sendcloud

# 成为一名 Patreon 赞助商

贵公司是否使用 vue-i18n 或 vue-cli-plugin-i18n 来构建出色的应用程序？ 加入其他会员并成为赞助商，在此文档中添加你的徽标！在 Patreon 上支持我使我能够更少地完成工作并在免费开源软件上工作，例如 vue-i18n！ 谢谢！

+ 开始 + + → +

+ + + diff --git a/zh/started.html b/zh/started.html new file mode 100644 index 000000000..7149069fa --- /dev/null +++ b/zh/started.html @@ -0,0 +1,135 @@ + + + + + + 开始 | Vue I18n + + + + + + + + + +
Vue I18n

# 开始

说明

我们将在指南中的代码示例中使用 ES2015 (opens new window) 语法。

# HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
+<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
+
+<div id="app">
+  <p>{{ $t("message.hello") }}</p>
+</div>
+

# JavaScript

// 如果使用模块系统 (例如通过 vue-cli)，则需要导入 Vue 和 VueI18n ，然后调用 Vue.use(VueI18n)。
+// import Vue from 'vue'
+// import VueI18n from 'vue-i18n'
+//
+// Vue.use(VueI18n)
+
+// 准备翻译的语言环境信息
+const messages = {
+  en: {
+    message: {
+      hello: 'hello world'
+    }
+  },
+  ja: {
+    message: {
+      hello: 'こんにちは、世界'
+    }
+  }
+}
+
+// 通过选项创建 VueI18n 实例
+const i18n = new VueI18n({
+  locale: 'ja', // 设置地区
+  messages, // 设置地区信息
+})
+
+
+// 通过 `i18n` 选项创建 Vue 实例
+new Vue({ i18n }).$mount('#app')
+
+// 现在应用程序已经准备好了！
+

输出如下：

<div id="#app">
+  <p>こんにちは、世界</p>
+</div>
+

+ ← + + 安装 + + → +

+ + +
Vue I18n

# API Referência

# Estendendo o protótipo Vue

# Opções do construtor Vue

# i18n

  • Tipo: I18nOptions

Opção de localização baseada em componentes.

  • Veja também: Opções do construtor VueI18n

# Métodos injetados no Vue

# $t

  • Argumentos:

    • {Path} key: obrigatório
    • {Locale} locale: opcional
    • {Array | Object} values: opcional

  • Retorno: TranslateResult

Obtendo uma mensagem traduzida usando a chave key. As mensagens de localização em um componente têm precedência sobre as mensagens globais. Se não houver mensagens de localização no componente, a localização será executada usando as mensagens de localização globais. Se locale for especificado, as mensagens de localização do locale serão usadas. Se key foi especificada para a lista / formato nomeado das mensagens de localização, então os values também devem ser especificados. Você pode aprender mais sobre values na seção Formato das mensagens de localização.

Dica

Observe que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de data,const $t = this.$t.bind(this)).

# $tc

  • Argumentos:

    • {Path} key: obrigatório
    • {number} choice: opcional, padrão 1
    • {Locale} locale: opcional
    • {string | Array | Object} values: opcional

  • Retorno: TranslateResult

Obtendo uma mensagem traduzida usando a key com pluralização. As mensagens de localização de componentes têm precedência sobre as mensagens globais. Se não houver mensagens de localização no componente, a localização será executada usando mensagens de localização globais. Se locale for especificado, as mensagens de localização de locale serão usadas. Se um valor de texto for especificado para value, a localização será realizada para esse valor. Se for um Array ou Object especificado em value, então deve ser especificado com value de $t.

Se a implementação de pluralização padrão não for adequada para você, consulte regras de pluralização nas opções do construtor e pluralização customizada.

Dica

Observe que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de data, const $tc = this.$tc.bind(this)).

# $te

  • Argumentos:

    • {Path} key: obrigatório
    • {Locale} locale: opcional

  • Retorno: boolean

Verifica se existe uma tradução para uma chave nas mensagens de localização. Se não houver mensagens de localização no componente, ele verifica as mensagens de localização globais. Se locale for especificado, então a presença de locale nas mensagens é verificada.

Dica

Observe que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de data, const $te = this.$te.bind(this)).

# $d

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {number | Date} value: obrigatório
    • {Path | Object} key: opcional
    • {Locale | Object} locale: opcional

  • Retorno: DateTimeFormatResult

Localização da data e hora de value com o formato de data e hora de key. O formato de data e hora da key precisa ser registrado na opção dateTimeFormats da classe VueI18n, e depende da opção locale do construtor VueI18n. Se você especificar o argumento locale, ele terá prioridade sobre a opção locale do construtor VueI18n.

Se o formato de data para key não estiver na opção dateTimeFormats, então um formato de fallback será usado com base na opção fallbackLocale do construtor VueI18n.

Dica

Observe que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de data, const $d = this.$d.bind(this)).

# $n

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {number} value: obrigatório
    • {Path | Object} format: opcional
    • {Locale} locale: opcional

  • Retorno: NumberFormatResult

Localização do número value usando o formato de número format. O formato de número de format deve ser registrado na opção numberFormats da classe VueI18n, e depende da opção locale do construtor VueI18n. Especificar o argumento locale sobrescreve a opção locale do construtor VueI18n.

Se o formato de número para format não for especificado na opção numberFormats, um formato de fallback será usado com base na opção fallbackLocale do construtor VueI18n.

Se o segundo argumento para format for especificado por um objeto, ele deverá conter as seguintes propriedades:

  • key {Path}: opcional, número formatado
  • locale {Locale}: opcional, localização
  • compactDisplay {string}: opcional, opção de formatação do número
  • currency {string}: opcional, opção de formatação do número
  • currencyDisplay {string}: opcional, opção de formatação do número
  • currencySign {string}: opcional, opção de formatação do número
  • localeMatcher {string}: opcional, opção de formatação do número
  • notation {string}: opcional, opção de formatação do número
  • numberingSystem {string}: opcional, opção de formatação do número
  • signDisplay {string}: opcional, opção de formatação do número
  • style {string}: opcional, opção de formatação do número
  • unit {string}: opcional, opção de formatação do número
  • unitDisplay {string}: opcional, opção de formatação do número
  • useGrouping {boolean}: opcional, opção de formatação do número
  • minimumIntegerDigits {string}: opcional, opção de formatação do número
  • minimumFractionDigits {string}: opcional, opção de formatação do número
  • maximumFractionDigits {string}: opcional, opção de formatação do número
  • minimumSignificantDigits {string}: opcional, opção de formatação do número
  • maximumSignificantDigits {string}: opcional, opção de formatação do número

Qualquer opções de formatação de número especificadas terão precedência sobre os valores numberFormats do construtor VueI18n.

Dica

Observe que você precisa garantir este contexto igual à instância do componente nos métodos em seu ciclo de vida (por exemplo, nas opções de data, const $n = this.$n.bind(this)).

# Propriedades injetadas

# $i18n

  • Tipo: I18n

  • Somente leitura

Obter uma instância de VueI18n, se definido.

Se você especificou uma opção i18n nas opções do componente, você será capaz de obter uma instânciaVueI18n no componente, caso contrário, você poderá obter a instância raiz VueI18n.

# A classe VueI18n

A classe VueI18n implementa a interface I18n de definições de tipo de fluxo (opens new window)

# Propriedades estáticas

# version

  • Tipo: string

Versão vue-i18n.

# availabilities

🆕 Adicionado na versão 7.0+

  • Tipo: IntlAvailability

Verificar a disponibilidade dos seguintes recursos de internacionalização:

  • {boolean} dateTimeFormat: formatação de data sensível à localidade

  • {boolean} numberFormat: formatação de número sensível à localidade

Os recursos de internacionalização acima dependem do ambiente do navegador (opens new window), que implementa a API de internacionalização ECMAScript (ECMA-402).

# Opções de construtor

É possível especificar algumas das opções do construtor I18nOptions com base em definições de tipo de fluxo (opens new window)

# locale

  • Tipo: Locale

  • Padrão: 'en-US'

O local usado para localização. Se uma localidade contém território e dialeto, esta localidade contém um fallback implícito.

# fallbackLocale

  • Tipo: FallbackLocale

  • Padrão: false

Localidade reserva para localização. Para obter mais detalhes e definições de fallback mais complexos, consulte a seção fallback.

# messages

  • Tipo: LocaleMessages

  • Padrão: {}

Mensagens de localização para o local.

# dateTimeFormats

🆕 Adicionado na versão 7.0+

  • Tipo: DateTimeFormats

  • Padrão: {}

Formatos de data para localização.

# numberFormats

🆕 Adicionado na versão 7.0+

  • Tipo: NumberFormats

  • Padrão: {}

Formatos de número para localização.

# availableLocales

🆕 Adicionado na versão 8.9.0+

  • Tipo: Locale[]

  • Padrão: []

  • Exemplos: ["en", "ru"]

Lista de localidades disponíveis em messages em ordem lexical.

# formatter

  • Tipo: Formatter

  • Padrão: Formatador integrado

Um método de formatação que implementa a interface Formatter.

# modifiers

🆕 Adicionado na versão 8.15.0+

  • Tipo: Modifiers

  • Padrão: modificadores lower e upper

Funções modificadoras para mensagens relacionadas

# missing

  • Tipo: MissingHandler

  • Padrão: null

Manipulador para mensagens de localização ausentes. O manipulador será chamado com locale, a key da mensagem de localização e os values.

Se este manipulador for especificado e for feita uma tentativa de acessar a mensagem de localização ausente, não haverá nenhum aviso no console.

# fallbackRoot

  • Tipo: Boolean

  • Padrão: true

Ao usar a localização em componentes, determina se deve consultar a localização de nível raiz (global) quando no caso da localização falhar.

Se definido como false, um aviso será lançado e uma chave retornada.

# fallbackRootWithEmptyString

🆕 Adicionado na versão 8.26+

  • Tipo: Boolean

  • Padrão: true

Na localização do componente, se deve retornar à localização de nível raiz (global) quando a mensagem local for uma string vazia.

Por favor, note que o comportamento padrão no vue-i18n 9.x é não voltar ao root para a mensagem local que é uma string vazia.

Se for false, a mensagem local vazia não retornará ao root e será mantida como string vazia.

# sync

  • Tipo: Boolean

  • Padrão: true

Se sincroniza a localidade de nível raiz com a localidade de localização do componente.

Se o valor for false, independentemente da localidade definida no nível raiz, a localidade definida no componente será usada.

# silentTranslationWarn

6.1+, 🆙 8.13

  • Tipo: Boolean | RegExp

  • Padrão: false

Desativa os avisos exibidos quando a localização falha.

Se verdadeiro, desativa os avisos de erro de localização. Se você usar uma expressão regular, você pode desligar os avisos de erro que correspondem à key (por exemplo, $t).

# silentFallbackWarn

🆕 Adicionado na versão 8.8+, 🆙 8.13

  • Tipo: Boolean | RegExp

  • Padrão: false

Desative os avisos ao retornar para fallback de fallbackLocale ou root.

Se true, os avisos serão gerados apenas quando nenhuma tradução estiver disponível, e não para os casos de fallbacks. +Se você usar uma expressão regular, poderá suprimir os avisos de fallback que correspondem à chave (por exemplo, $t).

# pluralizationRules

8.5+

  • Tipo: PluralizationRules

  • Padrão: {}

Um conjunto de regras para pluralização de palavras no seguinte formato:

  {
+    // Chave - a localidade para a qual a regra será aplicada.
+    // Valor - uma função para obter o índice da opção de pluralização a partir do número atual e o número especificado de opções. (Veja a função getChoiceIndex)
+    'pt': function(choice, choiceIndex) => Number/* índice da palavra em plural */;
+    'ru': function(choice, choiceIndex) => Number/* índice da palavra em plural */;
+    'en': function(choice, choiceIndex) => Number/* índice da palavra em plural */;
+    'jp': function(choice, choiceIndex) => Number/* índice da palavra em plural */;
+  }
+

# preserveDirectiveContent

Adicionado na versão 8.7+

  • Tipo: Boolean

  • Padrão: false

Determina se o elemento da diretiva v-t deve reter o textContent após a diretiva ser removida do elemento.

# warnHtmlInMessage

Adicionado na versão 8.11+

  • Tipo: WarnHtmlInMessageLevel

  • Padrão: off

Permitir ou não o uso de formatação HTML em mensagens de localização. Veja também a propriedade warnHtmlInMessage.

Atenção!

A partir da próxima versão principal, o valor padrão warnHtmlInMessage será warn.

# sharedMessages

Adicionado na versão 8.12+

  • Tipo: LocaleMessages

  • Padrão: undefined

Mensagens de localização comuns quando localizadas em componentes. Ver localização baseada em componentes para mais detalhes.

# postTranslation

Adicionado na versão 8.16+

  • Tipo: PostTranslationHandler

  • Padrão: null

Um manipulador para pós-processamento da tradução. Executado após chamar $t, t, $tc e tc.

Pode ser útil se você precisar processar adicionalmente o texto final da tradução, por exemplo, para eliminar os espaços e cortes de espaçamento.

# componentInstanceCreatedListener

Adicionado na versão 8.18+

  • Tipo: ComponentInstanceCreatedListener

  • Padrão: null

Um manipulador para receber uma notificação sobre a criação de uma instância local de um componente. O manipulador é chamado com instâncias VueI18n novas e antigas (raiz).

Este manipulador é útil ao estender a instância raiz do VueI18n e se deseja aplicar também essas extensões à instância local do componente.

# escapeParameterHtml

Adicionado na versão 8.22+

  • Tipo: Boolean

  • Padrão: false

Se escapeParameterHtml for definido como true, os parâmetros de interpolação serão escapados antes que a mensagem seja traduzida. Isso é útil quando o resultado da tradução é usado em v-html e o texto a ser traduzido contém marcação HTML (por exemplo, <b> em torno de um valor fornecido pelo usuário). Este padrão destina-se principalmente a casos em que strings de texto pré-compiladas para componentes de IU.

O processo de escape envolve a substituição dos seguintes símbolos por suas respectivas entidades de caracteres HTML: <, >, ", '.

Definir escapeParameterHtml como true não deve quebrar a funcionalidade existente, mas fornecerá proteção contra vetores de ataque XSS.

# Propriedades

# locale

  • Tipo: Locale

  • Leitura/Escrita

O local usado para localização. Se uma localidade contém um território e um dialeto, essa localidade contém um fallback implícito.

# fallbackLocale

  • Tipo: FallbackLocale

  • Leitura/Escrita

O local usado para localização de fallback. Para obter mais definições de fallback, consulte a seção [fallback](../ guide/fallback.md).

# messages

  • Tipo: LocaleMessages

  • Somente leitura

As mensagens de localização usadas para a localização da tradução.

# dateTimeFormats

🆕 Adicionado na versão 7.0+

  • Tipo: DateTimeFormats

  • Somente leitura

Formatação de data para localização.

# numberFormats

🆕 Adicionado na versão 7.0+

  • Tipo: NumberFormats

  • Somente leitura

Os formatos para formatação de números da localização.

# missing

  • Tipo: MissingHandler

  • Leitura/Escrita

Manipulador para chaves de localização ausentes.

# formatter

  • Tipo: Formatter

  • Leitura/Escrita

Um método de formatação que implementa a interface Formatter.

# silentTranslationWarn

6.1+, 🆙 8.13

  • Tipo: Boolean | RegExp

  • Leitura/Escrita

Desative os avisos exibidos em erros de localização.

# silentFallbackWarn

🆕 Adicionado na versão 8.8+, 🆙 8.13

  • Tipo: Boolean | RegExp

  • Leitura/Escrita

Desative os avisos de fallback quando a localização falha.

# pluralizationRules

8.5+

  • Tipo: PluralizationRules

  • Leitura/Escrita

Um conjunto de regras de pluralização dependentes da localidade.

# preserveDirectiveContent

Adicionado na versão 8.7+

  • Tipo: Boolean

  • Leitura/Escrita

Se o elemento da diretiva v-t deve preservar o textContent após a diretiva ser removida do elemento.

# warnHtmlInMessage

Adicionado na versão 8.11+

  • Tipo: WarnHtmlInMessageLevel

  • Leitura/Escrita

Permitir ou não o uso de formatação HTML em mensagens de localização.

Se você definir warn ou error, irá verificar as mensagens de localidade na instância VueI18n.

Se você definir warn um aviso será gerado no console.

Se você definir error gera o erro.

O valor padrão na instância VueI18n é definido como off.

# postTranslation

Adicionado na versão 8.16+

  • Tipo: PostTranslationHandler

  • Leitura/Escrita

Um manipulador para o pós-processamento da tradução.

# Métodos

# getChoiceIndex

  • Argumentos:

    • {number} choice
    • {number} choicesLength

  • Retorno: finalChoice {number}

Obter um índice para pluralizar o número atual e o número de opções fornecido. +A implementação pode ser substituída pela mutação do protótipo:

VueI18n.prototype.getChoiceIndex = /* implementação personalizada */
+

No entanto, na maioria dos casos, é suficiente passar a função desejada para a opção do construtor pluralizationRules.

# getLocaleMessage( locale )

  • Argumentos:

    • {Locale} locale

  • Retorno: LocaleMessageObject

Obtendo a mensagem da localidade.

# setLocaleMessage( locale, message )

  • Argumentos:

    • {Locale} locale
    • {LocaleMessageObject} message

Defina a mensagem de localidade.

NOTA

Adicionado na versão 8.11+

Se você definir warn ou error na propriedade warnHtmlInMessage, quando este método for executado, ele irá verificar se a formatação HTML é usada para mensagem local.

# mergeLocaleMessage( locale, message )

6.1+

  • Argumentos:

    • {Locale} locale
    • {LocaleMessageObject} message

Mesclar as mensagens de localidade registradas com a mensagem de localidade.

NOTA

Adicionado na versão 8.11+

Se você definir warn ou error na propriedade warnHtmlInMessage, quando este método for executado, ele irá verificar se a formatação HTML é usada para mensagem local.

# t( key, [locale], [values] )

  • Argumentos:

    • {Path} key: obrigatório
    • {Locale} locale: opcional
    • {Array | Object} values: opcional

  • Retorno: : TranslateResult

Semelhante à função retornada pelo método $t. Veja $t para detalhes.

# tc( key, [choice], [values] )

  • Argumentos:

    • {Path} key: obrigatório
    • {number} choice: opcional, padrão 1
    • {string | Array | Object} values: opcional

  • Retorno: TranslateResult

Semelhante à função retornada pelo método $tc. Veja $tc para detalhes.

# te( key, [locale] )

  • Argumentos:

    • {string} key: obrigatório
    • {Locale} locale: opcional

  • Retorno: boolean

Verifica se a chave especificada existe nas mensagens de localização global. Se você especificar locale, a verificação será feita nas mensagens de locale.

# getDateTimeFormat ( locale )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {Locale} locale

  • Retorno: DateTimeFormat

Obtenha o formato de data e hora do local.

# setDateTimeFormat ( locale, format )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {Locale} locale
    • {DateTimeFormat} format

Configurando formatos de formatação de data para localização.

# mergeDateTimeFormat ( locale, format )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {Locale} locale
    • {DateTimeFormat} format

Mescle os formatos de data e hora registrados com o formato de data e hora do local.

# d( value, [key], [locale] )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {number | Date} value: obrigatório
    • {Path | Object} key: opcional
    • {Locale | Object} locale: opcional

  • Retorno: DateTimeFormatResult

Semelhante à função retornada pelo método $d. Veja $d para detalhes.

# getNumberFormat ( locale )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {Locale} locale

  • Retorno: NumberFormat

Obtenha o formato de número da localidade.

# setNumberFormat ( locale, format )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {Locale} locale
    • {NumberFormat} format

Defina o formato de número do local.

# mergeNumberFormat ( locale, format )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {Locale} locale
    • {NumberFormat} format

Mescle os formatos de número registrados com o formato de número do local.

# n( value, [format], [locale] )

🆕 Adicionado na versão 7.0+

  • Argumentos:

    • {number} value: obrigatório
    • {Path | Object} format: opcional
    • {Locale} locale: opcional

  • Retorno: NumberFormatResult

Semelhante à função retornada pelo método $n. Veja $n para detalhes.

# Diretivas

🆕 Adicionado na versão 7.3+

# v-t

  • Aguarda: string | Object

  • Modificadores:

    • .preserve: (8.7.0+) preserva o textContent de um elemento quando a diretiva é desvinculada.

  • Detalhes:

Atualizar o textContent de um elemento que foi traduzido usando mensagens de localização. Você pode usar string ou sintaxe de objeto. A sintaxe da string pode ser especificada como o caminho para a mensagem de localização. Ao usar a sintaxe de objeto, você deve especificar as seguintes propriedades:

  • path: obrigatório, chave da mensagem de localização
  • locale: opcional, localização
  • args: opcional, para lista ou formatação nomeada

NOTA

O elemento textContent será limpo por padrão quando a diretiva v-t for desassociada. Isso pode ser uma situação indesejável quando usado dentro de transições (opens new window). Para preservar os dados textContent após a desvinculação da diretiva, use o modificador .preserve ou a opção global preserveDirectiveContent.

  • Exemplos:
<!-- sintaxe de string: literal -->
+<p v-t="'foo.bar'"></p>
+
+<!-- sintaxe de string: vinculação por meio de dados ou props computados -->
+<p v-t="msg"></p>
+
+<!-- sintaxe do objeto: literal -->
+<p v-t="{ path: 'hi', locale: 'pt', args: { name: 'kazupon' } }"></p>
+
+<!-- sintaxe do objeto: ligação por meio de dados ou props computados -->
+<p v-t="{ path: greeting, args: { name: fullName } }"></p>
+
+<!-- com o modificador de preservação -->
+<p v-t.preserve="'foo.bar'"></p>
+

# Componentes

# Componente funcional i18n

🆕 Adicionado na versão 7.0+

# Props:

  • path {Path}: obrigatório, caminho-chave de mensagens de localização
  • locale {Locale}: opcional, localização
  • tag {string | boolean | Object}: opcional, padrão 'span'
  • places {Array | Object}: opcional (7.2+)

Atenção!

A partir da próxima versão principal, a opção places será removida. Use a sintaxe de slot.

# Usando:

<div id="app">
+  <!-- ... -->
+  <i18n path="term" tag="label" for="tos">
+    <a :href="url" target="_blank">{{ $t('tos') }}</a>
+  </i18n>
+  <!-- ... -->
+</div>
+
const messages = {
+  en: {
+    tos: 'Term of Service',
+    term: 'I accept xxx {0}.'
+  },
+  pt: {
+    tos: 'Termos de serviço',
+    term: 'Eu concordo xxx {0}'.
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages
+})
+new Vue({
+  i18n,
+  data: {
+    url: '/term'
+  }
+}).$mount('#app')
+

# Veja também:

Componente de interpolação

# Componente funcional i18n-n

🆕 Adicionado na versão 8.10+

# Props:

  • value {number}: obrigatório, número para formatar
  • format {string | NumberFormatOptions}: opcional, nome de formato de número ou objeto com opções de formato explícito
  • locale {Locale}: opcional, localização
  • tag {string | boolean | Object}: opcional, padrão 'span'

# Usando:

<div id="app">
+  <!-- ... -->
+  <i18n-n :value="money" format="currency" tag="label">
+    <span v-slot:currency="slotProps" class="font-weight: bold">
+      {{ slotProps.currency }}
+    <span>
+  </i18n-n>
+  <!-- ... -->
+</div>
+
var numberFormats = {
+  'en-US': {
+    currency: {
+      style: 'currency',
+      currency: 'USD'
+    }
+  },
+  'pt-BR': {
+    currency: {
+      style: 'currency',
+      currency: 'BRL'
+    }
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en-US',
+  numberFormats
+})
+
+new Vue({
+  i18n,
+  data: {
+    money: 10234
+  }
+}).$mount('#app')
+

# Slots com escopo

O componente funcional <i18n-n> pode aceitar vários slots com escopo nomeado. A lista de nomes de slots suportados é baseada nos [Intl.NumberFormat.formatToParts() tipos de saída] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/formatToParts):

  • currency
  • decimal
  • fraction
  • group
  • infinity
  • integer
  • literal
  • minusSign
  • nan
  • plusSign
  • percentSign

Cada um desses slots com escopo nomeado aceitará três parâmetros de escopo:

  • [slotName] {FormattedNumberPartType}: parâmetro com o mesmo nome do nome do slot real (como integer)
  • index {Number}: índice da parte específica na matriz de partes numéricas
  • parts {Array}: array de todas as partes numéricas formatadas

# Veja também:

Formatação personalizada de números

# Atributos especiais

# place

🆕 Adicionado na versão 7.2+

# Aguarda: {number | string}

Usado ao interpolar um componente para especificar um índice para formatação de lista ou uma chave para formatação nomeada.

Mais sobre o uso na seção do link abaixo.

# Veja também:

Componente de interpolação