Skip to content

Commit

Permalink
Documentation improvemation (#1104)
Browse files Browse the repository at this point in the history
* initial translate at config page

* docs translate in Portuguese

* adjustment spacing and translate save

* reduce svg sendcloud and improvement viewBox

* improvement img alt, size and reflect information languages

* docs: installation reflect information to languages

* docs: legacy, api reflect information to languages

* Adjustment clean of the patreon occurrences

* docs: guide compoment page reflect information in languages

* docs: guide datetime page reflect information in languages

* docs: guide directive page reflect information in languages

* docs: guide fallback page reflect information in languages

* docs: guide hot-reload page reflect information in languages

* docs: guide interpolation page reflect information in languages

* docs: guide lazy-loading page reflect information in languages

* docs: guide locale page reflect information in languages

* docs: guide messages page reflect information in languages

* docs: guide number page reflect information in languages

* docs: guide pluralization page reflect information in languages

* adjustment link for default pluralization

* docs: guide sfc adjustment example scoped style and reflect information in languages

* docs: guide tooling page reflect information in languages
  • Loading branch information
lucasferreiralimax authored Jan 17, 2021
1 parent 92a54e7 commit 6c0c3b0
Show file tree
Hide file tree
Showing 61 changed files with 1,620 additions and 771 deletions.
55 changes: 5 additions & 50 deletions vuepress/.vuepress/public/patrons/sendcloud.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 7 additions & 7 deletions vuepress/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,42 +16,42 @@ footer: MIT Licensed | Copyright © 2020 kazuya kawaguchi
>
<img
src="/vue-i18n/patrons/nuxt.png"
style="display: inline-block; vertical-align: middle;"
alt="Nuxt.js"
/>
</a>
<h4 style="padding: 12px 0 0 0;">🥈 Silver Sponsors</h4>
<a
href="https://www.codeandweb.com/babeledit?utm_campaign=vue-i18n-2019-01"
style="width:320px; display: inline-block; vertical-align: middle;"
style="max-width: 320px; width: 100%; display: inline-block; vertical-align: middle;"
target="_blank"
rel="noopener"
>
<img
src="/vue-i18n/patrons/babeledit.png"
style="width:320px; display: inline-block; vertical-align: middle;"
alt="BabelEdit translation editor for apps (web apps)"
/>
</a>
<h4 style="padding: 12px 0 0 0;">🥉 Bronze Sponsors</h4>
<a
href="https://zenarchitects.co.jp/"
style="width:200px; display: inline-block; vertical-align: middle;"
style="max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;"
target="_blank"
rel="noopener"
>
<img
src="/vue-i18n/patrons/zenarchitects.png"
style="width:200px; display: inline-block; vertical-align: middle;"
alt="zenarchitects"
/>
</a>
<a
href="https://www.sendcloud.com/"
style="width:200px; display: inline-block; vertical-align: middle;"
style="max-width: 200px; width: 100%; height: 80px; display: inline-block; vertical-align: middle;"
target="_blank"
rel="noopener"
>
<img
src="/vue-i18n/patrons/sendcloud.svg"
style="width:200px; display: inline-block; vertical-align: middle;"
alt="sendcloud"
/>
</a>
</div>
Expand Down
24 changes: 21 additions & 3 deletions vuepress/api/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ Component based localization option.
* `{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](../guide/formatting.md).
Expand All @@ -43,6 +44,7 @@ Note that you need to guarantee this context equal to component instance in life
* `{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.
Expand All @@ -57,6 +59,7 @@ Note that you need to guarantee this context equal to component instance in life

* `{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`.
Expand All @@ -74,6 +77,7 @@ Note that you need to guarantee this context equal to component instance in life
* `{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.
Expand All @@ -93,6 +97,7 @@ Note that you need to guarantee this context equal to component instance in life
* `{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.
Expand Down Expand Up @@ -315,6 +320,7 @@ If you use regular expression, you can suppress the fallback warnings that it ma
{
// 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 */;
Expand Down Expand Up @@ -511,6 +517,7 @@ Whether to allow the use locale messages of HTML formatting.
If you set `warn` or` error`, 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.
Expand All @@ -530,6 +537,7 @@ A handler for post processing of translation.
#### getChoiceIndex
* **Arguments:**
* `{number} choice`
* `{number} choicesLength`
Expand All @@ -549,6 +557,7 @@ However, for most usages [pluralizationRules constructor option](#pluralizationr
* **Arguments:**
* `{Locale} locale`
* **Return:** `LocaleMessageObject`
Get the locale message of locale.
Expand Down Expand Up @@ -592,6 +601,7 @@ If you set `warn` or` error` in the `warnHtmlInMessage` property, when this meth
* `{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](#t).
Expand All @@ -603,6 +613,7 @@ This is the same as the `Function` returned with `$t` method. More detail see [$
* `{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](#tc).
Expand All @@ -613,6 +624,7 @@ This is the same as the `Function` returned `$tc` method. More detail see [$tc](
* `{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`.
Expand All @@ -624,6 +636,7 @@ Check whether key path exists in global locale message. If you specified `locale
* **Arguments:**
* `{Locale} locale`
* **Return:** `DateTimeFormat`
Get the datetime format of locale.
Expand Down Expand Up @@ -659,6 +672,7 @@ Merge the registered datetime formats with the datetime format of locale.
* `{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](#d).
Expand All @@ -670,6 +684,7 @@ This is the same as `$d` method of Vue instance method. More detail see [$d](#d)
* **Arguments:**
* `{Locale} locale`
* **Return:** `NumberFormat`
Get the number format of locale.
Expand Down Expand Up @@ -705,6 +720,7 @@ Merge the registered number formats with the number format of locale.
* `{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](#n).
Expand All @@ -725,14 +741,16 @@ This is the same as `$n` method of Vue instance method. More detail see [$n](#n)
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
* `path`: required, key of locale messages
* `locale`: optional, locale
* `args`: optional, for list or named formatting
:::tip NOTE
The element `textContent` will be cleared by default when `v-t` directive is unbinded. This might be undesirable situation when used inside [transitions](https://vuejs.org/v2/guide/transitions.html). To preserve `textContent` data after directive unbind use `.preserve` modifier or global [`preserveDirectiveContent` option](#preservedirectivecontent).
:::
* **Examples:**
```html
<!-- string syntax: literal -->
<p v-t="'foo.bar'"></p>
Expand Down
14 changes: 7 additions & 7 deletions vuepress/guide/component.md
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ Sometimes you may want to import shared locale messages for certain components,
You can use `sharedMessages` options of `i18n`.

Common Locale Messages example:

```js
export default {
en: {
Expand Down Expand Up @@ -121,7 +122,9 @@ export default {
<p>This is good service</p>
</div>
<div class="footer">
<button type="button">{{ $t('buttons.save') }}</button>
<button type="button">
{{ $t('buttons.save') }}
</button>
</div>
</div>
`,
Expand All @@ -137,16 +140,13 @@ If `sharedMessages` option is specified along with the `messages` option, those

## Translation in functional component

When using a functional component, all data (including props, children, slots, parent, etc.) is passed through the `context` containing the attributes, and it doesn't recognize the `this` scope, so when using the vue-i18n on functional components, you must refer to `$t` as `parent.$t`, check the example below:
When using a functional component, all data (including `props`, `children`, `slots`, `parent`, etc.) is passed through the `context` containing the attributes, and it doesn't recognize the `this` scope, so when using the vue-i18n on functional components, you must refer to `$t` as `parent.$t`, check the example below:

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

0 comments on commit 6c0c3b0

Please sign in to comment.