Skip to content

Commit aa2c452

Browse files
kazuponkazupon
authored
Merge pull request #39 from jay-es/ja-1
Japanese translation (Guide section)
2 parents 96242eb + fce34a6 commit aa2c452

39 files changed

+3657
-5
lines changed

‎.vitepress/config.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import locales from "./locales"
66
export default {
77
srcDir: 'src',
88
locales: locales.vitepressConfig,
9-
9+
1010

1111
themeConfig: {
1212
localeLinks: {
1313
items: [
1414
{text: 'English', link: '/'},
15-
{text: '中文简体', link: '/zh/'}
15+
{text: '中文简体', link: '/zh/'},
16+
{text: '日本語（翻訳中）', link: '/ja/'},
1617
]
1718
},
1819
locales: locales.themeConfig

‎.vitepress/locales/index.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import en from './en'
22
import zh from './zh'
3+
import ja from './ja'
34

45
export default {
56
vitepressConfig: {
67
'/': en.vitepressConfig,
7-
'/zh/': zh.vitepressConfig
8+
'/zh/': zh.vitepressConfig,
9+
'/ja/': ja.vitepressConfig,
810
},
911
themeConfig: {
1012
'/': en.themeConfig,
11-
'/zh/': zh.themeConfig
13+
'/zh/': zh.themeConfig,
14+
'/ja/': ja.themeConfig,
1215
}
13-
}
16+
}

‎.vitepress/locales/ja.js‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
export default {
2+
vitepressConfig: {
3+
title: 'Vue 3 移行ガイド',
4+
description: 'Vue 2 から Vue 3 への移行に関するガイド',
5+
lang: 'ja-JP',
6+
},
7+
themeConfig: {
8+
docFooter: {
9+
prev: '前のページ',
10+
next: '次のページ',
11+
},
12+
outlineTitle: 'ページの内容',
13+
nav: [
14+
{ text: 'Vue 3 ドキュメント', link: 'https://ja.vuejs.org' },
15+
],
16+
17+
sidebar: [
18+
{
19+
text: 'ガイド',
20+
items: [
21+
{ text: '概要', link: '/ja/' },
22+
{ text: '新しい推奨事項', link: '/ja/recommendations' },
23+
{ text: '移行ビルド', link: '/ja/migration-build' },
24+
{
25+
text: '破壊的変更',
26+
link: '/ja/breaking-changes/'
27+
}
28+
]
29+
},
30+
{
31+
text: 'Global API',
32+
items: [
33+
{
34+
text: 'Global API Application Instance',
35+
link: '/ja/breaking-changes/global-api'
36+
},
37+
{
38+
text: 'Global API Treeshaking',
39+
link: '/ja/breaking-changes/global-api-treeshaking'
40+
}
41+
]
42+
},
43+
{
44+
text: 'Template Directives',
45+
items: [
46+
{ text: 'v-model', link: '/ja/breaking-changes/v-model' },
47+
{
48+
text: 'key Usage Change',
49+
link: '/ja/breaking-changes/key-attribute'
50+
},
51+
{
52+
text: 'v-if vs. v-for Precedence',
53+
link: '/ja/breaking-changes/v-if-v-for'
54+
},
55+
{ text: 'v-bind Merge Behavior', link: '/ja/breaking-changes/v-bind' },
56+
{
57+
text: 'v-on.native modifier removed',
58+
link: '/ja/breaking-changes/v-on-native-modifier-removed'
59+
}
60+
]
61+
},
62+
{
63+
text: 'Components',
64+
items: [
65+
{
66+
text: 'Functional Components',
67+
link: '/ja/breaking-changes/functional-components'
68+
},
69+
{
70+
text: 'Async Components',
71+
link: '/ja/breaking-changes/async-components'
72+
},
73+
{ text: 'emits Option', link: '/ja/breaking-changes/emits-option' }
74+
]
75+
},
76+
{
77+
text: 'Render Function',
78+
items: [
79+
{
80+
text: 'Render Function API',
81+
link: '/ja/breaking-changes/render-function-api'
82+
},
83+
{
84+
text: 'Slots Unification',
85+
link: '/ja/breaking-changes/slots-unification'
86+
},
87+
{
88+
text: '$listeners merged into $attrs',
89+
link: '/ja/breaking-changes/listeners-removed'
90+
},
91+
{
92+
text: '$attrs includes class & style',
93+
link: '/ja/breaking-changes/attrs-includes-class-style'
94+
}
95+
]
96+
},
97+
{
98+
text: 'Custom Elements',
99+
items: [
100+
{
101+
text: 'Custom Elements Interop Changes',
102+
link: '/ja/breaking-changes/custom-elements-interop'
103+
}
104+
]
105+
},
106+
{
107+
text: 'Removed APIs',
108+
items: [
109+
{
110+
text: 'v-on keyCode Modifiers',
111+
link: '/ja/breaking-changes/keycode-modifiers'
112+
},
113+
{ text: 'Events API', link: '/ja/breaking-changes/events-api' },
114+
{ text: 'Filters', link: '/ja/breaking-changes/filters' },
115+
{
116+
text: 'inline-template',
117+
link: '/ja/breaking-changes/inline-template-attribute'
118+
},
119+
{ text: '$children', link: '/ja/breaking-changes/children' },
120+
{ text: 'propsData option', link: '/ja/breaking-changes/props-data' }
121+
]
122+
},
123+
{
124+
text: 'Other Minor Changes',
125+
items: [
126+
{
127+
text: 'Attribute Coercion Behavior',
128+
link: '/ja/breaking-changes/attribute-coercion'
129+
},
130+
{
131+
text: 'Custom Directives',
132+
link: '/ja/breaking-changes/custom-directives'
133+
},
134+
{ text: 'Data Option', link: '/ja/breaking-changes/data-option' },
135+
{
136+
text: 'Mount API changes',
137+
link: '/ja/breaking-changes/mount-changes'
138+
},
139+
{
140+
text: 'Props Default Function this Access',
141+
link: '/ja/breaking-changes/props-default-this'
142+
},
143+
{
144+
text: 'Transition Class Change',
145+
link: '/ja/breaking-changes/transition'
146+
},
147+
{
148+
text: 'Transition as Root',
149+
link: '/ja/breaking-changes/transition-as-root'
150+
},
151+
{
152+
text: 'Transition Group Root Element',
153+
link: '/ja/breaking-changes/transition-group'
154+
},
155+
{
156+
text: 'VNode lifecycle events',
157+
link: '/ja/breaking-changes/vnode-lifecycle-events'
158+
},
159+
{ text: 'Watch on Arrays', link: '/ja/breaking-changes/watch' }
160+
]
161+
}
162+
]
163+
}
164+
}

‎src/ja/breaking-changes/async-components.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
badges:
3+
- new
4+
---
5+
6+
# Async Components <MigrationBadges :badges="$frontmatter.badges" />
7+
8+
## Overview
9+
10+
Here is a high level overview of what has changed:
11+
12+
- New `defineAsyncComponent` helper method that explicitly defines async components
13+
- `component` option renamed to `loader`
14+
- Loader function does not inherently receive `resolve` and `reject` arguments and must return a Promise
15+
16+
For a more in-depth explanation, read on!
17+
18+
## Introduction
19+
20+
Previously, async components were created by simply defining a component as a function that returned a promise, such as:
21+
22+
```js
23+
const asyncModal = () => import('./Modal.vue')
24+
```
25+
26+
Or, for the more advanced component syntax with options:
27+
28+
```js
29+
const asyncModal = {
30+
component: () => import('./Modal.vue'),
31+
delay: 200,
32+
timeout: 3000,
33+
error: ErrorComponent,
34+
loading: LoadingComponent
35+
}
36+
```
37+
38+
## 3.x Syntax
39+
40+
Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new `defineAsyncComponent` helper:
41+
42+
```js
43+
import { defineAsyncComponent } from 'vue'
44+
import ErrorComponent from './components/ErrorComponent.vue'
45+
import LoadingComponent from './components/LoadingComponent.vue'
46+
47+
// Async component without options
48+
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))
49+
50+
// Async component with options
51+
const asyncModalWithOptions = defineAsyncComponent({
52+
loader: () => import('./Modal.vue'),
53+
delay: 200,
54+
timeout: 3000,
55+
errorComponent: ErrorComponent,
56+
loadingComponent: LoadingComponent
57+
})
58+
```
59+
60+
::: tip NOTE
61+
Vue Router supports a similar mechanism for asynchronously loading route components, known as *lazy loading*. Despite the similarities, this feature is distinct from Vue's support for async components. You should **not** use `defineAsyncComponent` when configuring route components with Vue Router. You can read more about this in the [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) section of the Vue Router documentation.
62+
:::
63+
64+
Another change that has been made from 2.x is that the `component` option is now renamed to `loader` in order to accurately communicate that a component definition cannot be provided directly.
65+
66+
```js{4}
67+
import { defineAsyncComponent } from 'vue'
68+
69+
const asyncModalWithOptions = defineAsyncComponent({
70+
loader: () => import('./Modal.vue'),
71+
delay: 200,
72+
timeout: 3000,
73+
errorComponent: ErrorComponent,
74+
loadingComponent: LoadingComponent
75+
})
76+
```
77+
78+
In addition, unlike 2.x, the loader function no longer receives the `resolve` and `reject` arguments and must always return a Promise.
79+
80+
```js
81+
// 2.x version
82+
const oldAsyncComponent = (resolve, reject) => {
83+
/* ... */
84+
}
85+
86+
// 3.x version
87+
const asyncComponent = defineAsyncComponent(
88+
() =>
89+
new Promise((resolve, reject) => {
90+
/* ... */
91+
})
92+
)
93+
```
94+
95+
For more information on the usage of async components, see:
96+
97+
- [Guide: Async Components](https://ja.vuejs.org/guide/components/async.html)
98+
- [Migration build flag: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration)

0 commit comments

Comments
 (0)