Implementing Global Variables in Vue.js 3: From Vue.prototype to Modern Patterns

Introduction

In Vue.js 2, developers typically used Vue.prototype to add global variables—a straightforward approach with certain limitations. With the release of Vue 3, the framework's architecture has undergone significant changes, leading to evolved methods for implementing global variables. This article systematically introduces multiple approaches in Vue 3 and analyzes their respective use cases.

Evolution from Vue 2 to Vue 3

In Vue 2, global variables were commonly implemented by modifying the prototype chain:

Vue.prototype.$myGlobalVariable = globalVariable

This allowed all Vue instances to access the variable via this.$myGlobalVariable. However, this global-scope design could lead to naming conflicts and maintenance challenges in large applications.

Vue 3 introduces the concept of application instances, where each Vue app is an independent instance created via createApp. Consequently, global configuration is now scoped to specific applications, enhancing code modularity and maintainability.

The app.config.globalProperties Approach

The most direct replacement is app.config.globalProperties. This is Vue 3's officially recommended alternative to Vue.prototype, specifically designed for sharing properties within an application scope.

Basic usage:

const app = createApp(RootComponent)
app.config.globalProperties.$myGlobalVariable = globalVariable

Properties set this way become available across all components in the application. In the Options API, they can be accessed via this.$myGlobalVariable; in templates, they can be used directly as {{ $myGlobalVariable }} without the this. prefix.

However, this approach has limitations in the Composition API's setup function. Since the component instance is not directly accessible in setup, globalProperties cannot be accessed via this. While workarounds using undocumented APIs like getCurrentInstance() exist, they are not recommended as they may compromise code maintainability and future compatibility.

The provide/inject Mechanism

As a more modern alternative, Vue 3 recommends the provide/inject mechanism. This approach requires components to explicitly declare dependencies, avoiding issues that can arise from implicit inheritance.

Providing variables at the application level:

const app = createApp(RootComponent)
app.provide('myGlobalVariable', globalVariable)

Injecting variables in child components:

Using <script setup> syntax:

<script setup>
import { inject } from 'vue'
const myGlobalVariable = inject('myGlobalVariable')
</script>

Using an explicit setup function:

import { inject } from 'vue'

export default {
  setup() {
    const myGlobalVariable = inject('myGlobalVariable')
    return {
      myGlobalVariable
    }
  }
}

Using the Options API:

export default {
  inject: ['myGlobalVariable']
}

Advantages of provide/inject:

1. Explicit dependency declaration improves code readability
2. Avoids naming conflicts—no need for $ prefix
3. Better type inference support
4. Natural integration with the Composition API

Practical Application Scenarios

In real-world development, the choice depends on specific requirements:

1. Migrating existing Vue 2 projects: For simple migrations, app.config.globalProperties is the most direct replacement, minimizing code changes.

2. New project development: provide/inject is recommended, especially when the project primarily uses the Composition API. This approach aligns better with Vue 3's design philosophy, offering improved type safety and code organization.

3. Third-party library development: Many Vue ecosystem libraries (e.g., Vue Router) use provide/inject to provide global functionality. For instance, Vue Router's useRoute composable is essentially a wrapper around inject.

Alternative Approaches

Beyond the two main methods, other techniques can achieve similar functionality:

1. ES modules: Sharing state via exports/imports, suitable for simple global configurations.

2. State management libraries: Such as Pinia or Vuex, ideal for complex global state management.

3. Global mixins: Although still supported in Vue 3, they are not recommended for new projects due to potential unpredictable side effects.

Best Practices Recommendations

Based on the analysis, we propose the following best practices:

1. Prefer provide/inject, especially for new projects and those primarily using the Composition API.

2. If globalProperties must be used, ensure access is limited to Options API components, avoiding usage within setup functions.

3. Provide default values for injected variables to enhance code robustness:

const myGlobalVariable = inject('myGlobalVariable', defaultValue)

4. Consider using TypeScript to enhance type safety, particularly when using provide/inject.

Conclusion

Vue 3's improvements in global variable implementation reflect trends in modern frontend frameworks: shifting from implicit global scopes to explicit dependency injection, and from prototype-based inheritance to composition-based reuse. While these changes increase initial learning curves, they offer better code maintainability, type safety, and architectural clarity.

Developers should choose the appropriate method based on project specifics: app.config.globalProperties may suffice for simple global configurations, while provide/inject or dedicated state management libraries are better for complex application states. Regardless of the chosen approach, understanding the underlying design philosophy and applicable scenarios is crucial.