Global Properties and provide/inject in Plugins
app.config.globalProperties.$myPlugin, app.provide() for injection, TypeScript augmentation.
Two Ways to Expose Services
Plugins can share functionality two ways: global properties (the classic Options API style, accessed via this.$x) and provide/inject (the Composition API style). Modern code favors provide/inject; global properties remain useful for Options API codebases.
app.config.globalProperties
app.config.globalProperties.$http = client makes this.$http available in every Options API component. The convention is to prefix with $ to avoid clashing with component data.
import axios from 'axios'
export default {
install(app, options) {
const http = axios.create({ baseURL: options.baseURL })
app.config.globalProperties.$http = http
}
}All lessons in this course
- Plugin Architecture and app.use()
- Global Properties and provide/inject in Plugins
- Notification and Toast Plugin Example
- Publishing and Typing Vue Plugins