Tidak ada yang perlu dipasang.

Vue sudah menyediakan padanannya — provide() dan inject(). Halaman ini menjelaskan cara memakainya.

Vue menyediakannya sebagai dua fungsi bawaan:

// Di komponen induk
import { provide } from 'vue'
provide('theme', themeRef)

// Di komponen anak, sedalam apa pun
import { inject } from 'vue'
const theme = inject('theme')

Aman tipe

Pakai InjectionKey supaya tipenya ikut terbawa, dan salah ketik jadi error saat build — bukan undefined saat dijalankan.

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

export interface Theme {
  dark: Ref<boolean>
  toggle: () => void
}

export const themeKey = Symbol('theme') as InjectionKey<Theme>

provide(themeKey, { dark, toggle })   // induk
const theme = inject(themeKey)          // anak — tipenya sudah `Theme`

Kalau wajib ada

inject mengembalikan undefined kalau tidak ada yang menyediakannya. Untuk nilai yang memang wajib, buat pembungkus kecil yang melempar dengan pesan yang menyebut sebabnya:

export function useTheme() {
  const theme = inject(themeKey)
  if (!theme)
    throw new Error('useTheme() was called outside a theme provider')
  return theme
}

Itu yang membedakan error yang bisa langsung dibaca dari Cannot read properties of undefined di tempat yang jauh dari sebabnya.

Requirements

Requirement	Value
Project	Vue 3.5+, alias @ — disiapkan kliping init
Files	lib/create-context.ts

API Reference

export function createContext<T>(rootName: string)

Parameters

Parameter	Type	Default	Description
rootName	string	—	Name of the root component, used in the error when a part is outside it.

Returns

readonly [(value: T) => void, (consumerName: string) => T, () => T \| null] — [provide, inject, injectOptional]: inject throws outside the root, injectOptional returns null.