Skip to content

Commit 6f3b385

Browse files
kazuponkazupon
committed
update docs
1 parent 08357d3 commit 6f3b385

19 files changed

+262
-110
lines changed

‎README.md

Lines changed: 47 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,30 @@ If you use stable Vue I18n version, see this [repository](https://github.com/kaz
3333

3434
New style API for Vue 3. See the following docs:
3535

36-
- [createI18nComposer](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.createi18ncomposer.md)
37-
- [I18nComposerOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18ncomposeroptions.md)
38-
- [I18nComposer](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18ncomposer.md)
36+
- [createI18n](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.createi18n.md)
37+
- [I18nOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.i18noptions.md)
38+
- [ComposerOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.composeroptions.md)
39+
- [VueI18nOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.vuei18noptions.md)
3940
- [useI18n](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.usei18n.md)
41+
- [ComposerOptions](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.composeroptions.md)
42+
- [Composer](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.composer.md)
43+
- [VueI18n](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.vuei18n.md)
44+
45+
### `<i18n-t>` Component (formerly called `<i18n>` component)
46+
47+
You can use pluralalization on the component. See the blow examples:
48+
49+
- [Example with using Composable API](https://github.com/intlify/vue-i18n-next/blob/master/examples/composable/components/translation.html)
50+
- [Example with using Legacy API](https://github.com/intlify/vue-i18n-next/blob/master/examples/legacy/components/translation.html)
51+
52+
### `<i18n-d>` Component
53+
54+
You can use datetime format on the component, like `<i18n-n>` component.
55+
56+
See the below examples:
57+
58+
- [Example with using Composable API](https://github.com/intlify/vue-i18n-next/blob/master/examples/composable/components/datetime-format.html)
59+
- [Example with using Legacy API](https://github.com/intlify/vue-i18n-next/blob/master/examples/legacy/components/datetime-format.html)
4060

4161

4262
## :lollipop: Examples
@@ -46,27 +66,35 @@ See the [`examples`](https://github.com/intlify/vue-i18n-next/tree/master/exampl
4666
The examples are offered that use the following two API styles:
4767

4868
- composable
49-
- new vue-i18n API optimized for Vue 3. details about API
69+
- Examples with using new vue-i18n API optimized for Vue 3
5070
- legacy
51-
- vue-i18n API almost compatible with vue-i18n v8.x
71+
- Examples with using vue-i18n API that almost compatible with vue-i18n v8.x
5272

5373

5474
## :heavy_exclamation_mark: Known issues
5575

5676
### :boom: Breaking changes compared to vue-i18n v8.x
5777

58-
- API
59-
- The return value of `$t` and `t` methods is **string** only. object and array values ​​are no longer returned.
60-
- The return value of `$tc` and `tc` methods is **string** only. object and array values ​​are no longer returned.
61-
- `VueI18n` class cannot used with `new`. It can only be used via the `$i18n` property of Vue instance.
62-
- In vue-i18n-next, by replacing `new VueI18n` with `createI18n`, you can use existing `VueI18n` options as they are.
63-
- See the `examples/legacy` directory.
64-
- `VueI18n.prototype.getChoiceIndex`
65-
- -> Legacy API style: `pluralizationRules` option of `createI18n` factory function (like `new VueI18n(...)`)
66-
- -> Compsable API style: `pluralRules` option of `createI18nComposer` facatory function
67-
- `VueI18n.version` -> `import { VERSION } from 'vue-i18n'`
68-
- `VueI18n.availabilities` -> `import { availabilities } from 'vue-i18n'`
69-
- See the details [here](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.md)
78+
#### APIs
79+
- The return value of `$t` and `t` methods is **string** only. object and array values ​​are no longer returned.
80+
- The return value of `$tc` and `tc` methods is **string** only. object and array values ​​are no longer returned.
81+
- `VueI18n` class cannot used with `new`. It can only be used via the `$i18n` property of Vue instance.
82+
- In vue-i18n-next, by replacing `new VueI18n` with `createI18n`, you can use existing `VueI18n` options as they are.
83+
- See the `examples/legacy` directory.
84+
- `VueI18n.prototype.getChoiceIndex`
85+
- -> Legacy API style: `pluralizationRules` option of `createI18n` factory function (like `new VueI18n(...)`)
86+
- -> Compsable API style: `pluralRules` option of `createI18nComposer` facatory function
87+
- `VueI18n.version` -> `import { VERSION } from 'vue-i18n'`
88+
- `VueI18n.availabilities` -> `import { availabilities } from 'vue-i18n'`
89+
- See the details [here](https://github.com/intlify/vue-i18n-next/blob/master/docs/vue-i18n.md)
90+
91+
#### Components
92+
- `<i18n>` component
93+
- Renamte to `<i18n-t>` component
94+
- Remove the below props:
95+
- `place` prop
96+
- `places` prop
97+
- `path` prop (Rename to `keypath` prop)
7098

7199
### :zap: Improvements
72100

@@ -75,18 +103,13 @@ The examples are offered that use the following two API styles:
75103

76104
### :hammer: Missing features
77105

78-
- imporve `fallbackLocale` or `fallbackLocales` (related vue-i18n [issue](https://github.com/kazupon/vue-i18n/pull/829))
79-
- `<i18n>` custom block supporting for SFC
80106
- `v-t` directive
81107
- `preserveDirectiveContent` option (depend on `v-t`)
82-
- Compoonent interpolation with `<i18n>` component
83-
- Number custom formatting with `<i18n-n>` component
84108
- HTML format suppression with `warnHtmlInMessage` option
85109
- SSR
86110
- Custom formatting
87111
- Tooling
88112
- `vue-cli-plugin-i18n`
89-
- `@intlify/vue-i18n-loader`
90113
- `@intlify/rollup-plugin-vue-i18n`
91114
- `@intlify/vue-i18n-extensions`
92115
- `@intlify/eslint-plugin-vue-i18n`
@@ -203,7 +226,8 @@ yarn add vue-i18n@next
203226
- [x] IntlAvailability availabilities
204227
- Components
205228
- [x] Translation `<i18n-t>`
206-
- [x] Numberization `<i18n-n>`
229+
- [x] NumberFormat `<i18n-n>`
230+
- [x] DatetimeFormat `<i18n-d>`
207231
- Directive
208232
- [ ] `v-t`
209233
- Tool Chains

‎docs/vue-i18n.i18ncomposer.md renamed to ‎docs/vue-i18n.composer.md

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
22

3-
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [I18nComposer](./vue-i18n.i18ncomposer.md)
3+
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [Composer](./vue-i18n.composer.md)
44

5-
## I18nComposer type
5+
## Composer type
66

7-
I18n Composer Interfaces
7+
Composer Interfaces
88

99
<b>Signature:</b>
1010

1111
```typescript
12-
export declare type I18nComposer = {
12+
export declare type Composer = {
1313
locale: WritableComputedRef<Locale>;
14-
fallbackLocales: WritableComputedRef<Locale[]>;
14+
fallbackLocale: WritableComputedRef<FallbackLocale>;
1515
readonly availableLocales: Locale[];
1616
readonly messages: ComputedRef<LocaleMessages>;
1717
readonly datetimeFormats: ComputedRef<DateTimeFormats>;
@@ -22,6 +22,7 @@ export declare type I18nComposer = {
2222
fallbackWarn: boolean | RegExp;
2323
fallbackRoot: boolean;
2424
fallbackFormat: boolean;
25+
__id: number;
2526
t(key: Path): string;
2627
t(key: Path, plural: number): string;
2728
t(key: Path, plural: number, options: TranslateOptions): string;
@@ -60,5 +61,8 @@ export declare type I18nComposer = {
6061
getMissingHandler(): MissingHandler | null;
6162
setMissingHandler(handler: MissingHandler | null): void;
6263
install: Plugin;
64+
__transrateVNode(...args: unknown[]): unknown;
65+
__numberParts(...args: unknown[]): string | Intl.NumberFormatPart[];
66+
__datetimeParts(...args: unknown[]): string | Intl.DateTimeFormatPart[];
6367
};
6468
```

‎docs/vue-i18n.i18ncomposeroptions.md renamed to ‎docs/vue-i18n.composeroptions.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
22

3-
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [I18nComposerOptions](./vue-i18n.i18ncomposeroptions.md)
3+
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [ComposerOptions](./vue-i18n.composeroptions.md)
44

5-
## I18nComposerOptions type
5+
## ComposerOptions type
66

7-
I18n Composer Options
7+
Composer Options
88

99
<b>Signature:</b>
1010

1111
```typescript
12-
export declare type I18nComposerOptions = {
12+
export declare type ComposerOptions = {
1313
locale?: Locale;
14-
fallbackLocales?: Locale[];
14+
fallbackLocale?: FallbackLocale;
1515
messages?: LocaleMessages;
1616
datetimeFormats?: DateTimeFormats;
1717
numberFormats?: NumberFormats;
@@ -24,6 +24,6 @@ export declare type I18nComposerOptions = {
2424
fallbackFormat?: boolean;
2525
postTranslation?: PostTranslationHandler;
2626
__i18n?: CustomBlocks;
27-
_root?: I18nComposer;
27+
__root?: Composer;
2828
};
2929
```

‎docs/vue-i18n.createi18n.md

Lines changed: 73 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,90 @@
44

55
## createI18n() function
66

7-
createI18n factory
8-
9-
This function is compatible with constructor of `VueI18n` class (offered with vue-i18n<!-- -->@<!-- -->8.x) like `new VueI18n(...)`<!-- -->.
7+
I18n factory
108

119
<b>Signature:</b>
1210

1311
```typescript
14-
export declare function createI18n(options?: VueI18nOptions): VueI18n;
12+
export declare function createI18n(options?: I18nOptions): Composer | VueI18n;
1513
```
1614

1715
## Parameters
1816

1917
| Parameter | Type | Description |
2018
| --- | --- | --- |
21-
| options | <code>VueI18nOptions</code> | |
19+
| options | <code>I18nOptions</code> | see the [I18nOptions](./vue-i18n.i18noptions.md) |
2220

2321
<b>Returns:</b>
2422

25-
`VueI18n`
23+
`Composer | VueI18n`
24+
25+
[Composer](./vue-i18n.composer.md) object, or [VueI18n](./vue-i18n.vuei18n.md) object
26+
27+
## Remarks
28+
29+
When you use Composable API, you need to specify options of [ComposerOptions](./vue-i18n.composeroptions.md)<!-- -->. When you use Legacy API, you need toto specify options of [VueI18nOptions](./vue-i18n.vuei18noptions.md) and `legacy: true`<!-- -->.
30+
31+
## Example 1
32+
33+
case: for Composable API
34+
35+
```js
36+
import { createApp } from 'vue'
37+
import { createI18n, useI18n } from 'vue-i18n'
38+
39+
// call with I18n option
40+
const i18n = createI18n({
41+
locale: 'ja',
42+
messages: {
43+
en: { ... },
44+
ja: { ... }
45+
}
46+
})
47+
48+
const App = {
49+
setup() {
50+
// ...
51+
const { t } = useI18n({ ... })
52+
return { ... , t }
53+
}
54+
}
55+
56+
const app = createApp(App)
57+
58+
// install!
59+
app.use(i18n)
60+
app.mount('#app')
61+
62+
```
63+
64+
## Example 2
65+
66+
case: for Legacy API
67+
68+
```js
69+
import { createApp } from 'vue'
70+
import { createI18n } from 'vue-i18n'
71+
72+
// call with I18n option
73+
const i18n = createI18n({
74+
legacy: true, // you must specify 'lagacy: true' option
75+
locale: 'ja',
76+
messages: {
77+
en: { ... },
78+
ja: { ... }
79+
}
80+
})
81+
82+
const App = {
83+
// ...
84+
}
85+
86+
const app = createApp(App)
87+
88+
// install!
89+
app.use(i18n)
90+
app.mount('#app')
91+
92+
```
2693

‎docs/vue-i18n.createi18ncomposer.md

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎docs/vue-i18n.fallbacklocale.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [FallbackLocale](./vue-i18n.fallbacklocale.md)
4+
5+
## FallbackLocale type
6+
7+
<b>Signature:</b>
8+
9+
```typescript
10+
export declare type FallbackLocale = Locale | Locale[] | {
11+
[locale in string]: Locale[];
12+
} | false;
13+
```

‎docs/vue-i18n.i18noptions.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [I18nOptions](./vue-i18n.i18noptions.md)
4+
5+
## I18nOptions type
6+
7+
I18n Options
8+
9+
[createI18n()](./vue-i18n.createi18n.md) factory option.
10+
11+
<b>Signature:</b>
12+
13+
```typescript
14+
export declare type I18nOptions = {
15+
legacy?: boolean;
16+
} & (ComposerOptions | VueI18nOptions);
17+
```
18+
19+
## Remarks
20+
21+
`I18nOptions` is union type of [ComposerOptions](./vue-i18n.composeroptions.md) and [VueI18nOptions](./vue-i18n.vuei18noptions.md)<!-- -->, so you can specify these options.
22+

‎docs/vue-i18n.i18npluginoptions.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [I18nPluginOptions](./vue-i18n.i18npluginoptions.md)
4+
5+
## I18nPluginOptions type
6+
7+
<b>Signature:</b>
8+
9+
```typescript
10+
export declare type I18nPluginOptions = {
11+
'i18n-t'?: string;
12+
};
13+
```

‎docs/vue-i18n.linkedmodifiers.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
2+
3+
[Home](./index.md) &gt; [vue-i18n](./vue-i18n.md) &gt; [LinkedModifiers](./vue-i18n.linkedmodifiers.md)
4+
5+
## LinkedModifiers type
6+
7+
<b>Signature:</b>
8+
9+
```typescript
10+
export declare type LinkedModifiers = {
11+
[key: string]: LinkedModify;
12+
};
13+
```

0 commit comments

Comments
 (0)