Provide / Inject

<script setup>
import { provide } from 'vue'

provide('message', 'hello')
</script>

<script setup>
import { inject } from 'vue'

const message = inject('message')
console.log(message) // 'hello'
</script>

export function provide<T, K = InjectionKey<T> | string | number>(
  key: K,
  value: K extends InjectionKey<infer V> ? V : T,
): void

// Without default
export function inject<T>(key: InjectionKey<T> | string): T | undefined

// With default value
export function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: T,
  treatDefaultAsFactory?: false,
): T

// With factory default
export function inject<T>(
  key: InjectionKey<T> | string,
  defaultValue: T | (() => T),
  treatDefaultAsFactory: true,
): T

import { provide, inject, InjectionKey } from 'vue'

// Define the key with type
const MessageKey: InjectionKey<string> = Symbol('message')

// Provide
provide(MessageKey, 'hello')

// Inject (type is automatically inferred)
const message = inject(MessageKey) // string | undefined

// keys.ts
import type { InjectionKey, Ref } from 'vue'

export interface User {
  id: number
  name: string
}

export const UserKey: InjectionKey<Ref<User>> = Symbol('user')
export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme')

<!-- Provider.vue -->
<script setup lang="ts">
import { provide, ref } from 'vue'
import { UserKey } from './keys'

const user = ref({ id: 1, name: 'John' })
provide(UserKey, user)
</script>

<!-- Consumer.vue -->
<script setup lang="ts">
import { inject } from 'vue'
import { UserKey } from './keys'

const user = inject(UserKey) // Ref<User> | undefined
</script>

const message = inject('message', 'default message')

const data = inject(
  'data',
  () => ({ items: [] }),
  true  // treat as factory
)

<script setup>
import { provide, ref, readonly } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

// Provide both state and methods
provide('count', readonly(count))
provide('increment', increment)
</script>

<script setup>
import { inject } from 'vue'

const count = inject('count')
const increment = inject('increment')
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { provide, ref, readonly } from 'vue'

const state = ref({ count: 0 })

// Provide readonly version
provide('state', readonly(state))

// Provide mutation methods
provide('setState', (newState) => {
  state.value = newState
})
</script>

export function provide<T, K = InjectionKey<T> | string | number>(
  key: K,
  value: K extends InjectionKey<infer V> ? V : T,
): void {
  if (currentInstance) {
    let provides = currentInstance.provides
    // by default an instance inherits its parent's provides object
    // but when it needs to provide values of its own, it creates its
    // own provides object using parent provides object as prototype.
    // this way in `inject` we can simply look up injections from direct
    // parent and let the prototype chain do the work.
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
    if (parentProvides === provides) {
      provides = currentInstance.provides = Object.create(parentProvides)
    }
    provides[key as string] = value
  }
}

export function inject(
  key: InjectionKey<any> | string,
  defaultValue?: unknown,
  treatDefaultAsFactory = false,
) {
  const instance = getCurrentInstance()

  if (instance || currentApp) {
    let provides = currentApp
      ? currentApp._context.provides
      : instance
        ? instance.parent == null || instance.ce
          ? instance.vnode.appContext && instance.vnode.appContext.provides
          : instance.parent.provides
        : undefined

    if (provides && (key as string | symbol) in provides) {
      return provides[key as string]
    } else if (arguments.length > 1) {
      return treatDefaultAsFactory && isFunction(defaultValue)
        ? defaultValue.call(instance && instance.proxy)
        : defaultValue
    } else if (__DEV__) {
      warn(`injection "${String(key)}" not found.`)
    }
  }
}

export function hasInjectionContext(): boolean {
  return !!(getCurrentInstance() || currentApp)
}

import { inject, hasInjectionContext } from 'vue'

export function useRouter() {
  if (!hasInjectionContext()) {
    throw new Error('useRouter must be called inside setup()')
  }
  return inject(RouterKey)!
}

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.provide('message', 'hello from app')

app.mount('#app')

// plugin.ts
import type { App } from 'vue'

const MyPlugin = {
  install(app: App, options: any) {
    app.provide('pluginOptions', options)
  }
}

export default MyPlugin

// main.ts
import MyPlugin from './plugin'

app.use(MyPlugin, { apiUrl: 'https://api.example.com' })

<!-- ThemeProvider.vue -->
<script setup lang="ts">
import { provide, ref, readonly } from 'vue'
import type { InjectionKey, Ref } from 'vue'

export const ThemeKey: InjectionKey<{
  theme: Readonly<Ref<string>>
  setTheme: (theme: string) => void
}> = Symbol('theme')

const theme = ref('light')

function setTheme(newTheme: string) {
  theme.value = newTheme
}

provide(ThemeKey, {
  theme: readonly(theme),
  setTheme
})
</script>

<template>
  <div :class="`theme-${theme}`">
    <slot></slot>
  </div>
</template>

<!-- Child.vue -->
<script setup lang="ts">
import { inject } from 'vue'
import { ThemeKey } from './ThemeProvider.vue'

const themeContext = inject(ThemeKey)!
const { theme, setTheme } = themeContext
</script>

<template>
  <div>
    <p>Current theme: {{ theme }}</p>
    <button @click="setTheme('dark')">Dark</button>
    <button @click="setTheme('light')">Light</button>
  </div>
</template>

// store.ts
import { reactive, readonly, InjectionKey } from 'vue'

interface State {
  count: number
  user: { name: string } | null
}

export interface Store {
  state: Readonly<State>
  increment(): void
  setUser(name: string): void
}

export const StoreKey: InjectionKey<Store> = Symbol('store')

export function createStore(): Store {
  const state = reactive<State>({
    count: 0,
    user: null
  })

  function increment() {
    state.count++
  }

  function setUser(name: string) {
    state.user = { name }
  }

  return {
    state: readonly(state),
    increment,
    setUser
  }
}

<!-- App.vue -->
<script setup>
import { provide } from 'vue'
import { StoreKey, createStore } from './store'

const store = createStore()
provide(StoreKey, store)
</script>

<!-- Component.vue -->
<script setup>
import { inject } from 'vue'
import { StoreKey } from './store'

const store = inject(StoreKey)!
</script>

<template>
  <div>
    <p>Count: {{ store.state.count }}</p>
    <button @click="store.increment">Increment</button>
  </div>
</template>

// api.ts
import { InjectionKey } from 'vue'

export interface ApiClient {
  get<T>(url: string): Promise<T>
  post<T>(url: string, data: any): Promise<T>
}

export const ApiKey: InjectionKey<ApiClient> = Symbol('api')

export function createApiClient(baseUrl: string): ApiClient {
  return {
    async get<T>(url: string): Promise<T> {
      const response = await fetch(`${baseUrl}${url}`)
      return response.json()
    },
    async post<T>(url: string, data: any): Promise<T> {
      const response = await fetch(`${baseUrl}${url}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
      })
      return response.json()
    }
  }
}

// main.ts
import { createApp } from 'vue'
import { ApiKey, createApiClient } from './api'
import App from './App.vue'

const app = createApp(App)
const api = createApiClient('https://api.example.com')

app.provide(ApiKey, api)
app.mount('#app')