Japanese translation (Guide section)

.vitepress/config.js

@@ -6,13 +6,14 @@ import locales from "./locales"
 export default {
  srcDir: 'src',
  locales: locales.vitepressConfig,
- 
+
 
  themeConfig: {
  localeLinks: {
  items: [
  {text: 'English', link: '/'},
- {text: '中文简体', link: '/zh/'}
+ {text: '中文简体', link: '/zh/'},
+ {text: '日本語（翻訳中）', link: '/ja/'},
  ]
  },
  locales: locales.themeConfig

.vitepress/locales/index.js

@@ -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,
  }
-}
+}

.vitepress/locales/ja.js

@@ -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' }
+ ]
+ }
+ ]
+ }
+}

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

@@ -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)