Skip to content

Commit 4f67b2c

Browse files
kazuponkazupon
committed
docs: updates
1 parent 72f4a9b commit 4f67b2c

File tree

5 files changed

+182
-170
lines changed

5 files changed

+182
-170
lines changed

‎docs/.vitepress/config.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ const config = {
203203
]
204204
},
205205
{
206-
text: 'Migration from Vue 2',
206+
text: 'Migrations',
207207
collapsable: false,
208208
children: [
209209
{
@@ -215,8 +215,12 @@ const config = {
215215
link: '/guide/migration/features'
216216
},
217217
{
218-
text: 'Migration ways',
219-
link: '/guide/migration/ways'
218+
text: 'Migration from Vue 2',
219+
link: '/guide/migration/vue2'
220+
},
221+
{
222+
text: 'Migration in Vue 3',
223+
link: '/guide/migration/vue3'
220224
}
221225
]
222226
},
@@ -386,7 +390,7 @@ const config = {
386390
]
387391
},
388392
{
389-
text: 'Migration from Vue 2',
393+
text: 'Migrations',
390394
collapsable: false,
391395
children: [
392396
{
@@ -398,8 +402,12 @@ const config = {
398402
link: '/ja/guide/migration/features'
399403
},
400404
{
401-
text: 'Migration ways',
402-
link: '/ja/guide/migration/ways'
405+
text: 'Migration from Vue 2',
406+
link: '/guide/migration/vue2'
407+
},
408+
{
409+
text: 'Migration in Vue 3',
410+
link: '/guide/migration/vue3'
403411
}
404412
]
405413
},

‎docs/guide/migration/ways.md‎ renamed to ‎docs/guide/migration/vue2.md‎

Lines changed: 1 addition & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Migration ways
1+
# Migration from Vue 2
22

33
## `vue-i18n-bridge`
44

@@ -230,84 +230,3 @@ About how to usage, See the [here](https://github.com/intlify/vue-i18n-composabl
230230
:::warning NOTICE
231231
`vue-i18n-composable` allows the main API of Vue I18n v8.x to work with the Composition API. All of Composition API provided in Vue I18n v9 are not available.
232232
:::
233-
234-
## Migration to Composition API from Legacy API
235-
236-
### Summary
237-
238-
Vue I18n supports both styles which are Legacy API mode and Composiyion API mode. Legacy API mode is Options API style, and Composition API mode support Vue Composition API that is able to compose with function.
239-
240-
Legacy API mode is almost compatible with legacy Vue I18n v8.x, making it relatively easy to migrate Vue applications to Vue 3. Vue 3 supports the Options API style, so existing Vue 2 applications will be cases where applications will be migrated to Vue 3.
241-
242-
Vue 3 allows you to make Vue applications using a mix of the Options API style and Composition API style, but Vue I18n has not allowed for a mix of these API styles since the v9 initial release, so you can use either one or the other API style only.
243-
244-
Developing a Vue application with a mix of Options API styles and Compostion API styles is not a desirable software development project from a maintenance standpoint. This is because the cost of maintaining such code is high. However, there are advantages to using both styles. In particular, API style migration is easier to migrate step-by-step, since it works even when implemented in both API styles.
245-
246-
From Vue I18n v9.2, the Legacy API mode can also be used with Composition API mode.
247-
248-
### Limitations
249-
250-
**The Composition API in Legacy API mode does not support SSR**, So You should understand as a limited feature for migration.
251-
252-
### How to migration
253-
254-
#### `createI18n`
255-
256-
You need specify `allowComposition: true` to `createI18n` otpions. the below example:
257-
258-
```js
259-
import { createI18n } from 'vue-i18n'
260-
261-
const i18n = createI18n({
262-
locale: 'en',
263-
allowCompositoin: true, // you need to specify that!
264-
messages: {
265-
en: {
266-
hello: 'hello!'
267-
},
268-
ja: {
269-
hello: 'こんにちは！'
270-
}
271-
}
272-
})
273-
274-
console.log(i18n.allowComposition) // output is true
275-
```
276-
277-
### `useI18n` in Vue Component
278-
#### `setup` option
279-
280-
```vue
281-
<script>
282-
import { defineComponent } from 'vue'
283-
import { useI18n } from 'vue-i18n'
284-
285-
export default defineComponent({
286-
name: 'Hello',
287-
setup() {
288-
const { t } = useI18n() // use as global scope
289-
return { t }
290-
}
291-
})
292-
</script>
293-
294-
<template>
295-
<p>{{ $t('hello') }}</p>
296-
<p>{{ t('hello') }}</p>
297-
</template>
298-
```
299-
300-
#### `<script setup>`
301-
302-
```vue
303-
<script setup>
304-
import { useI18n } from 'vue-i18n'
305-
306-
const { t } = useI18n() // use as global scope
307-
</script>
308-
309-
<template>
310-
<p>{{ $t('hello') }}</p>
311-
<p>{{ t('hello') }}</p>
312-
</template>
313-
```

‎docs/guide/migration/vue3.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# Migration in Vue 3
2+
3+
## Migration to Composition API from Legacy API
4+
5+
### Summary
6+
7+
Vue I18n supports both styles which are Legacy API mode and Composiyion API mode. Legacy API mode is Options API style, and Composition API mode support Vue Composition API that is able to compose with function.
8+
9+
Legacy API mode is almost compatible with legacy Vue I18n v8.x, making it relatively easy to migrate Vue applications to Vue 3. Vue 3 supports the Options API style, so existing Vue 2 applications will be cases where applications will be migrated to Vue 3.
10+
11+
Vue 3 allows you to make Vue applications using a mix of the Options API style and Composition API style, but Vue I18n has not allowed for a mix of these API styles since the v9 initial release, so you can use either one or the other API style only.
12+
13+
Developing a Vue application with a mix of Options API styles and Compostion API styles is not a desirable software development project from a maintenance standpoint. This is because the cost of maintaining such code is high. However, there are advantages to using both styles. In particular, API style migration is easier to migrate step-by-step, since it works even when implemented in both API styles.
14+
15+
From Vue I18n v9.2, the Legacy API mode can also be used with Composition API mode.
16+
17+
### Limitations
18+
19+
**The Composition API in Legacy API mode does not support SSR**, So You should understand as a limited feature for migration.
20+
21+
### How to migration
22+
23+
#### `createI18n`
24+
25+
You need specify `allowComposition: true` to `createI18n` otpions. the below example:
26+
27+
```js
28+
import { createI18n } from 'vue-i18n'
29+
30+
const i18n = createI18n({
31+
locale: 'en',
32+
allowCompositoin: true, // you need to specify that!
33+
messages: {
34+
en: {
35+
hello: 'hello!'
36+
},
37+
ja: {
38+
hello: 'こんにちは！'
39+
}
40+
}
41+
})
42+
43+
console.log(i18n.allowComposition) // output is true
44+
```
45+
46+
### `useI18n` in Vue Component
47+
#### `setup` option
48+
49+
```vue
50+
<script>
51+
import { defineComponent } from 'vue'
52+
import { useI18n } from 'vue-i18n'
53+
54+
export default defineComponent({
55+
name: 'Hello',
56+
setup() {
57+
const { t } = useI18n() // use as global scope
58+
return { t }
59+
}
60+
})
61+
</script>
62+
63+
<template>
64+
<p>{{ $t('hello') }}</p>
65+
<p>{{ t('hello') }}</p>
66+
</template>
67+
```
68+
69+
#### `<script setup>`
70+
71+
```vue
72+
<script setup>
73+
import { useI18n } from 'vue-i18n'
74+
75+
const { t } = useI18n() // use as global scope
76+
</script>
77+
78+
<template>
79+
<p>{{ $t('hello') }}</p>
80+
<p>{{ t('hello') }}</p>
81+
</template>
82+
```

‎docs/ja/guide/migration/ways.md‎ renamed to ‎docs/ja/guide/migration/vue2.md‎

Lines changed: 1 addition & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Migration ways
1+
# Migration from Vue 2
22

33

44

@@ -199,84 +199,3 @@ About how to usage, See the [here](https://github.com/intlify/vue-i18n-composabl
199199
:::warning NOTICE
200200
`vue-i18n-composable` allows the main API of Vue I18n v8.x to work with the Composition API. All of Composition API provided in Vue I18n v9 are not available.
201201
:::
202-
203-
## Migration to Composition API from Legacy API
204-
205-
### Summary
206-
207-
Vue I18n supports both styles which are Legacy API mode and Composiyion API mode. Legacy API mode is Options API style, and Composition API mode support Vue Composition API that is able to compose with function.
208-
209-
Legacy API mode is almost compatible with legacy Vue I18n v8.x, making it relatively easy to migrate Vue applications to Vue 3. Vue 3 supports the Options API style, so existing Vue 2 applications will be cases where applications will be migrated to Vue 3.
210-
211-
Vue 3 allows you to make Vue applications using a mix of the Options API style and Composition API style, but Vue I18n has not allowed for a mix of these API styles since the v9 initial release, so you can use either one or the other API style only.
212-
213-
Developing a Vue application with a mix of Options API styles and Compostion API styles is not a desirable software development project from a maintenance standpoint. This is because the cost of maintaining such code is high. However, there are advantages to using both styles. In particular, API style migration is easier to migrate step-by-step, since it works even when implemented in both API styles.
214-
215-
From Vue I18n v9.2, the Legacy API mode can also be used with Composition API mode.
216-
217-
### Limitations
218-
219-
**The Composition API in Legacy API mode does not support SSR**, So You should understand as a limited feature for migration.
220-
221-
### How to migration
222-
223-
#### `createI18n`
224-
225-
You need specify `allowComposition: true` to `createI18n` otpions. the below example:
226-
227-
```js
228-
import { createI18n } from 'vue-i18n'
229-
230-
const i18n = createI18n({
231-
locale: 'en',
232-
allowCompositoin: true, // you need to specify that!
233-
messages: {
234-
en: {
235-
hello: 'hello!'
236-
},
237-
ja: {
238-
hello: 'こんにちは！'
239-
}
240-
}
241-
})
242-
243-
console.log(i18n.allowComposition) // output is true
244-
```
245-
246-
### `useI18n` in Vue Component
247-
#### `setup` option
248-
249-
```vue
250-
<script>
251-
import { defineComponent } from 'vue'
252-
import { useI18n } from 'vue-i18n'
253-
254-
export default defineComponent({
255-
name: 'Hello',
256-
setup() {
257-
const { t } = useI18n() // use as global scope
258-
return { t }
259-
}
260-
})
261-
</script>
262-
263-
<template>
264-
<p>{{ $t('hello') }}</p>
265-
<p>{{ t('hello') }}</p>
266-
</template>
267-
```
268-
269-
#### `<script setup>`
270-
271-
```vue
272-
<script setup>
273-
import { useI18n } from 'vue-i18n'
274-
275-
const { t } = useI18n() // use as global scope
276-
</script>
277-
278-
<template>
279-
<p>{{ $t('hello') }}</p>
280-
<p>{{ t('hello') }}</p>
281-
</template>
282-
```

‎docs/ja/guide/migration/vue3.md‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Migration in Vue 3
2+
3+
4+
5+
## Migration to Composition API from Legacy API
6+
7+
### Summary
8+
9+
Vue I18n supports both styles which are Legacy API mode and Composiyion API mode. Legacy API mode is Options API style, and Composition API mode support Vue Composition API that is able to compose with function.
10+
11+
Legacy API mode is almost compatible with legacy Vue I18n v8.x, making it relatively easy to migrate Vue applications to Vue 3. Vue 3 supports the Options API style, so existing Vue 2 applications will be cases where applications will be migrated to Vue 3.
12+
13+
Vue 3 allows you to make Vue applications using a mix of the Options API style and Composition API style, but Vue I18n has not allowed for a mix of these API styles since the v9 initial release, so you can use either one or the other API style only.
14+
15+
Developing a Vue application with a mix of Options API styles and Compostion API styles is not a desirable software development project from a maintenance standpoint. This is because the cost of maintaining such code is high. However, there are advantages to using both styles. In particular, API style migration is easier to migrate step-by-step, since it works even when implemented in both API styles.
16+
17+
From Vue I18n v9.2, the Legacy API mode can also be used with Composition API mode.
18+
19+
### Limitations
20+
21+
**The Composition API in Legacy API mode does not support SSR**, So You should understand as a limited feature for migration.
22+
23+
### How to migration
24+
25+
#### `createI18n`
26+
27+
You need specify `allowComposition: true` to `createI18n` otpions. the below example:
28+
29+
```js
30+
import { createI18n } from 'vue-i18n'
31+
32+
const i18n = createI18n({
33+
locale: 'en',
34+
allowCompositoin: true, // you need to specify that!
35+
messages: {
36+
en: {
37+
hello: 'hello!'
38+
},
39+
ja: {
40+
hello: 'こんにちは！'
41+
}
42+
}
43+
})
44+
45+
console.log(i18n.allowComposition) // output is true
46+
```
47+
48+
### `useI18n` in Vue Component
49+
#### `setup` option
50+
51+
```vue
52+
<script>
53+
import { defineComponent } from 'vue'
54+
import { useI18n } from 'vue-i18n'
55+
56+
export default defineComponent({
57+
name: 'Hello',
58+
setup() {
59+
const { t } = useI18n() // use as global scope
60+
return { t }
61+
}
62+
})
63+
</script>
64+
65+
<template>
66+
<p>{{ $t('hello') }}</p>
67+
<p>{{ t('hello') }}</p>
68+
</template>
69+
```
70+
71+
#### `<script setup>`
72+
73+
```vue
74+
<script setup>
75+
import { useI18n } from 'vue-i18n'
76+
77+
const { t } = useI18n() // use as global scope
78+
</script>
79+
80+
<template>
81+
<p>{{ $t('hello') }}</p>
82+
<p>{{ t('hello') }}</p>
83+
</template>
84+
```

0 commit comments

Comments
 (0)