Provide/Inject in Vue.js
From the Vue.js cheat sheet · Component Communication · verified Jul 2026
Provide/Inject
Dependency injection for deeply nested components
vue
<!-- Vue 3 Provider -->
<script setup>
import { provide, ref } from 'vue'
const user = ref({ name: 'John' })
provide('user', user)
provide('theme', 'dark')
</script>
<!-- Vue 3 Consumer -->
<script setup>
import { inject } from 'vue'
const user = inject('user')
const theme = inject('theme', 'light') // with default
</script>💡 Provide/Inject allows passing data to deeply nested components
⚡ Injected values are not reactive in Vue 2 unless wrapped in function
📌 Use Symbol keys for type safety and avoiding collisions
🔥 Great for plugin systems and avoiding prop drilling
Continue with Vue.js
Save the full cheat sheet or work through every related task.