From eb63bde32b8c7254119423c1c7ba04ccd4f38132 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sun, 19 Apr 2020 19:30:10 +0300
Subject: [PATCH 01/15] feat: started with Global Config API

---
 src/.vuepress/config.js  | 53 ++++++++++++++++++-----------------
 src/api/global-config.md | 60 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 25 deletions(-)
 create mode 100644 src/api/global-config.md

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 537f72ad92..dcaad2faac 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -14,8 +14,8 @@ const sidebar = {
         '/guide/list',
         '/guide/events',
         '/guide/forms',
-        '/guide/component-basics',
-      ],
+        '/guide/component-basics'
+      ]
     },
     {
       title: 'Components In-Depth',
@@ -26,8 +26,8 @@ const sidebar = {
         '/guide/component-custom-events',
         '/guide/component-slots',
         '/guide/component-provide-inject',
-        '/guide/component-dynamic-async',
-      ],
+        '/guide/component-dynamic-async'
+      ]
     },
     {
       title: 'Reusability & Composition',
@@ -37,14 +37,15 @@ const sidebar = {
     {
       title: 'Migration to Vue 3',
       collapsable: true,
-      children: ['migration'],
+      children: ['migration']
     },
     {
       title: 'Contribute to the Docs',
       collapsable: true,
-      children: ['writing-guide'],
-    },
+      children: ['writing-guide']
+    }
   ],
+  api: ['/api/global-config']
 }
 
 module.exports = {
@@ -56,9 +57,10 @@ module.exports = {
       {
         href:
           'https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
-        rel: 'stylesheet',
-      },
+        rel: 'stylesheet'
+      }
     ],
+    ['link', { rel: 'icon', href: '/logo.png' }]
   ],
   themeConfig: {
     nav: [
@@ -68,17 +70,17 @@ module.exports = {
         items: [
           { text: 'Guide', link: '/guide/introduction' },
           { text: 'Style Guide', link: '/style-guide/' },
-          { text: 'Tooling', link: '/tooling/' },
-        ],
+          { text: 'Tooling', link: '/tooling/' }
+        ]
       },
-      { text: 'API Reference', link: '/api/' },
+      { text: 'API Reference', link: '/api/global-config' },
       {
         text: 'Examples',
         ariaLabel: 'Examples Menu',
         items: [
           { text: 'Examples', link: '/examples/' },
-          { text: 'Cookbook', link: '/cookbook/' },
-        ],
+          { text: 'Cookbook', link: '/cookbook/' }
+        ]
       },
       {
         text: 'Community',
@@ -86,16 +88,17 @@ module.exports = {
         items: [
           { text: 'Team', link: '/community/team/' },
           { text: 'Partners', link: '/community/partners/' },
-          { text: 'Themes', link: '/community/themes/' },
-        ],
-      },
+          { text: 'Themes', link: '/community/themes/' }
+        ]
+      }
     ],
     sidebarDepth: 2,
     sidebar: {
       '/guide/': sidebar.guide,
       '/community/': sidebar.guide,
+      '/api/': sidebar.api
     },
-    smoothScroll: false,
+    smoothScroll: false
   },
   plugins: {
     '@vuepress/pwa': {
@@ -103,17 +106,17 @@ module.exports = {
       updatePopup: {
         '/': {
           message: 'New content is available.',
-          buttonText: 'Refresh',
-        },
-      },
-    },
+          buttonText: 'Refresh'
+        }
+      }
+    }
   },
   markdown: {
     /** @param {import('markdown-it')} md */
-    extendMarkdown: (md) => {
+    extendMarkdown: md => {
       md.options.highlight = require('./markdown/highlight')(
         md.options.highlight
       )
-    },
-  },
+    }
+  }
 }
diff --git a/src/api/global-config.md b/src/api/global-config.md
new file mode 100644
index 0000000000..ebcebabaeb
--- /dev/null
+++ b/src/api/global-config.md
@@ -0,0 +1,60 @@
+# Global Config
+
+`config` is an object containing Vue application global configurations. You can modify its properties listed below before mounting your application:
+
+```js
+const app = Vue.createApp({})
+
+app.config = {...}
+```
+
+## devtools
+
+- **Type:** `boolean`
+
+- **Default:** `true` (`false` in production builds)
+
+- **Usage:**
+
+  ```js
+  app.config.devtools = true
+  ```
+
+  Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds.
+
+## errorHandler
+
+- **Type:** `(err: unknown, instance: ComponentPublicInstance | null, info: string) => void`
+
+- **Default:** `undefined`
+
+- **Usage:**
+
+  ```js
+  app.config.errorHandler = (err, vm, info) => {
+    // handle error
+    // `info` is a Vue-specific error info, e.g. which lifecycle hook
+    // the error was found in
+  }
+  ```
+
+  Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the Vue instance.
+
+  > Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option.
+
+export interface AppConfig {
+// (undocumented)
+errorHandler?: (err: unknown, instance: ComponentPublicInstance | null, info: string) => void;
+// (undocumented)
+globalProperties: Record<string, any>;
+// (undocumented)
+isCustomElement: (tag: string) => boolean;
+// (undocumented)
+readonly isNativeTag?: (tag: string) => boolean;
+// (undocumented)
+optionMergeStrategies: Record<string, OptionMergeFunction>;
+// (undocumented)
+performance: boolean;
+// (undocumented)
+warnHandler?: (msg: string, instance: ComponentPublicInstance | null, trace: string) => void;
+}

From af57779eba595f9663001df38ddca93bd258a25e Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sun, 19 Apr 2020 21:38:52 +0300
Subject: [PATCH 02/15] feat: finished global config

---
 src/api/global-config.md | 147 +++++++++++++++++++++++++++++++--------
 src/guide/mixins.md      |   4 +-
 2 files changed, 119 insertions(+), 32 deletions(-)

diff --git a/src/api/global-config.md b/src/api/global-config.md
index ebcebabaeb..23750e0f5c 100644
--- a/src/api/global-config.md
+++ b/src/api/global-config.md
@@ -16,11 +16,11 @@ app.config = {...}
 
 - **Usage:**
 
-  ```js
-  app.config.devtools = true
-  ```
+```js
+app.config.devtools = true
+```
 
-  Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds.
+Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools) inspection. This option's default value is `true` in development builds and `false` in production builds. You can set it to `true` to enable inspection for production builds.
 
 ## errorHandler
 
@@ -30,31 +30,118 @@ app.config = {...}
 
 - **Usage:**
 
-  ```js
-  app.config.errorHandler = (err, vm, info) => {
-    // handle error
-    // `info` is a Vue-specific error info, e.g. which lifecycle hook
-    // the error was found in
+```js
+app.config.errorHandler = (err, vm, info) => {
+  // handle error
+  // `info` is a Vue-specific error info, e.g. which lifecycle hook
+  // the error was found in
+}
+```
+
+Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the Vue instance.
+
+> Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option.
+
+## warnHandler
+
+- **Type:** `(msg: string, instance: ComponentPublicInstance | null, trace: string) => void`
+
+- **Default:** `undefined`
+
+- **Usage:**
+
+```js
+app.config.warnHandler = function(msg, vm, trace) {
+  // `trace` is the component hierarchy trace
+}
+```
+
+Assign a custom handler for runtime Vue warnings. Note this only works during development and is ignored in production.
+
+## globalProperties
+
+- **Type:** `Record<string, any>`
+
+- **Default:** `undefined`
+
+- **Usage:**
+
+```js
+app.config.globalProperties.foo = 'bar'
+
+app.component('child-component', {
+  mounted() {
+    console.log(this.foo) // 'bar'
+  }
+})
+```
+
+Adds a global property that can be accessed in any component instance inside the application. The component’s property will take priority when there are conflicting keys.
+
+This can replace Vue 2.x `Vue.prototype` extending:
+
+```js
+// Before
+Vue.prototype.$http = () => {}
+
+// After
+const app = Vue.createApp({})
+app.config.globalProperties.$http = () => {}
+```
+
+## isCustomElement
+
+- **Type:** `(tag: string) => boolean`
+
+- **Default:** `undefined`
+
+- **Usage:**
+
+```js
+// any element starting with 'ion-' will be recognized as a custom one
+app.config.isCustomElement = tag => tag.startsWith('ion-')
+```
+
+Specifies a method to recognize custom elements defined outside of Vue (e.g., using the Web Components APIs). If component matches this condition, it won't need local or global registration and Vue won't throw a warning about an `Unknown custom element`.
+
+## optionMergeStrategies
+
+- **Type:** `Record<string, OptionMergeFunction>`
+
+- **Default:** `{}`
+
+- **Usage:**
+
+```js
+const app = Vue.createApp({
+  mounted() {
+    console.log(this.$options.hello)
   }
-  ```
-
-  Assign a handler for uncaught errors during component render function and watchers. The handler gets called with the error and the Vue instance.
-
-  > Error tracking services [Sentry](https://sentry.io/for/vue/) and [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) provide official integrations using this option.
-
-export interface AppConfig {
-// (undocumented)
-errorHandler?: (err: unknown, instance: ComponentPublicInstance | null, info: string) => void;
-// (undocumented)
-globalProperties: Record<string, any>;
-// (undocumented)
-isCustomElement: (tag: string) => boolean;
-// (undocumented)
-readonly isNativeTag?: (tag: string) => boolean;
-// (undocumented)
-optionMergeStrategies: Record<string, OptionMergeFunction>;
-// (undocumented)
-performance: boolean;
-// (undocumented)
-warnHandler?: (msg: string, instance: ComponentPublicInstance | null, trace: string) => void;
+})
+
+app.config.optionMergeStrategies.hello = (parent, child, vm) => {
+  return `Hello, ${child}`
 }
+
+app.mixin({
+  hello: 'Vue'
+})
+
+// 'Hello, Vue
+```
+
+Define custom merging strategies for options.
+
+The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context Vue instance is passed as the third argument.
+
+- **See also:** [Custom Option Merging Strategies](../guide/mixins.html#custom-option-merge-strategies)
+
+## performance
+
+- **Type:** `boolean`
+
+- **Default:** `false`
+
+- **Usage**:
+
+Set this to `true` to enable component init, compile, render and patch performance tracing in the browser devtool performance/timeline panel. Only works in development mode and in browsers that support the [performance.mark](https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark) API.
diff --git a/src/guide/mixins.md b/src/guide/mixins.md
index 48df8b3b68..b0cbe035a1 100644
--- a/src/guide/mixins.md
+++ b/src/guide/mixins.md
@@ -154,7 +154,7 @@ app.component('test-component', {
   myOption: 'hello from component!'
 })
 
-app.mount('##mixins-global')
+app.mount('#mixins-global')
 
 // => "hello!"
 // => "hello from component!"
@@ -169,7 +169,7 @@ When custom options are merged, they use the default strategy which overwrites t
 ```js
 const app = Vue.createApp({})
 
-app.config.optionMergeStrategies.customOption = (toVal, fromVal) {
+app.config.optionMergeStrategies.customOption = (toVal, fromVal) => {
   // return mergedVal
 }
 ```

From 541ca7b1b6a975790d38ed4832cb215a5b1088af Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sat, 25 Apr 2020 16:32:13 +0300
Subject: [PATCH 03/15] feat: added component global api

---
 src/api/global-api.md         | 35 +++++++++++++++++++++++++++++++++++
 src/guide/component-basics.md |  4 ++--
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/api/global-api.md

diff --git a/src/api/global-api.md b/src/api/global-api.md
new file mode 100644
index 0000000000..25dc191c34
--- /dev/null
+++ b/src/api/global-api.md
@@ -0,0 +1,35 @@
+# Global API
+
+In Vue 3, global APIs that globally mutate Vue's behavior are now moved to application instances created by the new `createApp` method, and their effects are now scoped to that application instance only:
+
+```js
+import { createApp } from 'vue'
+
+const app = createApp({})
+```
+
+Calling `createApp` returns an application instance. This instance provides an application context. The entire component tree mounted by the application instance share the same context, which provides the configurations that were previously "global" in Vue 2.x.
+
+## component
+
+- **Arguments:**
+  - `{string} name`
+  - `{PublicAPIComponent} [definition]`
+
+- **Usage:**
+
+  Register or retrieve a global component. Registration also automatically sets the component's `name` with the given `name` parameter.
+
+``` js
+import { createApp } from 'vue'
+
+const app = createApp({})
+
+// register an options object
+app.component('my-component', { /* ... */ })
+
+// retrieve a registered component (always return constructor)
+const MyComponent = app.component('my-component', {})
+```
+
+- **See also:** [Components](../guide/component-basics)
diff --git a/src/guide/component-basics.md b/src/guide/component-basics.md
index 6d36059611..8d89faddb2 100644
--- a/src/guide/component-basics.md
+++ b/src/guide/component-basics.md
@@ -395,7 +395,7 @@ See [this sandbox](https://codepen.io/team/Vue/pen/oNXaoKy) to experiment with t
 
 Keep in mind that this attribute can be used with regular HTML elements, however they will be treated as components, which means all attributes **will be bound as DOM attributes**. For some properties such as `value` to work as you would expect, you will need to bind them using the [`.prop` modifier](TODO:../api/#v-bind).
 
-That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](TODO:components-dynamic-async.html).
+That's all you need to know about dynamic components for now, but once you've finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on [Dynamic & Async Components](components-dynamic-async).
 
 ## DOM Template Parsing Caveats
 
@@ -444,4 +444,4 @@ It should be noted that **these limitations does _not_ apply if you are using st
 
 That's all you need to know about DOM template parsing caveats for now - and actually, the end of Vue's _Essentials_. Congratulations! There's still more to learn, but first, we recommend taking a break to play with Vue yourself and build something fun.
 
-Once you feel comfortable with the knowledge you've just digested, we recommend coming back to read the full guide on [Dynamic & Async Components](TODO:components-dynamic-async.html), as well as the other pages in the Components In-Depth section of the sidebar.
+Once you feel comfortable with the knowledge you've just digested, we recommend coming back to read the full guide on [Dynamic & Async Components](components-dynamic-async), as well as the other pages in the Components In-Depth section of the sidebar.

From e443c430b30461b79b4d8bdd6acd3150928bb17d Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sat, 25 Apr 2020 17:02:48 +0300
Subject: [PATCH 04/15] feat: added directives API

---
 src/.vuepress/config.js       |   2 +-
 src/api/global-api.md         | 106 +++++++++++++++++++++++++++++++++-
 src/guide/custom-directive.md |   2 +-
 3 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index dcaad2faac..9553946fed 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -45,7 +45,7 @@ const sidebar = {
       children: ['writing-guide']
     }
   ],
-  api: ['/api/global-config']
+  api: ['/api/global-config', '/api/global-api']
 }
 
 module.exports = {
diff --git a/src/api/global-api.md b/src/api/global-api.md
index 25dc191c34..fbb0e10512 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -32,4 +32,108 @@ app.component('my-component', { /* ... */ })
 const MyComponent = app.component('my-component', {})
 ```
 
-- **See also:** [Components](../guide/component-basics)
+- **See also:** [Components](../guide/component-basics.html)
+
+## config
+
+An object containing application configurations.
+
+- **Usage:**
+
+```js
+import { createApp } from 'vue'
+const app = createApp({})
+
+app.config = {...}
+```
+
+- **See also:** [Global Config Properties](./global-config.html)
+
+## directive
+
+- **Arguments:**
+  - `{string} name`
+  - `{Directive} [definition]`
+
+- **Usage:**
+
+  Register or retrieve a global directive.
+
+``` js
+import { createApp } from 'vue'
+const app = createApp({})
+
+// register
+app.directive('my-directive', {
+  // Directive has a set of lifecycle hooks:
+  // called before bound element's parent component is mounted
+  beforeMount() {},
+  // called when bound element's parent component is mounted
+  mounted() {},
+  // called before the containing component's VNode is updated
+  beforeUpdate() {},
+  // called after the containing component's VNode and the VNodes of its children // have updated
+  updated() {},
+  // called before the bound element's parent component is unmounted
+  beforeUnmount() {},
+  // called when the bound element's parent component is unmounted
+  unmounted() {}
+})
+
+// register (function directive)
+app.directive('my-directive', () => {
+  // this will be called as `mounted` and `updated`
+})
+
+// getter, return the directive definition if registered
+const myDirective = app.directive('my-directive')
+```
+
+Directive hooks are passed these arguments:
+
+### el
+
+The element the directive is bound to. This can be used to directly manipulate the DOM.
+
+### binding
+
+An object containing the following properties.
+
+- `instance`: The instance of the component where directive is used.
+- `value`: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be `2`.
+- `oldValue`: The previous value, only available in `beforeUpdate` and `updated`. It is available whether or not the value has changed.
+- `arg`: The argument passed to the directive, if any. For example in `v-my-directive:foo`, the arg would be `"foo"`.
+- `modifiers`: An object containing modifiers, if any. For example in `v-my-directive.foo.bar`, the modifiers object would be `{ foo: true, bar: true }`.
+- `dir`: an object, passed as a parameter when directive is registered. For example, in the directive
+
+```js
+app.directive('focus', {
+  mounted(el) {
+    el.focus()
+  },
+})
+```
+
+`dir` would be the following object:
+
+```js
+{
+  mounted(el) {
+    el.focus()
+  }
+}
+```
+
+### vnode
+
+A blueprint of the real DOM element received as el argument above. See the [VNode API](TODO) for full details.
+
+### prevNode
+
+The previous virtual node, only available in the `beforeUpdate` and `updated` hooks.
+
+:::tip Note
+Apart from `el`, you should treat these arguments as read-only and never modify them. If you need to share information across hooks, it is recommended to do so through element's [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset).
+:::
+
+- **See also:** [Custom Directives](../guide/custom-directive.html)
diff --git a/src/guide/custom-directive.md b/src/guide/custom-directive.md
index 563aead6c7..e083e04e10 100644
--- a/src/guide/custom-directive.md
+++ b/src/guide/custom-directive.md
@@ -66,7 +66,7 @@ We'll cover VNodes in more detail [later](TODO:/render-function.html#The-Virtual
 
 - `unmounted`: called only once, when the directive is unbound from the element and the parent component is unmounted.
 
-You can check the arguments passed into these hooks (i.e. `el`, `binding`, `vnode`, and `prevVnode`) in [Custom Directive API](TODO)
+You can check the arguments passed into these hooks (i.e. `el`, `binding`, `vnode`, and `prevVnode`) in [Custom Directive API](../api/global-api.html#directive)
 
 ### Dynamic Directive Arguments
 

From 7cd065168f7f3e309b96a37578f709e3d075c640 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sat, 25 Apr 2020 17:06:17 +0300
Subject: [PATCH 05/15] feat: added mixin API

---
 src/api/global-api.md | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/api/global-api.md b/src/api/global-api.md
index fbb0e10512..e7ad67d7e5 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -91,11 +91,11 @@ const myDirective = app.directive('my-directive')
 
 Directive hooks are passed these arguments:
 
-### el
+#### el
 
 The element the directive is bound to. This can be used to directly manipulate the DOM.
 
-### binding
+#### binding
 
 An object containing the following properties.
 
@@ -124,11 +124,11 @@ app.directive('focus', {
 }
 ```
 
-### vnode
+#### vnode
 
 A blueprint of the real DOM element received as el argument above. See the [VNode API](TODO) for full details.
 
-### prevNode
+#### prevNode
 
 The previous virtual node, only available in the `beforeUpdate` and `updated` hooks.
 
@@ -137,3 +137,14 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 :::
 
 - **See also:** [Custom Directives](../guide/custom-directive.html)
+
+## mixin
+
+- **Arguments:**
+  - `{ComponentOptions} mixin`
+
+- **Usage:**
+
+  Apply a mixin globally, which will affect **every** Vue instance created afterwards in the given app (for example, child components). This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
+
+- **See also:** [Global Mixin](../guide/mixins.html#global-mixin)

From 5d9ee8cad520c2d296cd686b25d4d4dd0a6bf37f Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sat, 25 Apr 2020 17:18:05 +0300
Subject: [PATCH 06/15] feat: add mount API

---
 src/api/global-api.md | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/api/global-api.md b/src/api/global-api.md
index e7ad67d7e5..9c94820267 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -10,6 +10,8 @@ const app = createApp({})
 
 Calling `createApp` returns an application instance. This instance provides an application context. The entire component tree mounted by the application instance share the same context, which provides the configurations that were previously "global" in Vue 2.x.
 
+`createApp` method returns the application instance itself so you can chain other methods after it.
+
 ## component
 
 - **Arguments:**
@@ -148,3 +150,29 @@ Apart from `el`, you should treat these arguments as read-only and never modify
   Apply a mixin globally, which will affect **every** Vue instance created afterwards in the given app (for example, child components). This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
 
 - **See also:** [Global Mixin](../guide/mixins.html#global-mixin)
+
+## mount
+
+- **Arguments:**
+  - `{HostElement | string} rootContainer`
+  - `{boolean} isHydrate`
+
+- **Usage:**
+
+  Mounts a root component of the application instance on the provided DOM element.
+
+- **Example:**
+```html
+<body>
+  <div id="my-app"></div>
+</body>
+```
+
+```js
+import { createApp } from 'vue'
+
+createApp({}).mount('#my-app')
+```
+
+- **See also:**
+  - [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)

From d55decb6613bd5a43af6de3f97846065d779c95c Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sat, 25 Apr 2020 17:35:05 +0300
Subject: [PATCH 07/15] feat: added unmount and use

---
 src/api/global-api.md | 92 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 91 insertions(+), 1 deletion(-)

diff --git a/src/api/global-api.md b/src/api/global-api.md
index 9c94820267..ffac66de92 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -22,6 +22,8 @@ Calling `createApp` returns an application instance. This instance provides an a
 
   Register or retrieve a global component. Registration also automatically sets the component's `name` with the given `name` parameter.
 
+- **Example:**
+
 ``` js
 import { createApp } from 'vue'
 
@@ -38,9 +40,11 @@ const MyComponent = app.component('my-component', {})
 
 ## config
 
+- **Usage:**
+
 An object containing application configurations.
 
-- **Usage:**
+- **Example:**
 
 ```js
 import { createApp } from 'vue'
@@ -61,6 +65,8 @@ app.config = {...}
 
   Register or retrieve a global directive.
 
+- **Example:**
+
 ``` js
 import { createApp } from 'vue'
 const app = createApp({})
@@ -162,6 +168,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
   Mounts a root component of the application instance on the provided DOM element.
 
 - **Example:**
+
 ```html
 <body>
   <div id="my-app"></div>
@@ -176,3 +183,86 @@ createApp({}).mount('#my-app')
 
 - **See also:**
   - [Lifecycle Diagram](../guide/instance.html#lifecycle-diagram)
+
+## provide
+
+- **Arguments:**
+  - `{InjectionKey<T> | string} key`
+  - `{T} value`
+
+- **Details:**
+
+  This option is used together with [`inject`](TODO:inject) are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.
+
+  The `provide` option should be an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use ES2015 Symbols as keys in this object, but only in environments that natively support `Symbol` and `Reflect.ownKeys`.
+
+  > Note: the `provide` and `inject` bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.
+
+- **Example:**
+
+``` js
+import { createApp } from 'vue'
+
+const app = createApp({
+  provide: {
+    user: 'John Doe'
+  }
+})
+
+app.component('user-card', {
+  inject: ['user'],
+    template: `
+    <div>
+      {{ user }}
+    </div>
+  `
+})
+```
+
+- **See also:**
+  - [Provide / Inject](../guide/component-provide-inject.md)
+
+## unmount
+
+- **Arguments:**
+  - `{HostElement | string} rootContainer`
+
+- **Usage:**
+
+  Unmounts a root component of the application instance on the provided DOM element.
+
+- **Example:**
+
+```html
+<body>
+  <div id="my-app"></div>
+</body>
+```
+
+```js
+import { createApp } from 'vue'
+
+createApp({}).mount('#my-app')
+
+// Application will be unmounted 5 seconds after mount
+setTimeout(() => app.unmount('#my-app'), 5000)
+```
+
+## use
+
+- **Arguments:**
+  - `{Object | Function} plugin`
+
+- **Usage:**
+
+  Install a Vue.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Vue as the argument.
+
+  When this method is called on the same plugin multiple times, the plugin will be installed only once.
+
+- **See also:** [Plugins](TODO)
+
+
+
+
+
+

From e64ebf0ea6e099de8fab4625e8d6cbb734603143 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Sun, 26 Apr 2020 07:14:18 +0300
Subject: [PATCH 08/15] Update src/api/global-api.md

Co-Authored-By: Jinjiang <zhaojinjiang@me.com>
---
 src/api/global-api.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/api/global-api.md b/src/api/global-api.md
index ffac66de92..13d835b343 100644
--- a/src/api/global-api.md
+++ b/src/api/global-api.md
@@ -153,7 +153,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 
 - **Usage:**
 
-  Apply a mixin globally, which will affect **every** Vue instance created afterwards in the given app (for example, child components). This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
+  Apply a mixin in the whole application scope, which will affect **every** Vue instance created afterwards in the given app (for example, child components). This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
 
 - **See also:** [Global Mixin](../guide/mixins.html#global-mixin)
 
@@ -265,4 +265,3 @@ setTimeout(() => app.unmount('#my-app'), 5000)
 
 
 
-

From 49ffe2359984039593d4fb035306fb9bd164d6b3 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Sun, 26 Apr 2020 16:43:59 +0300
Subject: [PATCH 09/15] Update src/api/global-config.md

Co-Authored-By: Jinjiang <zhaojinjiang@me.com>
---
 src/api/global-config.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/global-config.md b/src/api/global-config.md
index 23750e0f5c..dd2cf4b78e 100644
--- a/src/api/global-config.md
+++ b/src/api/global-config.md
@@ -130,7 +130,7 @@ app.mixin({
 // 'Hello, Vue
 ```
 
-Define custom merging strategies for options.
+Define merging strategies for custom options.
 
 The merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively. The context Vue instance is passed as the third argument.
 

From c4f9dd5c22be9fb54a688088d4a9e45120aec801 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sun, 26 Apr 2020 17:01:26 +0300
Subject: [PATCH 10/15] fixL changed global -> application

---
 src/.vuepress/config.js                             | 5 +++--
 src/api/{global-api.md => application-api.md}       | 2 +-
 src/api/{global-config.md => application-config.md} | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)
 rename src/api/{global-api.md => application-api.md} (99%)
 rename src/api/{global-config.md => application-config.md} (99%)

diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
index 9553946fed..755ab86af1 100644
--- a/src/.vuepress/config.js
+++ b/src/.vuepress/config.js
@@ -45,7 +45,7 @@ const sidebar = {
       children: ['writing-guide']
     }
   ],
-  api: ['/api/global-config', '/api/global-api']
+  api: ['/api/application-config', '/api/application-api']
 }
 
 module.exports = {
@@ -73,7 +73,7 @@ module.exports = {
           { text: 'Tooling', link: '/tooling/' }
         ]
       },
-      { text: 'API Reference', link: '/api/global-config' },
+      { text: 'API Reference', link: '/api/application-config' },
       {
         text: 'Examples',
         ariaLabel: 'Examples Menu',
@@ -94,6 +94,7 @@ module.exports = {
     ],
     sidebarDepth: 2,
     sidebar: {
+      collapsable: false,
       '/guide/': sidebar.guide,
       '/community/': sidebar.guide,
       '/api/': sidebar.api
diff --git a/src/api/global-api.md b/src/api/application-api.md
similarity index 99%
rename from src/api/global-api.md
rename to src/api/application-api.md
index ffac66de92..463632bf2f 100644
--- a/src/api/global-api.md
+++ b/src/api/application-api.md
@@ -1,4 +1,4 @@
-# Global API
+# Application API
 
 In Vue 3, global APIs that globally mutate Vue's behavior are now moved to application instances created by the new `createApp` method, and their effects are now scoped to that application instance only:
 
diff --git a/src/api/global-config.md b/src/api/application-config.md
similarity index 99%
rename from src/api/global-config.md
rename to src/api/application-config.md
index 23750e0f5c..fe7838603b 100644
--- a/src/api/global-config.md
+++ b/src/api/application-config.md
@@ -1,4 +1,4 @@
-# Global Config
+# Application Config
 
 `config` is an object containing Vue application global configurations. You can modify its properties listed below before mounting your application:
 

From 828972c9cdde0a3fd6252cd86bcb081b0a64be93 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sun, 26 Apr 2020 18:31:02 +0300
Subject: [PATCH 11/15] fix: fixed types for config

---
 src/api/application-api.md    | 34 +++++++++++++++++++++-------------
 src/api/application-config.md |  8 ++++----
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/api/application-api.md b/src/api/application-api.md
index a37c487835..0e63830129 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -15,6 +15,7 @@ Calling `createApp` returns an application instance. This instance provides an a
 ## component
 
 - **Arguments:**
+
   - `{string} name`
   - `{PublicAPIComponent} [definition]`
 
@@ -24,13 +25,15 @@ Calling `createApp` returns an application instance. This instance provides an a
 
 - **Example:**
 
-``` js
+```js
 import { createApp } from 'vue'
 
 const app = createApp({})
 
 // register an options object
-app.component('my-component', { /* ... */ })
+app.component('my-component', {
+  /* ... */
+})
 
 // retrieve a registered component (always return constructor)
 const MyComponent = app.component('my-component', {})
@@ -58,6 +61,7 @@ app.config = {...}
 ## directive
 
 - **Arguments:**
+
   - `{string} name`
   - `{Directive} [definition]`
 
@@ -67,7 +71,7 @@ app.config = {...}
 
 - **Example:**
 
-``` js
+```js
 import { createApp } from 'vue'
 const app = createApp({})
 
@@ -118,7 +122,7 @@ An object containing the following properties.
 app.directive('focus', {
   mounted(el) {
     el.focus()
-  },
+  }
 })
 ```
 
@@ -149,6 +153,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 ## mixin
 
 - **Arguments:**
+
   - `{ComponentOptions} mixin`
 
 - **Usage:**
@@ -160,6 +165,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 ## mount
 
 - **Arguments:**
+
   - `{HostElement | string} rootContainer`
   - `{boolean} isHydrate`
 
@@ -178,7 +184,9 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 ```js
 import { createApp } from 'vue'
 
-createApp({}).mount('#my-app')
+const app = createApp({})
+// do some necessary preparations
+app.mount('#my-app')
 ```
 
 - **See also:**
@@ -187,6 +195,7 @@ createApp({}).mount('#my-app')
 ## provide
 
 - **Arguments:**
+
   - `{InjectionKey<T> | string} key`
   - `{T} value`
 
@@ -200,7 +209,7 @@ createApp({}).mount('#my-app')
 
 - **Example:**
 
-``` js
+```js
 import { createApp } from 'vue'
 
 const app = createApp({
@@ -211,7 +220,7 @@ const app = createApp({
 
 app.component('user-card', {
   inject: ['user'],
-    template: `
+  template: `
     <div>
       {{ user }}
     </div>
@@ -225,6 +234,7 @@ app.component('user-card', {
 ## unmount
 
 - **Arguments:**
+
   - `{HostElement | string} rootContainer`
 
 - **Usage:**
@@ -242,7 +252,9 @@ app.component('user-card', {
 ```js
 import { createApp } from 'vue'
 
-createApp({}).mount('#my-app')
+const app = createApp({})
+// do some necessary preparations
+app.mount('#my-app')
 
 // Application will be unmounted 5 seconds after mount
 setTimeout(() => app.unmount('#my-app'), 5000)
@@ -251,6 +263,7 @@ setTimeout(() => app.unmount('#my-app'), 5000)
 ## use
 
 - **Arguments:**
+
   - `{Object | Function} plugin`
 
 - **Usage:**
@@ -260,8 +273,3 @@ setTimeout(() => app.unmount('#my-app'), 5000)
   When this method is called on the same plugin multiple times, the plugin will be installed only once.
 
 - **See also:** [Plugins](TODO)
-
-
-
-
-
diff --git a/src/api/application-config.md b/src/api/application-config.md
index d91a9815c6..7992a1463f 100644
--- a/src/api/application-config.md
+++ b/src/api/application-config.md
@@ -24,7 +24,7 @@ Configure whether to allow [vue-devtools](https://github.com/vuejs/vue-devtools)
 
 ## errorHandler
 
-- **Type:** `(err: unknown, instance: ComponentPublicInstance | null, info: string) => void`
+- **Type:** `Function`
 
 - **Default:** `undefined`
 
@@ -44,7 +44,7 @@ Assign a handler for uncaught errors during component render function and watche
 
 ## warnHandler
 
-- **Type:** `(msg: string, instance: ComponentPublicInstance | null, trace: string) => void`
+- **Type:** `Function`
 
 - **Default:** `undefined`
 
@@ -60,7 +60,7 @@ Assign a custom handler for runtime Vue warnings. Note this only works during de
 
 ## globalProperties
 
-- **Type:** `Record<string, any>`
+- **Type:** `[key: string]: any`
 
 - **Default:** `undefined`
 
@@ -106,7 +106,7 @@ Specifies a method to recognize custom elements defined outside of Vue (e.g., us
 
 ## optionMergeStrategies
 
-- **Type:** `Record<string, OptionMergeFunction>`
+- **Type:** `{ [key: string]: Function }`
 
 - **Default:** `{}`
 

From 1887ca5d7a49d366f16c14ab59b33ad6b4ce1150 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sun, 26 Apr 2020 18:36:27 +0300
Subject: [PATCH 12/15] fix: fixed types for API

---
 src/api/application-api.md | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/api/application-api.md b/src/api/application-api.md
index 0e63830129..34e51b9e37 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -17,7 +17,7 @@ Calling `createApp` returns an application instance. This instance provides an a
 - **Arguments:**
 
   - `{string} name`
-  - `{PublicAPIComponent} [definition]`
+  - `{Function | Object} [definition]`
 
 - **Usage:**
 
@@ -63,7 +63,7 @@ app.config = {...}
 - **Arguments:**
 
   - `{string} name`
-  - `{Directive} [definition]`
+  - `{Function | Object} [definition]`
 
 - **Usage:**
 
@@ -154,7 +154,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 
 - **Arguments:**
 
-  - `{ComponentOptions} mixin`
+  - `{Object} mixin`
 
 - **Usage:**
 
@@ -166,7 +166,7 @@ Apart from `el`, you should treat these arguments as read-only and never modify
 
 - **Arguments:**
 
-  - `{HostElement | string} rootContainer`
+  - `{Element | string} rootContainer`
   - `{boolean} isHydrate`
 
 - **Usage:**
@@ -194,10 +194,9 @@ app.mount('#my-app')
 
 ## provide
 
-- **Arguments:**
+- **Type:**
 
-  - `{InjectionKey<T> | string} key`
-  - `{T} value`
+  - `Object | () => Object`
 
 - **Details:**
 
@@ -235,7 +234,7 @@ app.component('user-card', {
 
 - **Arguments:**
 
-  - `{HostElement | string} rootContainer`
+  - `{Element | string} rootContainer`
 
 - **Usage:**
 

From dfa977f10c6c41bf7a1fa012c6a73e7f19ceb792 Mon Sep 17 00:00:00 2001
From: NataliaTepluhina <tarya.se@gmail.com>
Date: Sun, 26 Apr 2020 18:39:51 +0300
Subject: [PATCH 13/15] feat: added a note about native HTML tags

---
 src/api/application-config.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/api/application-config.md b/src/api/application-config.md
index 7992a1463f..b38191c183 100644
--- a/src/api/application-config.md
+++ b/src/api/application-config.md
@@ -104,6 +104,8 @@ app.config.isCustomElement = tag => tag.startsWith('ion-')
 
 Specifies a method to recognize custom elements defined outside of Vue (e.g., using the Web Components APIs). If component matches this condition, it won't need local or global registration and Vue won't throw a warning about an `Unknown custom element`.
 
+> Note that all native HTML and SVG tags don't need to be matched in this function - Vue parser performs this check automatically
+
 ## optionMergeStrategies
 
 - **Type:** `{ [key: string]: Function }`

From e760bdea8861fb28665895bbb822f16f89471fc6 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Mon, 27 Apr 2020 06:46:33 +0300
Subject: [PATCH 14/15] Update src/api/application-api.md

Co-Authored-By: Ben Hong <ben@bencodezen.io>
---
 src/api/application-api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/application-api.md b/src/api/application-api.md
index 34e51b9e37..cd44819509 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -1,6 +1,6 @@
 # Application API
 
-In Vue 3, global APIs that globally mutate Vue's behavior are now moved to application instances created by the new `createApp` method, and their effects are now scoped to that application instance only:
+In Vue 3, APIs that globally mutate Vue's behavior are now moved to application instances created by the new `createApp` method. In addition, their effects are now scoped to that specific application's instance:
 
 ```js
 import { createApp } from 'vue'

From 8d735436ac437602b5c1b0bdb80ae90999c94958 Mon Sep 17 00:00:00 2001
From: Natalia Tepluhina <tarya.se@gmail.com>
Date: Mon, 27 Apr 2020 06:46:48 +0300
Subject: [PATCH 15/15] Update src/api/application-api.md

Co-Authored-By: Ben Hong <ben@bencodezen.io>
---
 src/api/application-api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/application-api.md b/src/api/application-api.md
index cd44819509..a0e800c032 100644
--- a/src/api/application-api.md
+++ b/src/api/application-api.md
@@ -10,7 +10,7 @@ const app = createApp({})
 
 Calling `createApp` returns an application instance. This instance provides an application context. The entire component tree mounted by the application instance share the same context, which provides the configurations that were previously "global" in Vue 2.x.
 
-`createApp` method returns the application instance itself so you can chain other methods after it.
+In addition, since the `createApp` method returns the application instance itself, you can chain other methods after it which can be found in the following sections.
 
 ## component