Merge branch 'master' of https://github.com/vuejs/docs-next

Author: ErickPetru

package.json

@@ -5,6 +5,7 @@
     "vuepress": "^1.5.4"
   },
   "scripts": {
+    "dev": "yarn serve",
     "serve": "vuepress dev src",
     "build": "vuepress build src"
   },

src/.vuepress/components/VideoLesson.vue

@@ -0,0 +1,50 @@
+<script>
+export default {
+  props: {
+    href: {
+      type: String,
+      required: true
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="video-lesson">
+    <a :href="href" target="_blank" rel="sponsored noopener" :title="title">
+      <slot></slot>
+    </a>
+  </section>
+</template>
+
+<style lang="scss">
+.video-lesson {
+  display: flex;
+  align-items: center;
+  background-color: #e7ecf3;
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  color: #486491;
+  position: relative;
+  margin: 24px 0;
+
+  a {
+    color: #486491;
+    position: relative;
+    padding-left: 16px;
+  }
+
+  &::before {
+    content: '\f144';
+    font-family: 'FontAwesome';
+    font-size: 2em;
+    display: inline-block;
+    color: #73abfe;
+    vertical-align: middle;
+  }
+}
+</style>

src/.vuepress/components/common/vuemastery-video-modal.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="overlay" v-show="isOpen">
     <div ref="modal" class="modal" :class="{ open: isOpen }">
-      <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
+      <div
+        class="video-space"
+        style="padding: 56.25% 0 0 0; position: relative;"
+      >
         <iframe
           src="https://player.vimeo.com/video/455611549?dnt=1"
           style="height: 100%; left: 0; position: absolute; top: 0; width: 100%; margin: 0"
           frameborder="0"
           webkitallowfullscreen
           mozallowfullscreen
           allowfullscreen
+          allow="autoplay"
           ref="videoIframe"
         ></iframe>
       </div>
@@ -20,14 +24,15 @@
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Vue Mastery</a>.
-        Watch Vue Mastery’s free
+          >Vue Mastery</a
+        >. Watch Vue Mastery’s free
         <a
           href="https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3"
           target="_blank"
           rel="sponsored noopener"
           title="Vue.js Courses on Vue Mastery"
-        >Intro to Vue course</a>.
+          >Intro to Vue course</a
+        >.
       </p>
     </div>
   </div>
@@ -47,7 +52,7 @@ export default {
   }),
 
   methods: {
-    initVideoModal () {
+    initVideoModal() {
       const modalButton = document.querySelector(this.triggerSelector)
       const player = new Vimeo.Player(this.$refs.videoIframe)
 
@@ -59,7 +64,11 @@ export default {
       })
 
       document.body.addEventListener('click', event => {
-        if (this.isOpen && event.target !== modalButton && !this.$refs.modal.contains(event.target)) {
+        if (
+          this.isOpen &&
+          event.target !== modalButton &&
+          !this.$refs.modal.contains(event.target)
+        ) {
           this.isOpen = false
           document.body.classList.remove('stop-scroll')
           player.pause()
@@ -68,7 +77,7 @@ export default {
     }
   },
 
-  mounted () {
+  mounted() {
     if (typeof window !== 'undefined') {
       this.initVideoModal()
     }
@@ -77,7 +86,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "@theme/styles/_settings.scss";
+@import '@theme/styles/_settings.scss';
 
 .modal {
   box-sizing: border-box;

src/.vuepress/config.js

@@ -107,10 +107,11 @@ const sidebar = {
       ]
     },
     {
-      title: 'Migration from Vue 2',
+      title: 'Migration Guide',
       collapsable: true,
       children: [
         'migration/introduction',
+        'migration/array-refs',
         'migration/async-components',
         'migration/attribute-coercion',
         'migration/custom-directives',
@@ -125,10 +126,13 @@ const sidebar = {
         'migration/inline-template-attribute',
         'migration/key-attribute',
         'migration/keycode-modifiers',
+        'migration/props-default-this',
         'migration/render-function-api',
         'migration/slots-unification',
         'migration/transition',
-        'migration/v-model'
+        'migration/v-model',
+        'migration/v-if-v-for',
+        'migration/v-bind'
       ]
     },
     {
@@ -235,6 +239,10 @@ module.exports = {
             text: 'Guide',
             link: '/guide/introduction'
           },
+          {
+            text: 'Migration Guide',
+            link: '/guide/migration/introduction'
+          },
           {
             text: 'Style Guide',
             link: '/style-guide/'
@@ -280,7 +288,7 @@ module.exports = {
             text: 'Official Projects',
             items: [{
                 text: 'Vue Router',
-                link: 'https://router.vuejs.org/'
+                link: 'https://next.router.vuejs.org/'
               },
               {
                 text: 'Vuex',
@@ -292,7 +300,7 @@ module.exports = {
               },
               {
                 text: 'Vue Test Utils',
-                link: 'https://vue-test-utils.vuejs.org/'
+                link: 'https://vuejs.github.io/vue-test-utils-next-docs/guide/introduction.html'
               },
               {
                 text: 'Devtools',

src/.vuepress/styles/index.styl

@@ -125,31 +125,6 @@
   }
 }
 
-.scrimba,
-.vueschool {
-  background-color: #e7ecf3;
-  padding: 1em 1.25em;
-  border-radius: 2px;
-  color: #486491;
-  position: relative;
-  margin: 24px 0;
-
-  a {
-    color: #486491;
-    position: relative;
-    padding-left :16px;
-  }
-
-  &::before {
-    content: "\f144";
-    font-family: 'FontAwesome';
-    font-size: 2em;
-    display: inline-block;
-    color: #73abfe;
-    vertical-align: middle;
-  }
-}
-
 .sidebar-group.is-sub-group > .sidebar-heading:not(.clickable) {
   font-size: inherit;
   cursor: pointer!important;

src/api/computed-watch-api.md

@@ -65,7 +65,7 @@ function watchEffect(
 ): StopHandle
 
 interface WatchEffectOptions {
-  flush?: 'pre' | 'post' | 'sync'
+  flush?: 'pre' | 'post' | 'sync' // default: 'pre'
   onTrack?: (event: DebuggerEvent) => void
   onTrigger?: (event: DebuggerEvent) => void
 }

src/api/global-api.md

@@ -192,12 +192,16 @@ const AsyncComp = defineAsyncComponent({
   // The error component will be displayed if a timeout is
   // provided and exceeded. Default: Infinity.
   timeout: 3000,
-  // A function that returns a boolean indicating whether the async component should retry when the loader promise rejects
-  retryWhen: error => error.code !== 404,
-  // Maximum allowed retries number
-  maxRetries: 3,
   // Defining if component is suspensible
-  suspensible: false
+  suspensible: false,
+  /**
+   *
+   * @param {*} error Error message object
+   * @param {*} retry A function that indicating whether the async component should retry when the loader promise rejects
+   * @param {*} fail  End of failure
+   * @param {*} attempts Maximum allowed retries number
+   */
+  onError(error, retry, fail, attempts) {},
 })
 ```
 

src/api/options-assets.md

@@ -8,6 +8,22 @@
 
   A hash of directives to be made available to the component instance.
 
+- **Usage:**
+  ```js
+  const app = Vue.createApp({})
+  
+  app.component('focused-input', {
+    directives: {
+      focus: {
+        mounted(el) {
+          el.focus()
+        }
+      }
+    },
+    template: `<input v-focus>`
+  })
+  ```
+
 - **See also:** [Custom Directives](../guide/custom-directive.html)
 
 ## components
@@ -18,4 +34,18 @@
 
   A hash of components to be made available to the component instance.
 
+- **Usage:**
+  ```js
+  const Foo = {
+    template: `<div>Foo</div>`
+  }
+  
+  const app = Vue.createApp({
+    components: {
+      Foo
+    },
+    template: `<Foo />`
+  })
+  ```
+
 - **See also:** [Components](../guide/component-basics.html)

src/api/special-attributes.md

@@ -63,8 +63,6 @@ For example:
 ```html
 <!-- component changes when currentView changes -->
 <component :is="currentView"></component>
-
-For detailed usage, follow the links in the description above.
 ```
 
 - **See also:**

src/guide/component-custom-events.md

@@ -23,6 +23,8 @@ For these reasons, we recommend you **always use kebab-case for event names**.
 
 ## Defining Custom Events
 
+<VideoLesson href="https://vueschool.io/lessons/defining-custom-events-emits?friend=vuejs" title="Learn how to define which events a component can emit with Vue School">Watch a free video about Defining Custom Events on Vue School</VideoLesson>
+
 Emitted events can be defined on the component via the `emits` option.
 
 ```js