Skip to content

Document migrating Vue.prototype to globalProperties #706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 22, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/guide/migration/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down Expand Up @@ -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`](/api/application-config.html#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:
Expand Down Expand Up @@ -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:
Expand Down