Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #39 from jay-es/ja-1
Japanese translation (Guide section)
- Loading branch information
Showing
39 changed files
with
3,657 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,16 @@ | ||
import en from './en' | ||
import zh from './zh' | ||
import ja from './ja' | ||
|
||
export default { | ||
vitepressConfig: { | ||
'/': en.vitepressConfig, | ||
'/zh/': zh.vitepressConfig | ||
'/zh/': zh.vitepressConfig, | ||
'/ja/': ja.vitepressConfig, | ||
}, | ||
themeConfig: { | ||
'/': en.themeConfig, | ||
'/zh/': zh.themeConfig | ||
'/zh/': zh.themeConfig, | ||
'/ja/': ja.themeConfig, | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,164 @@ | ||
export default { | ||
vitepressConfig: { | ||
title: 'Vue 3 移行ガイド', | ||
description: 'Vue 2 から Vue 3 への移行に関するガイド', | ||
lang: 'ja-JP', | ||
}, | ||
themeConfig: { | ||
docFooter: { | ||
prev: '前のページ', | ||
next: '次のページ', | ||
}, | ||
outlineTitle: 'ページの内容', | ||
nav: [ | ||
{ text: 'Vue 3 ドキュメント', link: 'https://ja.vuejs.org' }, | ||
], | ||
|
||
sidebar: [ | ||
{ | ||
text: 'ガイド', | ||
items: [ | ||
{ text: '概要', link: '/ja/' }, | ||
{ text: '新しい推奨事項', link: '/ja/recommendations' }, | ||
{ text: '移行ビルド', link: '/ja/migration-build' }, | ||
{ | ||
text: '破壊的変更', | ||
link: '/ja/breaking-changes/' | ||
} | ||
] | ||
}, | ||
{ | ||
text: 'Global API', | ||
items: [ | ||
{ | ||
text: 'Global API Application Instance', | ||
link: '/ja/breaking-changes/global-api' | ||
}, | ||
{ | ||
text: 'Global API Treeshaking', | ||
link: '/ja/breaking-changes/global-api-treeshaking' | ||
} | ||
] | ||
}, | ||
{ | ||
text: 'Template Directives', | ||
items: [ | ||
{ text: 'v-model', link: '/ja/breaking-changes/v-model' }, | ||
{ | ||
text: 'key Usage Change', | ||
link: '/ja/breaking-changes/key-attribute' | ||
}, | ||
{ | ||
text: 'v-if vs. v-for Precedence', | ||
link: '/ja/breaking-changes/v-if-v-for' | ||
}, | ||
{ text: 'v-bind Merge Behavior', link: '/ja/breaking-changes/v-bind' }, | ||
{ | ||
text: 'v-on.native modifier removed', | ||
link: '/ja/breaking-changes/v-on-native-modifier-removed' | ||
} | ||
] | ||
}, | ||
{ | ||
text: 'Components', | ||
items: [ | ||
{ | ||
text: 'Functional Components', | ||
link: '/ja/breaking-changes/functional-components' | ||
}, | ||
{ | ||
text: 'Async Components', | ||
link: '/ja/breaking-changes/async-components' | ||
}, | ||
{ text: 'emits Option', link: '/ja/breaking-changes/emits-option' } | ||
] | ||
}, | ||
{ | ||
text: 'Render Function', | ||
items: [ | ||
{ | ||
text: 'Render Function API', | ||
link: '/ja/breaking-changes/render-function-api' | ||
}, | ||
{ | ||
text: 'Slots Unification', | ||
link: '/ja/breaking-changes/slots-unification' | ||
}, | ||
{ | ||
text: '$listeners merged into $attrs', | ||
link: '/ja/breaking-changes/listeners-removed' | ||
}, | ||
{ | ||
text: '$attrs includes class & style', | ||
link: '/ja/breaking-changes/attrs-includes-class-style' | ||
} | ||
] | ||
}, | ||
{ | ||
text: 'Custom Elements', | ||
items: [ | ||
{ | ||
text: 'Custom Elements Interop Changes', | ||
link: '/ja/breaking-changes/custom-elements-interop' | ||
} | ||
] | ||
}, | ||
{ | ||
text: 'Removed APIs', | ||
items: [ | ||
{ | ||
text: 'v-on keyCode Modifiers', | ||
link: '/ja/breaking-changes/keycode-modifiers' | ||
}, | ||
{ text: 'Events API', link: '/ja/breaking-changes/events-api' }, | ||
{ text: 'Filters', link: '/ja/breaking-changes/filters' }, | ||
{ | ||
text: 'inline-template', | ||
link: '/ja/breaking-changes/inline-template-attribute' | ||
}, | ||
{ text: '$children', link: '/ja/breaking-changes/children' }, | ||
{ text: 'propsData option', link: '/ja/breaking-changes/props-data' } | ||
] | ||
}, | ||
{ | ||
text: 'Other Minor Changes', | ||
items: [ | ||
{ | ||
text: 'Attribute Coercion Behavior', | ||
link: '/ja/breaking-changes/attribute-coercion' | ||
}, | ||
{ | ||
text: 'Custom Directives', | ||
link: '/ja/breaking-changes/custom-directives' | ||
}, | ||
{ text: 'Data Option', link: '/ja/breaking-changes/data-option' }, | ||
{ | ||
text: 'Mount API changes', | ||
link: '/ja/breaking-changes/mount-changes' | ||
}, | ||
{ | ||
text: 'Props Default Function this Access', | ||
link: '/ja/breaking-changes/props-default-this' | ||
}, | ||
{ | ||
text: 'Transition Class Change', | ||
link: '/ja/breaking-changes/transition' | ||
}, | ||
{ | ||
text: 'Transition as Root', | ||
link: '/ja/breaking-changes/transition-as-root' | ||
}, | ||
{ | ||
text: 'Transition Group Root Element', | ||
link: '/ja/breaking-changes/transition-group' | ||
}, | ||
{ | ||
text: 'VNode lifecycle events', | ||
link: '/ja/breaking-changes/vnode-lifecycle-events' | ||
}, | ||
{ text: 'Watch on Arrays', link: '/ja/breaking-changes/watch' } | ||
] | ||
} | ||
] | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,98 @@ | ||
--- | ||
badges: | ||
- new | ||
--- | ||
|
||
# Async Components <MigrationBadges :badges="$frontmatter.badges" /> | ||
|
||
## Overview | ||
|
||
Here is a high level overview of what has changed: | ||
|
||
- New `defineAsyncComponent` helper method that explicitly defines async components | ||
- `component` option renamed to `loader` | ||
- Loader function does not inherently receive `resolve` and `reject` arguments and must return a Promise | ||
|
||
For a more in-depth explanation, read on! | ||
|
||
## Introduction | ||
|
||
Previously, async components were created by simply defining a component as a function that returned a promise, such as: | ||
|
||
```js | ||
const asyncModal = () => import('./Modal.vue') | ||
``` | ||
|
||
Or, for the more advanced component syntax with options: | ||
|
||
```js | ||
const asyncModal = { | ||
component: () => import('./Modal.vue'), | ||
delay: 200, | ||
timeout: 3000, | ||
error: ErrorComponent, | ||
loading: LoadingComponent | ||
} | ||
``` | ||
|
||
## 3.x Syntax | ||
|
||
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: | ||
|
||
```js | ||
import { defineAsyncComponent } from 'vue' | ||
import ErrorComponent from './components/ErrorComponent.vue' | ||
import LoadingComponent from './components/LoadingComponent.vue' | ||
|
||
// Async component without options | ||
const asyncModal = defineAsyncComponent(() => import('./Modal.vue')) | ||
|
||
// Async component with options | ||
const asyncModalWithOptions = defineAsyncComponent({ | ||
loader: () => import('./Modal.vue'), | ||
delay: 200, | ||
timeout: 3000, | ||
errorComponent: ErrorComponent, | ||
loadingComponent: LoadingComponent | ||
}) | ||
``` | ||
|
||
::: tip NOTE | ||
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. | ||
::: | ||
|
||
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. | ||
|
||
```js{4} | ||
import { defineAsyncComponent } from 'vue' | ||
const asyncModalWithOptions = defineAsyncComponent({ | ||
loader: () => import('./Modal.vue'), | ||
delay: 200, | ||
timeout: 3000, | ||
errorComponent: ErrorComponent, | ||
loadingComponent: LoadingComponent | ||
}) | ||
``` | ||
|
||
In addition, unlike 2.x, the loader function no longer receives the `resolve` and `reject` arguments and must always return a Promise. | ||
|
||
```js | ||
// 2.x version | ||
const oldAsyncComponent = (resolve, reject) => { | ||
/* ... */ | ||
} | ||
|
||
// 3.x version | ||
const asyncComponent = defineAsyncComponent( | ||
() => | ||
new Promise((resolve, reject) => { | ||
/* ... */ | ||
}) | ||
) | ||
``` | ||
|
||
For more information on the usage of async components, see: | ||
|
||
- [Guide: Async Components](https://ja.vuejs.org/guide/components/async.html) | ||
- [Migration build flag: `COMPONENT_ASYNC`](../migration-build.html#compat-configuration) |
Oops, something went wrong.