Skip to content

docs: not use deprecated api #2013

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 13, 2024
Merged

docs: not use deprecated api #2013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2f57ab2
docs: not use deprecated api
kazupon Nov 13, 2024
baf2b4d
fix: e2e
kazupon Nov 13, 2024
55527a7
fix
kazupon Nov 13, 2024
fb3db3e
fix
kazupon Nov 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docs/.ja/guide/advanced/function.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,12 +188,12 @@ const messages = {
Template:

```html
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', { count: 10 }, 10) }}</p>
```

Output is the below:
Expand All @@ -207,4 +207,4 @@ Output is the below:
<p>10 apples</p>
```

You need to specify the key that resolves the value specified with `$tc` or `tc`.
You need to specify the key that resolves the value specified with `$t` or `t`.
4 changes: 2 additions & 2 deletions docs/.ja/guide/essentials/pluralization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Vue I18nでは、いくつかの複数化の方法が提供されます。ここ

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

上の`$tc`の使用例では、第1引数にロケールメッセージキー、第2引数に数字を指定しています。
Expand Down Expand Up @@ -96,7 +96,7 @@ const messages = {

<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
<p>{{ $tc('banana', 1) }}</p>
<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>
<p>{{ $tc('banana', { n: 'too many' }, 100) }}</p>
```

上記の例では、第1引数にロケールメッセージのキー、第2引数に数値またはオブジェクトを指定しています。
Expand Down
12 changes: 6 additions & 6 deletions docs/guide/advanced/function.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,12 +188,12 @@ const messages = {
Template:

```html
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', { count: 10 }, 10) }}</p>
```

Output is the below:
Expand All @@ -207,4 +207,4 @@ Output is the below:
<p>10 apples</p>
```

You need to specify the key that resolves the value specified with `$tc` or `tc`.
You need to specify the key that resolves the value specified with `$t` or `t`.
47 changes: 23 additions & 24 deletions docs/guide/essentials/pluralization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,34 +25,33 @@ The `car` has `car | cars` pluralization message, while the `apple` has `no appl

These plural messages are selected by the logic of the choice rule for each language in the translaton API according to the numeric value you specify at the translation API.

Vue I18n offers some ways to support pluralization. Here we’ll use the `$tc`.
Vue I18n offers some ways to support pluralization. Here we’ll use the `$t`.

:::tip NOTE
`$tc` has some overloads. About these overloads, see the [API Reference](../../api/injection#tc-key)
`$t` has some overloads. About these overloads, see the [API Reference](../../api/injection#t-key)
:::

:::tip NOTE
Some ways to support pluralization are:

- `$tc` (for Legacy API mode)
- injected gloal `$t`
- `v-t` custom directive
- built-in Translation component (`i18n-t`)
- exported `t` from `useI18n` (for Composition API mode)
- injected global `$t` (for Composition API mode)
:::

The following is an example of using the translation API.

```html
<p>{{ $tc('car', 1) }}</p>
<p>{{ $tc('car', 2) }}</p>
<p>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>

<p>{{ $tc('apple', 0) }}</p>
<p>{{ $tc('apple', 1) }}</p>
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
<p>{{ $t('apple', 0) }}</p>
<p>{{ $t('apple', 1) }}</p>
<p>{{ $t('apple', 10, { count: 10 }) }}</p>
```

In the above example of using the `$tc`, the first argument is the locale messages key and the second argument is a number. The `$tc` returns the choice message as a result.
In the above example of using the `$t`, the first argument is the locale messages key and the second argument is a number. The `$t` returns the choice message as a result.

As result the below:

Expand Down Expand Up @@ -91,12 +90,12 @@ The number can be accessed within locale messages via predefined named arguments
The following is an example of using `$tc`:

```html
<p>{{ $tc('apple', 10, { count: 10 }) }}</p>
<p>{{ $tc('apple', 10) }}</p>
<p>{{ $t('apple', 10, { count: 10 }) }}</p>
<p>{{ $t('apple', 10) }}</p>

<p>{{ $tc('banana', 1, { n: 1 }) }}</p>
<p>{{ $tc('banana', 1) }}</p>
<p>{{ $tc('banana', 100, { n: 'too many' }) }}</p>
<p>{{ $t('banana', 1, { n: 1 }) }}</p>
<p>{{ $t('banana', 1) }}</p>
<p>{{ $t('banana', 100, { n: 'too many' }) }}</p>
```

In the above some examples, the first argument is the locale messages key and the second argument is the numeric value or object.
Expand Down Expand Up @@ -169,17 +168,17 @@ With the following template:

```html
<h2>Car:</h2>
<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>{{ $t('car', 1) }}</p>
<p>{{ $t('car', 2) }}</p>
<p>{{ $t('car', 4) }}</p>
<p>{{ $t('car', 12) }}</p>
<p>{{ $t('car', 21) }}</p>

<h2>Banana:</h2>
<p>{{ $tc('banana', 0) }}</p>
<p>{{ $tc('banana', 4) }}</p>
<p>{{ $tc('banana', 11) }}</p>
<p>{{ $tc('banana', 31) }}</p>
<p>{{ $t('banana', 0) }}</p>
<p>{{ $t('banana', 4) }}</p>
<p>{{ $t('banana', 11) }}</p>
<p>{{ $t('banana', 31) }}</p>
```

As result the below:
Expand Down
18 changes: 9 additions & 9 deletions examples/legacy/functions/plural.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<body>
<div id="app">
<h2>Car:</h2>
<p class="p1">{{ $tc('car', 1) }}</p>
<p class="p2">{{ $tc('car', 2) }}</p>
<p class="p1">{{ $t('car', 1) }}</p>
<p class="p2">{{ $t('car', 2) }}</p>
<h2>Apple:</h2>
<p class="p3">{{ $tc('apple', 0) }}</p>
<p class="p4">{{ $tc('apple', 1) }}</p>
<p class="p5">{{ $tc('apple', 10, { count: 10 }) }}</p>
<p class="p6">{{ $tc('apple', 10) }}</p>
<p class="p3">{{ $t('apple', 0) }}</p>
<p class="p4">{{ $t('apple', 1) }}</p>
<p class="p5">{{ $t('apple', { count: 10 }, 10) }}</p>
<p class="p6">{{ $t('apple', 10) }}</p>
<h2>Banana:</h2>
<p class="p7">{{ $tc('banana', 1, { n: 1 }) }}</p>
<p class="p8">{{ $tc('banana', 1) }}</p>
<p class="p9">{{ $tc('banana', 100, { n: 'too many' }) }}</p>
<p class="p7">{{ $t('banana', { n: 1 }, 1) }}</p>
<p class="p8">{{ $t('banana', 1) }}</p>
<p class="p9">{{ $t('banana', { n: 'too many' }, 100) }}</p>
</div>
<script>
const { createApp } = Vue
Expand Down
18 changes: 9 additions & 9 deletions examples/legacy/plural/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<body>
<div id="app">
<h2>Car:</h2>
<p class="p1">{{ $tc('car', 1) }}</p>
<p class="p2">{{ $tc('car', 2) }}</p>
<p class="p1">{{ $t('car', 1) }}</p>
<p class="p2">{{ $t('car', 2) }}</p>
<h2>Apple:</h2>
<p class="p3">{{ $tc('apple', 0) }}</p>
<p class="p4">{{ $tc('apple', 1) }}</p>
<p class="p5">{{ $tc('apple', 10, { count: 10 }) }}</p>
<p class="p6">{{ $tc('apple', 10) }}</p>
<p class="p3">{{ $t('apple', 0) }}</p>
<p class="p4">{{ $t('apple', 1) }}</p>
<p class="p5">{{ $t('apple', { count: 10 }, 10) }}</p>
<p class="p6">{{ $t('apple', 10) }}</p>
<h2>Banana:</h2>
<p class="p7">{{ $tc('banana', 1, { n: 1 }) }}</p>
<p class="p8">{{ $tc('banana', 1) }}</p>
<p class="p9">{{ $tc('banana', 100, { n: 'too many' }) }}</p>
<p class="p7">{{ $t('banana', { n: 1 }, 1) }}</p>
<p class="p8">{{ $t('banana', 1) }}</p>
<p class="p9">{{ $t('banana', { n: 'too many' }, 10) }}</p>
</div>
<script>
const { createApp } = Vue
Expand Down
18 changes: 9 additions & 9 deletions examples/legacy/plural/custom.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,17 @@
<body>
<div id="app">
<h2>Car:</h2>
<p class="p1">{{ $tc('car', 1) }}</p>
<p class="p2">{{ $tc('car', 2) }}</p>
<p class="p3">{{ $tc('car', 4) }}</p>
<p class="p4">{{ $tc('car', 12) }}</p>
<p class="p5">{{ $tc('car', 21) }}</p>
<p class="p1">{{ $t('car', 1) }}</p>
<p class="p2">{{ $t('car', 2) }}</p>
<p class="p3">{{ $t('car', 4) }}</p>
<p class="p4">{{ $t('car', 12) }}</p>
<p class="p5">{{ $t('car', 21) }}</p>

<h2>Banana:</h2>
<p class="p6">{{ $tc('banana', 0) }}</p>
<p class="p7">{{ $tc('banana', 4) }}</p>
<p class="p8">{{ $tc('banana', 11) }}</p>
<p class="p9">{{ $tc('banana', 31) }}</p>
<p class="p6">{{ $t('banana', 0) }}</p>
<p class="p7">{{ $t('banana', 4) }}</p>
<p class="p8">{{ $t('banana', 11) }}</p>
<p class="p9">{{ $t('banana', 31) }}</p>
</div>
<script>
const { createApp } = Vue
Expand Down