0Pricing
Vue Academy · Lesson

Provide/Inject for App-Level State

app.provide() for global state, theming, i18n, and avoiding Pinia for simple cases.

Application-Level provide

Besides component-level provide, you can provide on the app instance with app.provide. The value becomes available to every component in the app.

const app = createApp(App);
app.provide("appVersion", "1.0.0");

Providing Global Services

App-level provide is perfect for singletons like an auth service, an HTTP client, or a logger - things the whole app may need.

import { authService } from "./auth";
app.provide("auth", authService);

All lessons in this course

  1. The Prop Drilling Problem
  2. provide() in Parent Components
  3. inject() in Child Components
  4. Provide/Inject for App-Level State
← Back to Vue Academy