Snippet

Scoping Dependency Injection Keys with JavaScript Symbols in Vue

Using JavaScript Symbol primitives as injection tokens guarantees collision-free provide/inject dependencies across large Vue component trees.

snippet.js

javascript

import { provide, inject } from 'vue';
 
export const AUTH_CONTEXT_KEY = Symbol('AuthContext');
 
export function provideAuth(authService) {
  provide(AUTH_CONTEXT_KEY, authService);
}
 
export function useAuth() {
  const auth = inject(AUTH_CONTEXT_KEY);
  if (!auth) {
    throw new Error('useAuth must be called within an AuthProvider scope');
  }
  return auth;
}

vue

Breakdown

export const AUTH_CONTEXT_KEY = Symbol('AuthContext');

Creates a unique, immutable Symbol token used as the DI lookup key.

provide(AUTH_CONTEXT_KEY, authService);

Registers the dependency under the unique Symbol key.

const auth = inject(AUTH_CONTEXT_KEY);

Retrieves the value bound to the specific Symbol identifier.

if (!auth) throw new Error(...);

Validates that the required dependency is present in the ancestor hierarchy.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Scoping Dependency Injection Keys with JavaScript Symbols in Vue

Related