diff --git a/src/api/application-config.md b/src/api/application-config.md index af9e006fb9..0f70f89247 100644 --- a/src/api/application-config.md +++ b/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) } diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index 9571bcc0c2..8f79c04d04 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -88,7 +88,7 @@ ``` ```js - const app = Vue.createApp({ + const app = createApp({ ... methods: { transitionComplete (el) { diff --git a/src/api/global-api.md b/src/api/global-api.md index daad02a127..5dd179e22f 100644 --- a/src/api/global-api.md +++ b/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', {}) ``` diff --git a/src/api/instance-methods.md b/src/api/instance-methods.md index f36cc61194..8fae9d49d6 100644 --- a/src/api/instance-methods.md +++ b/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: { // ... diff --git a/src/api/instance-properties.md b/src/api/instance-properties.md index 590c1b921a..acc82da62a 100644 --- a/src/api/instance-properties.md +++ b/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()) ]) } }) diff --git a/src/api/options-assets.md b/src/api/options-assets.md index c99b40f01e..3627123872 100644 --- a/src/api/options-assets.md +++ b/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: `