@@ -100,6 +100,7 @@ export function createAppContext(): AppContext {
100100 config : {
101101 errorHandler : undefined ,
102102 warnHandler : undefined ,
103+ globalProperties : { } ,
103104 } ,
104105 provides : Object . create ( null ) ,
105106 }
@@ -131,6 +132,7 @@ export interface AppConfig {
131132 instance : ComponentInternalInstance | null ,
132133 trace : string ,
133134 ) => void
135+ globalProperties : ComponentCustomProperties & Record < string , any >
134136}
135137
136138export interface AppContext {
@@ -144,3 +146,30 @@ export interface AppContext {
144146 * `app.runWithContext()`.
145147 */
146148export let currentApp : App | null = null
149+
150+ /**
151+ * Custom properties added to component instances in any way and can be accessed through `this`
152+ *
153+ * @example
154+ * Here is an example of adding a property `$router` to every component instance:
155+ * ```ts
156+ * import { createApp } from 'vue'
157+ * import { Router, createRouter } from 'vue-router'
158+ *
159+ * declare module '@vue/runtime-core' {
160+ * interface ComponentCustomProperties {
161+ * $router: Router
162+ * }
163+ * }
164+ *
165+ * // effectively adding the router to every component instance
166+ * const app = createApp({})
167+ * const router = createRouter()
168+ * app.config.globalProperties.$router = router
169+ *
170+ * const vm = app.mount('#app')
171+ * // we can access the router from the instance
172+ * vm.$router.push('/')
173+ * ```
174+ */
175+ export interface ComponentCustomProperties { }
0 commit comments