Vue Academy · Lesson

inject() in Child Components

inject() with default values, required injection, Symbol keys for namespacing.

The inject Function

inject retrieves a value an ancestor provided, looked up by the same key. Call it in <script setup>.

import { inject } from "vue";
const theme = inject("theme");

If the ancestor provided a ref, the injected value is that same ref. Reading theme.value stays reactive and updates when the provider changes it.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)