Skip to content

Commit 7b110ff

Browse files
Document migrating Vue.prototype to globalProperties (#706)
* fix: document migrating Vue.prototype to globalProperties * docs: add a link to globalProperties
1 parent e554cd6 commit 7b110ff

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

src/guide/migration/global-api.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ An app instance exposes a subset of the current global APIs. The rule of thumb i
7676
| Vue.directive | app.directive |
7777
| Vue.mixin | app.mixin |
7878
| Vue.use | app.use ([see below](#a-note-for-plugin-authors)) |
79+
| Vue.prototype | app.config.globalProperties ([see below](#vue-prototype-replaced-by-config-globalproperties)) | |
7980

8081
All other global APIs that do not globally mutate behavior are now named exports, as documented in [Global API Treeshaking](./global-api-treeshaking.html).
8182

@@ -106,6 +107,25 @@ In 3.0, the check of whether an element is a component or not has been moved to
106107
- This will be a new top-level option in the Vue CLI config.
107108
:::
108109

110+
### `Vue.prototype` Replaced by `config.globalProperties`
111+
112+
In Vue 2, `Vue.prototype` was commonly used to add properties that would be accessible in all components.
113+
114+
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:
115+
116+
```js
117+
// before - Vue 2
118+
Vue.prototype.$http = () => {}
119+
```
120+
121+
```js
122+
// after - Vue 3
123+
const app = Vue.createApp({})
124+
app.config.globalProperties.$http = () => {}
125+
```
126+
127+
Using `provide` (discussed [below](#provide-inject)) should also be considered as an alternative to `globalProperties`.
128+
109129
### A Note for Plugin Authors
110130

111131
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 {
178198
}
179199
```
180200

201+
Using `provide` is especially useful when writing a plugin, as an alternative to `globalProperties`.
202+
181203
## Share Configurations Among Apps
182204

183205
One way to share configurations e.g. components or directives among apps is to create a factory function, like this:

0 commit comments

Comments
 (0)