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: `
Foo
` } - - const app = Vue.createApp({ + + const app = createApp({ components: { Foo }, diff --git a/src/api/options-composition.md b/src/api/options-composition.md index 689b01f685..23e37ae3bb 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -19,7 +19,7 @@ } } - Vue.createApp({ + createApp({ created() { console.log(2) }, diff --git a/src/api/options-data.md b/src/api/options-data.md index ccf9ea7ca1..e7e84fdbb3 100644 --- a/src/api/options-data.md +++ b/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', { diff --git a/src/api/options-dom.md b/src/api/options-dom.md index aa3d191cc7..f11407afaf 100644 --- a/src/api/options-dom.md +++ b/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 ) diff --git a/src/api/options-lifecycle-hooks.md b/src/api/options-lifecycle-hooks.md index 543ce9bf69..3f6b5947bc 100644 --- a/src/api/options-lifecycle-hooks.md +++ b/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 diff --git a/src/api/options-misc.md b/src/api/options-misc.md index 5736b6c7a4..d1da6800cd 100644 --- a/src/api/options-misc.md +++ b/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 ``, 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: ['${', '}'] })