docs: reduce the reliance on the global Vue in API Reference examples (#861)

Author: skirtles-code

src/api/application-config.md

@@ -3,7 +3,7 @@
 Every Vue application exposes a `config` object that contains the configuration settings for that application:
 
 ```js
-const app = Vue.createApp({})
+const app = createApp({})
 
 console.log(app.config)
 ```
@@ -73,7 +73,7 @@ This can replace Vue 2.x `Vue.prototype` extending:
 Vue.prototype.$http = () => {}
 
 // After
-const app = Vue.createApp({})
+const app = createApp({})
 app.config.globalProperties.$http = () => {}
 ```
 
@@ -107,7 +107,7 @@ This config option is only respected when using the runtime compiler. If you are
 - **Usage:**
 
 ```js
-const app = Vue.createApp({
+const app = createApp({
   mounted() {
     console.log(this.$options.hello)
   }

src/api/built-in-components.md

@@ -88,7 +88,7 @@
   ```
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     ...
     methods: {
       transitionComplete (el) {

src/api/global-api.md

@@ -4,12 +4,26 @@ sidebarDepth: 1
 
 # Global API
 
+If you're using a CDN build then the functions of the global API are accessible via the global `Vue` object. e.g.:
+
+```js
+const { createApp, h, nextTick } = Vue
+```
+
+If you're using ES modules then they can be imported directly:
+
+```js
+import { createApp, h, nextTick } from 'vue'
+```
+
+Global functions that handle reactivity, such as `reactive` and `ref`, are documented separately. See [Reactivity API](/api/reactivity-api.html) for those functions.
+
 ## createApp
 
 Returns an application instance which provides an application context. The entire component tree mounted by the application instance share the same context.
 
 ```js
-const app = Vue.createApp({})
+const app = createApp({})
 ```
 
 You can chain other methods after `createApp`, they can be found in [Application API](./application-api.html)
@@ -19,7 +33,7 @@ You can chain other methods after `createApp`, they can be found in [Application
 The function receives a root component options object as a first parameter:
 
 ```js
-const app = Vue.createApp({
+const app = createApp({
   data() {
     return {
       ...
@@ -34,7 +48,7 @@ const app = Vue.createApp({
 With the second parameter, we can pass root props to the application:
 
 ```js
-const app = Vue.createApp(
+const app = createApp(
   {
     props: ['username']
   },
@@ -68,7 +82,7 @@ Returns a returns "virtual node", usually abbreviated to **VNode**: a plain obje
 
 ```js
 render() {
-  return Vue.h('h1', {}, 'Some title')
+  return h('h1', {}, 'Some title')
 }
 ```
 
@@ -231,7 +245,7 @@ Allows resolving a `component` by its name, if it is available in the current ap
 Returns a `Component` or `undefined` when not found.
 
 ```js
-const app = Vue.createApp({})
+const app = createApp({})
 app.component('MyComponent', {
   /* ... */
 })
@@ -296,7 +310,7 @@ Allows resolving a `directive` by its name, if it is available in the current ap
 Returns a `Directive` or `undefined` when not found.
 
 ```js
-const app = Vue.createApp({})
+const app = createApp({})
 app.directive('highlight', {})
 ```
 

src/api/instance-methods.md

@@ -20,7 +20,7 @@
 - **Example:**
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return {
         a: 1,
@@ -62,7 +62,7 @@
   When watched value is an object or array, any changes to its properties or elements won't trigger the watcher because they reference the same object/array:
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return {
         article: {
@@ -104,7 +104,7 @@
   `$watch` returns an unwatch function that stops firing the callback:
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return {
         a: 1
@@ -213,7 +213,7 @@
   ```
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     methods: {
       sayHi() {
         console.log('Hi!')
@@ -242,7 +242,7 @@
   ```
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     methods: {
       showAdvice(advice) {
         alert(advice)
@@ -293,7 +293,7 @@
 - **Example:**
 
   ```js
-  Vue.createApp({
+  createApp({
     // ...
     methods: {
       // ...

src/api/instance-properties.md

@@ -41,7 +41,7 @@
   The instantiation options used for the current component instance. This is useful when you want to include custom properties in the options:
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     customOption: 'foo',
     created() {
       console.log(this.$options.customOption) // => 'foo'
@@ -102,14 +102,15 @@
   ```
 
   ```js
-  const app = Vue.createApp({})
+  const { createApp, h } = Vue
+  const app = createApp({})
 
   app.component('blog-post', {
     render() {
-      return Vue.h('div', [
-        Vue.h('header', this.$slots.header()),
-        Vue.h('main', this.$slots.default()),
-        Vue.h('footer', this.$slots.footer())
+      return h('div', [
+        h('header', this.$slots.header()),
+        h('main', this.$slots.default()),
+        h('footer', this.$slots.footer())
       ])
     }
   })

src/api/options-assets.md

@@ -10,8 +10,8 @@
 
 - **Usage:**
   ```js
-  const app = Vue.createApp({})
-  
+  const app = createApp({})
+
   app.component('focused-input', {
     directives: {
       focus: {
@@ -39,8 +39,8 @@
   const Foo = {
     template: `<div>Foo</div>`
   }
-  
-  const app = Vue.createApp({
+
+  const app = createApp({
     components: {
       Foo
     },

src/api/options-composition.md

@@ -19,7 +19,7 @@
     }
   }
 
-  Vue.createApp({
+  createApp({
     created() {
       console.log(2)
     },

src/api/options-data.md

@@ -21,7 +21,7 @@
   const data = { a: 1 }
 
   // The object is added to a component instance
-  const vm = Vue.createApp({
+  const vm = createApp({
     data() {
       return data
     }
@@ -59,7 +59,7 @@
 - **Example:**
 
   ```js
-  const app = Vue.createApp({})
+  const app = createApp({})
 
   // simple syntax
   app.component('props-demo-simple', {
@@ -107,7 +107,7 @@
 - **Example:**
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return { a: 1 }
     },
@@ -152,7 +152,7 @@
 - **Example:**
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return { a: 1 }
     },
@@ -182,7 +182,7 @@
 - **Example:**
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return {
         a: 1,
@@ -262,7 +262,7 @@
 - **Usage:**
 
   ```js
-  const app = Vue.createApp({})
+  const app = createApp({})
 
   // Array syntax
   app.component('todo-item', {

src/api/options-dom.md

@@ -39,11 +39,12 @@
   ```
 
   ```js
-  const app = Vue.createApp({})
+  const { createApp, h } = Vue
+  const app = createApp({})
 
   app.component('my-title', {
     render() {
-      return Vue.h(
+      return h(
         'h1', // tag name,
         this.blogTitle // tag content
       )

src/api/options-lifecycle-hooks.md

@@ -42,7 +42,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
 
 - **Details:**
 
-  Called after the instance has been mounted, where element, passed to `Vue.createApp({}).mount()` is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el` will also be in-document when `mounted` is called.
+  Called after the instance has been mounted, where element, passed to [`app.mount`](/api/application-api.html#mount) is replaced by the newly created `vm.$el`. If the root instance is mounted to an in-document element, `vm.$el` will also be in-document when `mounted` is called.
 
   Note that `mounted` does **not** guarantee that all child components have also been mounted. If you want to wait until the entire view has been rendered, you can use [vm.$nextTick](../api/instance-methods.html#nexttick) inside of `mounted`:
 
@@ -186,7 +186,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   ```
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return {
         cart: 0
@@ -232,7 +232,7 @@ All lifecycle hooks automatically have their `this` context bound to the instanc
   ```
 
   ```js
-  const app = Vue.createApp({
+  const app = createApp({
     data() {
       return {
         cart: 0

src/api/options-misc.md

@@ -6,7 +6,7 @@
 
 - **Details:**
 
-  Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Vue.createApp({}).component({})`, the global ID is automatically set as its name.
+  Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with [`app.component`](/api/application-api.html#component), the global ID is automatically set as its name.
 
   Another benefit of specifying a `name` option is debugging. Named components result in more helpful warning messages. Also, when inspecting an app in the [vue-devtools](https://github.com/vuejs/vue-devtools), unnamed components will show up as `<AnonymousComponent>`, which isn't very informative. By providing the `name` option, you will get a much more informative component tree.
 
@@ -27,7 +27,7 @@
 - **Example:**
 
   ```js
-  Vue.createApp({
+  createApp({
     // Delimiters changed to ES6 template string style
     delimiters: ['${', '}']
   })