app.provide()
Provides a value application-wide from the app instance.
Syntax
app.provide<T>(key, value): AppParameters
| Name | Type | Required | Description |
|---|---|---|---|
key | InjectionKey<T> | string | No | Identifier injectable by any component. |
value | T | No | The globally provided value. |
Returns
App — The app instance, for chaining.
Examples
// main.ts
import { createApp, type InjectionKey } from 'vue';
import App from './App.vue';
export const ApiKey = Symbol() as InjectionKey<string>;
const app = createApp(App);
app.provide(ApiKey, 'https://api.example.com');
app.mount('#app');
<script setup lang="ts">
import { inject } from 'vue';
import { ApiKey } from '../main';
const baseUrl = inject(ApiKey);
</script>
Notes
app.provide makes a value injectable by every component in the app, ideal for
app-wide config, plugins, or services without prop drilling. It is the
Composition-API equivalent of a global provider and can be chained with other
app methods. Components retrieve it with inject().