From eea61854d813cbfd439523e7ce33d8f9c691792e Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sat, 21 Nov 2020 06:34:05 +0000 Subject: [PATCH 1/2] fix: document migrating Vue.prototype to globalProperties --- src/guide/migration/global-api.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md index b2727957bc..04e37b0cf2 100644 --- a/src/guide/migration/global-api.md +++ b/src/guide/migration/global-api.md @@ -76,6 +76,7 @@ An app instance exposes a subset of the current global APIs. The rule of thumb i | Vue.directive | app.directive | | Vue.mixin | app.mixin | | Vue.use | app.use ([see below](#a-note-for-plugin-authors)) | +| Vue.prototype | app.config.globalProperties ([see below](#vue-prototype-replaced-by-config-globalproperties)) | | All other global APIs that do not globally mutate behavior are now named exports, as documented in [Global API Treeshaking](./global-api-treeshaking.html). @@ -106,6 +107,25 @@ In 3.0, the check of whether an element is a component or not has been moved to - This will be a new top-level option in the Vue CLI config. ::: +### `Vue.prototype` Replaced by `config.globalProperties` + +In Vue 2, `Vue.prototype` was commonly used to add properties that would be accessible in all components. + +The equivalent in Vue 3 is `config.globalProperties`. These properties will be copied across as part of instantiating a component within the application: + +```js +// before - Vue 2 +Vue.prototype.$http = () => {} +``` + +```js +// after - Vue 3 +const app = Vue.createApp({}) +app.config.globalProperties.$http = () => {} +``` + +Using `provide` (discussed [below](#provide-inject)) should also be considered as an alternative to `globalProperties`. + ### A Note for Plugin Authors It is a common practice for plugin authors to install the plugins automatically in their UMD builds using `Vue.use`. For instance, this is how the official `vue-router` plugin installs itself in a browser environment: @@ -178,6 +198,8 @@ export default { } ``` +Using `provide` is especially useful when writing a plugin, as an alternative to `globalProperties`. + ## Share Configurations Among Apps One way to share configurations e.g. components or directives among apps is to create a factory function, like this: From 44301dd5994fcd39e3f88b590da3ed117623f56c Mon Sep 17 00:00:00 2001 From: skirtle <65301168+skirtles-code@users.noreply.github.com> Date: Sun, 22 Nov 2020 02:29:02 +0000 Subject: [PATCH 2/2] docs: add a link to globalProperties --- src/guide/migration/global-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/migration/global-api.md b/src/guide/migration/global-api.md index 04e37b0cf2..f0be8f9d9a 100644 --- a/src/guide/migration/global-api.md +++ b/src/guide/migration/global-api.md @@ -111,7 +111,7 @@ In 3.0, the check of whether an element is a component or not has been moved to In Vue 2, `Vue.prototype` was commonly used to add properties that would be accessible in all components. -The equivalent in Vue 3 is `config.globalProperties`. These properties will be copied across as part of instantiating a component within the application: +The equivalent in Vue 3 is [`config.globalProperties`](/api/application-config.html#globalproperties). These properties will be copied across as part of instantiating a component within the application: ```js // before - Vue 2