What is Provide/Inject in Vue?

// Parent component
import { provide } from 'vue'

provide('message', 'Hello from parent')
provide('count', ref(0))

// Deeply nested child
import { inject } from 'vue'

const message = inject('message')
const count = inject('count')

// If not provided, use default
const message = inject('message', 'Default message')

// Factory function for default
const config = inject('config', () => ({ theme: 'dark' }))

// Parent
const count = ref(0)
provide('count', count)

// Also provide update function
provide('updateCount', (value) => {
  count.value = value
})

// Child
const count = inject('count')
const updateCount = inject('updateCount')

import { InjectionKey } from 'vue'

const countKey: InjectionKey<Ref<number>> = Symbol()

// Parent
provide(countKey, ref(0))

// Child
const count = inject(countKey) // Typed!