1# Use Global Properties Sparingly in Plugins
2 
3## Rule
4 
5When using `app.config.globalProperties` in Vue plugins, use them sparingly and with clear naming conventions. Excessive global properties lead to confusion, naming conflicts, and debugging difficulties.
6 
7## Why This Matters
8 
91. **Implicit dependencies**: Global properties make component dependencies invisible, making code harder to understand and maintain.
10 
112. **Naming collisions**: Multiple plugins may try to use the same property name (e.g., `$http`, `$api`), causing silent overwrites.
12 
133. **Debugging difficulty**: When issues arise, tracing back to which plugin provides a global property is challenging.
14 
154. **IDE limitations**: Global properties may not have proper autocomplete or type checking without careful configuration.
16 
175. **Testing complexity**: Global state is harder to mock and isolate in unit tests.
18 
19## Bad Practice
20 
21```typescript
22// Too many global properties from various plugins
23app.config.globalProperties.$http = axios
24app.config.globalProperties.$api = apiClient
25app.config.globalProperties.$auth = authService
26app.config.globalProperties.$translate = i18n.translate
27app.config.globalProperties.$format = formatters
28app.config.globalProperties.$utils = utilities
29app.config.globalProperties.$config = appConfig
30app.config.globalProperties.$logger = logger
31 
32// In component - where did all these come from?
33export default {
34  mounted() {
35    this.$logger.info('Mounted')
36    const data = await this.$http.get(this.$config.apiUrl)
37    this.$api.process(this.$utils.transform(data))
38  }
39}
40```
41 
42## Good Practice
43 
44```typescript
45// Use provide/inject for most functionality
46export default {
47  install(app, options) {
48    // Provide services via injection
49    app.provide('api', apiClient)
50    app.provide('auth', authService)
51    app.provide('i18n', i18n)
52 
53    // Reserve globalProperties for truly global template helpers
54    // that are used extensively in templates across the app
55    app.config.globalProperties.$t = i18n.translate  // Common convention
56  }
57}
58 
59// In component - explicit dependencies
60<script setup>
61import { inject } from 'vue'
62 
63const api = inject('api')
64const auth = inject('auth')
65</script>
66 
67<template>
68  <!-- $t is acceptable for common template-only usage -->
69  <h1>{{ $t('welcome') }}</h1>
70</template>
71```
72 
73## Naming Conventions
74 
75If you do use globalProperties:
76 
771. **Use `$` prefix**: This is the Vue convention and avoids conflicts with component data/methods
782. **Use unique prefixes for your library**: e.g., `$myLib_translate` for third-party plugins
793. **Document all global properties**: Keep a central registry of what each plugin provides
80 
81```typescript
82// Good: namespaced to avoid conflicts
83app.config.globalProperties.$myPlugin = {
84  translate: (key) => /* ... */,
85  format: (value) => /* ... */
86}
87 
88// Usage
89{{ $myPlugin.translate('key') }}
90```
91 
92## Auditing Global Properties
93 
94You can inspect all global properties for debugging:
95 
96```typescript
97console.log(app.config.globalProperties)
98```
99 
100## When Global Properties Are Acceptable
101 
1021. **Template-only utilities** used very frequently (like `$t` for translations)
1032. **Legacy migration** when transitioning from Vue 2
1043. **Libraries that need Options API compatibility** (but prefer also providing inject)
105 
106## References
107 
108- [Vue.js Plugins Documentation](https://vuejs.org/guide/reusability/plugins.html)
109- [Vue.js Global Properties](https://vuejs.org/api/application.html#app-config-globalproperties)
110