diff --git a/packages/radix-vue/src/Combobox/ComboboxArrow.vue b/packages/radix-vue/src/Combobox/ComboboxArrow.vue
index e2fbe1f1e..288f90c06 100644
--- a/packages/radix-vue/src/Combobox/ComboboxArrow.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxArrow.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
-import { COMBOBOX_CONTENT_INJECTION_KEY } from './ComboboxContentImpl.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
+import { injectComboboxContentContext } from './ComboboxContentImpl.vue'
 import { PopperArrow, type PopperArrowProps } from '@/Popper'
 
 const props = defineProps<ComboboxArrowProps>()
-const context = inject(COMBOBOX_INJECT_KEY)
-const contentContext = inject(COMBOBOX_CONTENT_INJECTION_KEY)
+const rootContext = injectComboboxRootContext()
+const contentContext = injectComboboxContentContext()
 
 export interface ComboboxArrowProps extends PopperArrowProps {}
 </script>
 
 <template>
   <PopperArrow
-    v-if="context?.open.value && contentContext?.position.value === 'popper'"
+    v-if="rootContext.open.value && contentContext.position.value === 'popper'"
     v-bind="props"
   >
     <slot />
diff --git a/packages/radix-vue/src/Combobox/ComboboxCancel.vue b/packages/radix-vue/src/Combobox/ComboboxCancel.vue
index 6c8a93eb5..0ac6b15bd 100644
--- a/packages/radix-vue/src/Combobox/ComboboxCancel.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxCancel.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxCancelProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<ComboboxCancelProps>(), {
   as: 'button',
 })
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 
 function handleClick() {
-  context!.searchTerm.value = ''
-  context?.inputElement.value?.focus()
+  rootContext.searchTerm.value = ''
+  rootContext.inputElement.value?.focus()
 }
 </script>
 
diff --git a/packages/radix-vue/src/Combobox/ComboboxContent.vue b/packages/radix-vue/src/Combobox/ComboboxContent.vue
index cf53372f4..179a4a559 100644
--- a/packages/radix-vue/src/Combobox/ComboboxContent.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxContent.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 import ComboboxContentImpl, { type ComboboxContentImplEmits, type ComboboxContentImplProps } from './ComboboxContentImpl.vue'
 import { Presence } from '@/Presence'
 import { useForwardPropsEmits } from '@/shared'
@@ -12,11 +11,11 @@ const props = defineProps<ComboboxContentProps>()
 const emits = defineEmits<ComboboxContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 </script>
 
 <template>
-  <Presence :present="context!.open.value">
+  <Presence :present="rootContext.open.value">
     <ComboboxContentImpl v-bind="{ ...forwarded, ...$attrs }">
       <slot />
     </ComboboxContentImpl>
diff --git a/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue b/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
index 5b8f3053e..91317aa5a 100644
--- a/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxContentImpl.vue
@@ -1,4 +1,10 @@
 <script lang="ts">
+import {
+  createContext,
+  useBodyScrollLock,
+  useHideOthers,
+} from '@/shared'
+
 export type ComboboxContentImplEmits = {
   closeAutoFocus: [event: Event]
   /**
@@ -19,26 +25,20 @@ export interface ComboboxContentImplProps extends PopperContentProps {
   disableOutsidePointerEvents?: boolean
 }
 
-export const COMBOBOX_CONTENT_INJECTION_KEY = Symbol() as InjectionKey<{
-  position: Ref<'inline' | 'popper'>
-}>
+export const [injectComboboxContentContext, provideComboboxContentContext]
+  = createContext<{
+    position: Ref<'inline' | 'popper'>
+  }>('ComboboxContent')
 </script>
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  inject,
   onMounted,
-  provide,
   toRefs,
 } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
-import {
-  useBodyScrollLock,
-  useHideOthers,
-} from '@/shared'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 import {
   DismissableLayer,
   type PointerDownOutsideEvent,
@@ -52,7 +52,7 @@ const props = withDefaults(defineProps<ComboboxContentImplProps>(), {
 const emits = defineEmits<ComboboxContentImplEmits>()
 
 const { position } = toRefs(props)
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 
 useBodyScrollLock(props.bodyLock)
 
@@ -66,11 +66,11 @@ const pickedProps = computed(() => {
 })
 
 function handleLeave(ev: PointerEvent) {
-  context?.onSelectedValueChange('')
+  rootContext.onSelectedValueChange('')
 }
 
 onMounted(() => {
-  context?.onContentElementChange(currentElement.value)
+  rootContext.onContentElementChange(currentElement.value)
 })
 
 const popperStyle = {
@@ -86,9 +86,7 @@ const popperStyle = {
   '--radix-combobox-trigger-height': 'var(--radix-popper-anchor-height)',
 }
 
-provide(COMBOBOX_CONTENT_INJECTION_KEY, {
-  position,
-})
+provideComboboxContentContext({ position })
 </script>
 
 <template>
@@ -96,21 +94,21 @@ provide(COMBOBOX_CONTENT_INJECTION_KEY, {
     as-child
     :disable-outside-pointer-events="disableOutsidePointerEvents"
     @focus-outside.prevent
-    @dismiss="context?.onOpenChange(false)"
+    @dismiss="rootContext.onOpenChange(false)"
     @escape-key-down="emits('escapeKeyDown', $event)"
     @pointer-down-outside="(ev) => {
       // if clicking inside the combobox, prevent dismiss
-      if (context?.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
+      if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()
       emits('pointerDownOutside', ev)
     }"
   >
     <component
       :is="position === 'popper' ? PopperContent : Primitive "
       v-bind="{ ...$attrs, ...pickedProps }"
-      :id="context?.contentId"
+      :id="rootContext.contentId"
       ref="primitiveElement"
       role="listbox"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       :style="{
         // flex layout so we can place the scroll buttons properly
         display: 'flex',
diff --git a/packages/radix-vue/src/Combobox/ComboboxEmpty.vue b/packages/radix-vue/src/Combobox/ComboboxEmpty.vue
index 9f9005091..8b27ac68a 100644
--- a/packages/radix-vue/src/Combobox/ComboboxEmpty.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxEmpty.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { computed } from 'vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxEmptyProps extends PrimitiveProps {}
 const props = defineProps<ComboboxEmptyProps>()
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 // if no options, then show this
-const isEmpty = computed(() => context?.searchTerm.value && context.filteredOptions.value.length === 0)
+const isEmpty = computed(() => rootContext.searchTerm.value && rootContext.filteredOptions.value.length === 0)
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxGroup.vue b/packages/radix-vue/src/Combobox/ComboboxGroup.vue
index 37906b910..1b56d87f0 100644
--- a/packages/radix-vue/src/Combobox/ComboboxGroup.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxGroup.vue
@@ -1,34 +1,37 @@
 <script lang="ts">
+import { createContext, useId } from '@/shared'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
+
 export interface ComboboxGroupProps extends PrimitiveProps {}
 
-interface SelectGroupContextValue {
+type ComboboxGroupContext = {
   id: string
   options?: Ref<Array<string | object>>
 }
-export const COMBOBOX_GROUP_INJECTION_KEY
-  = Symbol() as InjectionKey<SelectGroupContextValue>
+
+export const [injectComboboxGroupContext, provideComboboxGroupContext]
+  = createContext<ComboboxGroupContext>('ComboboxGroup')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, computed, inject, provide, ref } from 'vue'
+import { type Ref, computed, ref } from 'vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useId } from '@/shared'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
 
 const props = defineProps<ComboboxGroupProps>()
 
 const id = useId()
 const options = ref<Array<string | object>>([])
-provide(COMBOBOX_GROUP_INJECTION_KEY, {
-  id,
-  options,
-})
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 const isAnyChildInFilteredOptions = computed(() =>
-  !context?.isUserInputted.value
+  !rootContext.isUserInputted.value
    || options.value.length === 0
-   || context?.filteredOptions.value.map(i => JSON.stringify(i)).some(i => options.value.map(i => JSON.stringify(i)).includes(i)))
+   || rootContext.filteredOptions.value.map(i => JSON.stringify(i)).some(i => options.value.map(i => JSON.stringify(i)).includes(i)))
+
+provideComboboxGroupContext({
+  id,
+  options,
+})
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxInput.vue b/packages/radix-vue/src/Combobox/ComboboxInput.vue
index 757c65e25..a3cc54420 100644
--- a/packages/radix-vue/src/Combobox/ComboboxInput.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, inject, onMounted, ref } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { computed, onMounted, ref } from 'vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxInputProps {
   type?: string
@@ -12,44 +12,44 @@ const props = withDefaults(defineProps<ComboboxInputProps>(), {
   type: 'text',
 })
 
-const context = inject(COMBOBOX_INJECT_KEY)
+const rootContext = injectComboboxRootContext()
 
 const elRef = ref()
 onMounted(() => {
-  context!.inputElement = elRef
-  context?.onInputElementChange(elRef.value)
+  rootContext.inputElement = elRef
+  rootContext.onInputElementChange(elRef.value)
 })
 
-const disabled = computed(() => props.disabled || context?.disabled.value || false)
+const disabled = computed(() => props.disabled || rootContext.disabled.value || false)
 
 function handleKeyDown(ev: KeyboardEvent) {
-  if (!context?.open.value)
-    context?.onOpenChange(true)
+  if (!rootContext.open.value)
+    rootContext.onOpenChange(true)
   else
-    context.onInputNavigation(ev.key === 'ArrowUp' ? 'up' : 'down')
+    rootContext.onInputNavigation(ev.key === 'ArrowUp' ? 'up' : 'down')
 }
 
 function handleHomeEnd(ev: KeyboardEvent) {
-  if (!context?.open.value)
+  if (!rootContext.open.value)
     return
-  context.onInputNavigation(ev.key === 'Home' ? 'home' : 'end')
+  rootContext.onInputNavigation(ev.key === 'Home' ? 'home' : 'end')
 }
 
 function handleInput() {
-  if (!context?.open.value)
-    context?.onOpenChange(true)
+  if (!rootContext.open.value)
+    rootContext.onOpenChange(true)
 
-  context!.isUserInputted.value = true
+  rootContext.isUserInputted.value = true
 }
 </script>
 
 <template>
   <input
     ref="elRef"
-    v-model="context!.searchTerm.value"
+    v-model="rootContext.searchTerm.value"
     :type="type"
-    :aria-expanded="context?.open.value"
-    :aria-controls="context?.contentId"
+    :aria-expanded="rootContext.open.value"
+    :aria-controls="rootContext.contentId"
     :disabled="disabled"
     :aria-disabled="disabled ?? undefined"
     aria-autocomplete="list"
@@ -59,7 +59,7 @@ function handleInput() {
     :autofocus="autoFocus"
     @input="handleInput"
     @keydown.down.up.prevent="handleKeyDown"
-    @keydown.enter="context?.onInputEnter"
+    @keydown.enter="rootContext.onInputEnter"
     @keydown.home.end.prevent="handleHomeEnd"
   >
 </template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxItem.vue b/packages/radix-vue/src/Combobox/ComboboxItem.vue
index 00a5bcb21..1abc4b62f 100644
--- a/packages/radix-vue/src/Combobox/ComboboxItem.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxItem.vue
@@ -1,10 +1,12 @@
 <script lang="ts">
-interface ComboboxItemContextValue {
+import { createContext, useId } from '@/shared'
+
+type ComboboxItemContext = {
   isSelected: Ref<boolean>
 }
 
-export const COMBOBOX_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<ComboboxItemContextValue>
+export const [injectComboboxItemContext, provideComboboxItemContext]
+  = createContext<ComboboxItemContext>('ComboboxItem')
 
 export type ComboboxItemEmits = {
   select: [value: string | object]
@@ -19,51 +21,47 @@ export interface ComboboxItemProps extends PrimitiveProps {
 
 <script setup lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
   getCurrentInstance,
-  inject,
   nextTick,
   onMounted,
   onUnmounted,
-  provide,
   ref,
   toRefs,
 } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
-import { COMBOBOX_GROUP_INJECTION_KEY } from './ComboboxGroup.vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
+import { injectComboboxGroupContext } from './ComboboxGroup.vue'
 
 import {
   Primitive,
   type PrimitiveProps,
   usePrimitiveElement,
 } from '@/Primitive'
-import { useId } from '@/shared'
 
 const props = defineProps<ComboboxItemProps>()
 const emits = defineEmits<ComboboxItemEmits>()
 
 const { disabled } = toRefs(props)
 
-const context = inject(COMBOBOX_INJECT_KEY)
-const groupContext = inject(COMBOBOX_GROUP_INJECTION_KEY)
+const rootContext = injectComboboxRootContext()
+const groupContext = injectComboboxGroupContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 const isSelected = computed(() =>
-  context?.multiple.value && Array.isArray(context.modelValue.value)
-    ? context.modelValue.value?.includes(props.value as never)
-    : JSON.stringify(context?.modelValue?.value) === JSON.stringify(props.value),
+  rootContext.multiple.value && Array.isArray(rootContext.modelValue.value)
+    ? rootContext.modelValue.value?.includes(props.value as never)
+    : JSON.stringify(rootContext.modelValue?.value) === JSON.stringify(props.value),
 )
 
-const isFocused = computed(() => JSON.stringify(context?.selectedValue.value) === JSON.stringify(props.value))
+const isFocused = computed(() => JSON.stringify(rootContext.selectedValue.value) === JSON.stringify(props.value))
 const textValue = ref(props.textValue ?? '')
 const textId = useId()
 
 const isInOption = computed(() =>
-  context?.isUserInputted.value
-    ? context?.searchTerm.value === ''
-     || context?.filteredOptions.value.map(i => JSON.stringify(i)).includes(JSON.stringify(props.value))
+  rootContext.isUserInputted.value
+    ? rootContext.searchTerm.value === ''
+     || rootContext.filteredOptions.value.map(i => JSON.stringify(i)).includes(JSON.stringify(props.value))
     : true)
 
 async function handleSelect(ev?: PointerEvent) {
@@ -72,7 +70,7 @@ async function handleSelect(ev?: PointerEvent) {
     return
 
   if (!disabled.value) {
-    context!.onValueChange(props.value)
+    rootContext.onValueChange(props.value)
     emits('select', props.value)
   }
 }
@@ -82,7 +80,7 @@ async function handlePointerMove(event: PointerEvent) {
   if (event.defaultPrevented)
     return
 
-  context?.onSelectedValueChange(props.value)
+  rootContext.onSelectedValueChange(props.value)
 }
 
 if (props.value === '') {
@@ -94,10 +92,10 @@ if (props.value === '') {
 const instance = getCurrentInstance()
 onMounted(() => {
   if (instance)
-    context?.optionsInstance.value.add(instance)
+    rootContext.optionsInstance.value.add(instance)
 
-  if (!groupContext?.options?.value?.includes(props.value))
-    groupContext?.options?.value.push(props.value)
+  if (!groupContext.options?.value?.includes(props.value))
+    groupContext.options?.value.push(props.value)
 
   if (!textValue.value && currentElement.value?.textContent)
     textValue.value = currentElement.value.textContent
@@ -105,10 +103,10 @@ onMounted(() => {
 
 onUnmounted(() => {
   if (instance)
-    context?.optionsInstance.value.delete(instance)
+    rootContext.optionsInstance.value.delete(instance)
 })
 
-provide(COMBOBOX_ITEM_INJECTION_KEY, {
+provideComboboxItemContext({
   isSelected,
 })
 </script>
diff --git a/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue b/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue
index bd7e49f8d..6ba5fed5e 100644
--- a/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxItemIndicator.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_ITEM_INJECTION_KEY } from './ComboboxItem.vue'
+import { injectComboboxItemContext } from './ComboboxItem.vue'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 
 export interface ComboboxItemIndicatorProps extends PrimitiveProps {}
@@ -8,11 +7,11 @@ const props = withDefaults(defineProps<ComboboxItemIndicatorProps>(), {
   as: 'span',
 })
 
-const itemContext = inject(COMBOBOX_ITEM_INJECTION_KEY)
+const itemContext = injectComboboxItemContext()
 </script>
 
 <template>
-  <Primitive v-if="itemContext?.isSelected.value" aria-hidden v-bind="props">
+  <Primitive v-if="itemContext.isSelected.value" aria-hidden v-bind="props">
     <slot />
   </Primitive>
 </template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxLabel.vue b/packages/radix-vue/src/Combobox/ComboboxLabel.vue
index fe6afc79a..9d973427d 100644
--- a/packages/radix-vue/src/Combobox/ComboboxLabel.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxLabel.vue
@@ -7,16 +7,13 @@ export interface ComboboxLabelProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue'
-import { COMBOBOX_GROUP_INJECTION_KEY } from './ComboboxGroup.vue'
+import { injectComboboxGroupContext } from './ComboboxGroup.vue'
 
 const props = withDefaults(defineProps<ComboboxLabelProps>(), {
   as: 'label',
 })
 
-const groupContext = inject(COMBOBOX_GROUP_INJECTION_KEY, {
-  id: '',
-})
+const groupContext = injectComboboxGroupContext({ id: '' })
 </script>
 
 <template>
diff --git a/packages/radix-vue/src/Combobox/ComboboxRoot.vue b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
index 0a0d3874e..08c6142a1 100644
--- a/packages/radix-vue/src/Combobox/ComboboxRoot.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxRoot.vue
@@ -1,5 +1,7 @@
 <script lang="ts">
-interface ComboboxContextValue {
+import { createContext, useCollection, useId } from '@/shared'
+
+type ComboboxRootContext = {
   modelValue: Ref<string | Array<string> | object | Array<object>>
   onValueChange: (val: string | object) => void
   searchTerm: Ref<string>
@@ -23,7 +25,8 @@ interface ComboboxContextValue {
   parentElement: Ref<HTMLElement | undefined>
 }
 
-export const COMBOBOX_INJECT_KEY = Symbol() as InjectionKey<ComboboxContextValue>
+export const [injectComboboxRootContext, provideComboboxRootContext]
+  = createContext<ComboboxRootContext>('ComboboxRoot')
 
 export type ComboboxRootEmits = {
   'update:modelValue': [value: string | Array<string> | object | Array<object>]
@@ -48,10 +51,9 @@ export interface ComboboxRootProps extends PrimitiveProps {
 <script setup lang="ts">
 import { PopperRoot } from '@/Popper'
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import { useCollection, useId } from '@/shared'
 import type { Direction } from '@/shared/types'
 import { useVModel } from '@vueuse/core'
-import { type ComponentInternalInstance, type ComputedRef, type InjectionKey, type Ref, computed, nextTick, onMounted, provide, ref, toRefs, watch } from 'vue'
+import { type ComponentInternalInstance, type ComputedRef, type Ref, computed, nextTick, onMounted, ref, toRefs, watch } from 'vue'
 import { VisuallyHiddenInput } from '@/VisuallyHidden'
 
 const props = withDefaults(defineProps<ComboboxRootProps>(), {
@@ -147,7 +149,7 @@ const isFormControl = computed(() =>
   parentElement.value ? Boolean(parentElement.value.closest('form')) : true,
 )
 
-provide(COMBOBOX_INJECT_KEY, {
+provideComboboxRootContext({
   searchTerm,
   modelValue,
   onValueChange,
diff --git a/packages/radix-vue/src/Combobox/ComboboxTrigger.vue b/packages/radix-vue/src/Combobox/ComboboxTrigger.vue
index 962359244..d60d888e5 100644
--- a/packages/radix-vue/src/Combobox/ComboboxTrigger.vue
+++ b/packages/radix-vue/src/Combobox/ComboboxTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { computed, inject } from 'vue'
-import { COMBOBOX_INJECT_KEY } from './ComboboxRoot.vue'
+import { computed } from 'vue'
+import { injectComboboxRootContext } from './ComboboxRoot.vue'
 
 export interface ComboboxTriggerProps extends PrimitiveProps {
   disabled?: boolean
@@ -11,8 +11,8 @@ const props = withDefaults(defineProps<ComboboxTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(COMBOBOX_INJECT_KEY)
-const disabled = computed(() => props.disabled || context?.disabled.value || false)
+const rootContext = injectComboboxRootContext()
+const disabled = computed(() => props.disabled || rootContext.disabled.value || false)
 </script>
 
 <template>
@@ -22,13 +22,13 @@ const disabled = computed(() => props.disabled || context?.disabled.value || fal
     tabindex="-1"
     aria-label="Show popup"
     aria-haspopup="listbox"
-    :aria-expanded="context?.open.value"
-    :aria-controls="context?.contentId"
-    :data-state="context?.open.value ? 'open' : 'closed'"
+    :aria-expanded="rootContext.open.value"
+    :aria-controls="rootContext.contentId"
+    :data-state="rootContext.open.value ? 'open' : 'closed'"
     :disabled="disabled"
     :data-disabled="disabled"
     :aria-disabled="disabled ?? undefined"
-    @click="context?.onOpenChange(!context.open.value)"
+    @click="rootContext.onOpenChange(!rootContext.open.value)"
   >
     <slot />
   </Primitive>
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
index 9eb458ded..6556bcd3b 100644
--- a/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
+++ b/packages/radix-vue/src/DropdownMenu/DropdownMenuContent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { DROPDOWN_MENU_INJECTION_KEY } from './DropdownMenuRoot.vue'
+import { ref } from 'vue'
+import { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'
 import {
   MenuContent,
   type MenuContentEmits,
@@ -15,7 +15,7 @@ const props = defineProps<DropdownMenuContentProps>()
 const emits = defineEmits<DropdownMenuContentEmits>()
 const forwarded = useForwardPropsEmits(props, emits)
 
-const context = inject(DROPDOWN_MENU_INJECTION_KEY)
+const rootContext = injectDropdownMenuRootContext()
 
 const hasInteractedOutsideRef = ref(false)
 
@@ -25,7 +25,7 @@ function handleCloseAutoFocus(event: Event) {
     return
   if (!hasInteractedOutsideRef.value) {
     setTimeout(() => {
-      context?.triggerElement.value?.focus()
+      rootContext.triggerElement.value?.focus()
     }, 0)
   }
   hasInteractedOutsideRef.value = false
@@ -38,8 +38,8 @@ function handleCloseAutoFocus(event: Event) {
 <template>
   <MenuContent
     v-bind="forwarded"
-    :id="context?.contentId"
-    :aria-labelledby="context?.triggerId"
+    :id="rootContext.contentId"
+    :aria-labelledby="rootContext?.triggerId"
     :style="{
       '--radix-dropdown-menu-content-transform-origin':
         'var(--radix-popper-transform-origin)',
@@ -58,7 +58,7 @@ function handleCloseAutoFocus(event: Event) {
       const originalEvent = event.detail.originalEvent as PointerEvent;
       const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
       const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      if (!context?.modal.value || isRightClick) hasInteractedOutsideRef = true;
+      if (!rootContext.modal.value || isRightClick) hasInteractedOutsideRef = true;
     }"
   >
     <slot />
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
index 30de6c527..38e970fcd 100644
--- a/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
+++ b/packages/radix-vue/src/DropdownMenu/DropdownMenuRoot.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
-import type { InjectionKey, Ref } from 'vue'
+import type { Ref } from 'vue'
 import type { Direction } from '../shared/types'
+import { createContext, useId } from '@/shared'
 
 export interface DropdownMenuRootProps {
   open?: boolean
@@ -12,10 +13,7 @@ export type DropdownMenuRootEmits = {
   'update:open': [value: boolean]
 }
 
-export const DROPDOWN_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<DropdownMenuProvideValue>
-
-export interface DropdownMenuProvideValue {
+export interface DropdownMenuRootContext {
   open: Readonly<Ref<boolean>>
   onOpenChange(open: boolean): void
   onOpenToggle(): void
@@ -25,13 +23,15 @@ export interface DropdownMenuProvideValue {
   modal: Ref<boolean>
   dir: Ref<Direction>
 }
+
+export const [injectDropdownMenuRootContext, provideDropdownMenuRootContext]
+  = createContext<DropdownMenuRootContext>('DropdownMenuRoot')
 </script>
 
 <script setup lang="ts">
-import { provide, ref, toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { MenuRoot } from '@/Menu'
-import { useId } from '@/shared'
 
 const props = withDefaults(defineProps<DropdownMenuRootProps>(), {
   modal: true,
@@ -48,7 +48,7 @@ const open = useVModel(props, 'open', emit, {
 const triggerElement = ref<HTMLElement>()
 
 const { modal, dir } = toRefs(props)
-provide<DropdownMenuProvideValue>(DROPDOWN_MENU_INJECTION_KEY, {
+provideDropdownMenuRootContext({
   open,
   onOpenChange: (value) => {
     open.value = value
diff --git a/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue b/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
index aa4cf96cc..3864f3009 100644
--- a/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
+++ b/packages/radix-vue/src/DropdownMenu/DropdownMenuTrigger.vue
@@ -5,8 +5,8 @@ export interface DropdownMenuTriggerProps extends PrimitiveProps {
 </script>
 
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { DROPDOWN_MENU_INJECTION_KEY } from './DropdownMenuRoot.vue'
+import { onMounted } from 'vue'
+import { injectDropdownMenuRootContext } from './DropdownMenuRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -18,47 +18,47 @@ const props = withDefaults(defineProps<DropdownMenuTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(DROPDOWN_MENU_INJECTION_KEY)
+const rootContext = injectDropdownMenuRootContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
 
 onMounted(() => {
-  context!.triggerElement = triggerElement
+  rootContext.triggerElement = triggerElement
 })
 </script>
 
 <template>
   <MenuAnchor as-child>
     <Primitive
-      :id="context?.triggerId"
+      :id="rootContext.triggerId"
       ref="primitiveElement"
       :type="as === 'button' ? 'button' : undefined"
       :as-child="props.asChild"
       :as="as"
       aria-haspopup="menu"
-      :aria-expanded="context?.open.value"
-      :aria-controls="context?.open.value ? context?.contentId : undefined"
+      :aria-expanded="rootContext.open.value"
+      :aria-controls="rootContext.open.value ? rootContext.contentId : undefined"
       :data-disabled="disabled ? '' : undefined"
       :disabled="disabled"
-      :data-state="context?.open.value ? 'open' : 'closed'"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
       @pointerdown="
         (event) => {
           // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
           // but not when the control key is pressed (avoiding MacOS right click)
           if (!disabled && event.button === 0 && event.ctrlKey === false) {
-            context?.onOpenToggle();
+            rootContext.onOpenToggle();
             // prevent trigger focusing when opening
             // this allows the content to be given focus without competition
-            if (context?.open.value) event.preventDefault();
+            if (rootContext.open.value) event.preventDefault();
           }
         }
       "
       @keydown.enter.space.arrow-down="
         (event) => {
           if (disabled) return;
-          if (['Enter', ' '].includes(event.key)) context?.onOpenToggle();
-          if (event.key === 'ArrowDown') context?.onOpenChange(true);
+          if (['Enter', ' '].includes(event.key)) rootContext.onOpenToggle();
+          if (event.key === 'ArrowDown') rootContext.onOpenChange(true);
           // prevent keydown from scrolling window / first focused item to execute
           // that keydown (inadvertently closing the menu)
           if (['Enter', ' ', 'ArrowDown'].includes(event.key))
diff --git a/packages/radix-vue/src/DropdownMenu/utils.ts b/packages/radix-vue/src/DropdownMenu/utils.ts
deleted file mode 100644
index 021390572..000000000
--- a/packages/radix-vue/src/DropdownMenu/utils.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type InjectionKey, type Ref } from 'vue'
-
-interface DropdownMenuItemContextValue {
-  modelValue: Ref<boolean>
-}
-
-export const DROPDOWN_MENU_ITEM_SYMBOL
-  = Symbol() as InjectionKey<DropdownMenuItemContextValue>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
index 58c5352a3..f5010bb31 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from './NavigationMenuItem.vue'
+import { computed } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 import { getOpenState } from './utils'
 import { Presence } from '@/Presence'
 import { type PointerDownOutsideEvent } from '@/DismissableLayer'
@@ -18,23 +18,23 @@ const emits = defineEmits<NavigationMenuContentEmits>()
 const emitsAsProps = useEmitAsProps(emits)
 
 const isClientMounted = useMounted()
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
+const itemContext = injectNavigationMenuItemContext()
 
-const open = computed(() => itemContext?.value === context?.modelValue.value)
+const open = computed(() => itemContext.value === menuContext.modelValue.value)
 
 // We persist the last active content value as the viewport may be animating out
 // and we want the content to remain mounted for the lifecycle of the viewport.
 const isLastActiveValue = computed(() => {
-  if (!context?.modelValue.value && context?.previousValue.value)
-    return (context?.previousValue.value === itemContext?.value)
+  if (!menuContext.modelValue.value && menuContext.previousValue.value)
+    return (menuContext.previousValue.value === itemContext.value)
   return false
 })
 
 function handlePointerDown(ev: PointerDownOutsideEvent) {
   emits('pointerDownOutside', ev)
   if (!ev.preventDefault)
-    context?.onContentLeave()
+    menuContext.onContentLeave()
 }
 </script>
 
@@ -45,16 +45,16 @@ export default {
 </script>
 
 <template>
-  <Teleport v-if="isClientMounted" :to="context?.viewport.value" :disabled="!context?.viewport.value">
+  <Teleport v-if="isClientMounted" :to="menuContext.viewport.value" :disabled="!menuContext.viewport.value">
     <Presence :present="open || isLastActiveValue">
       <NavigationMenuContentImpl
         :data-state="getOpenState(open)"
         :style="{
-          pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+          pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,
         }"
         v-bind="{ ...$attrs, ...props, ...emitsAsProps }"
-        @pointerenter="context?.onContentEnter(itemContext!.value)"
-        @pointerleave="context?.onContentLeave()"
+        @pointerenter="menuContext.onContentEnter(itemContext.value)"
+        @pointerleave="menuContext.onContentLeave()"
         @pointerdown="handlePointerDown"
         @focus-outside="emits('focusOutside', $event)"
         @interact-outside="emits('interactOutside', $event)"
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
index 21c187210..fc96161df 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuContentImpl.vue
@@ -6,9 +6,8 @@ export type NavigationMenuContentImplEmits = DismissableLayerEmits
 </script>
 
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
-
+import { computed, ref, watchEffect } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   EVENT_ROOT_CONTENT_DISMISS,
   focusFirst,
@@ -26,7 +25,7 @@ import {
 import { usePrimitiveElement } from '@/Primitive'
 import { useArrowNavigation, useCollection } from '@/shared'
 import type { PointerDownOutsideEvent } from '@/DismissableLayer/utils'
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from './NavigationMenuItem.vue'
+import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 
 const props = defineProps<NavigationMenuContentImplProps>()
 const emits = defineEmits<NavigationMenuContentImplEmits>()
@@ -35,22 +34,22 @@ const { injectCollection } = useCollection('nav')
 const collectionItems = injectCollection()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
+const itemContext = injectNavigationMenuItemContext()
 
-const triggerId = makeTriggerId(context!.baseId, itemContext!.value)
-const contentId = makeContentId(context!.baseId, itemContext!.value)
+const triggerId = makeTriggerId(menuContext.baseId, itemContext.value)
+const contentId = makeContentId(menuContext.baseId, itemContext.value)
 
 const prevMotionAttributeRef = ref<MotionAttribute | null>(null)
 const motionAttribute = computed(() => {
   const items = collectionItems.value
   const values = items.map(item => item.id.split('trigger-')[1])
-  if (context?.dir === 'rtl')
+  if (menuContext.dir === 'rtl')
     values.reverse()
-  const index = values.indexOf(context!.modelValue.value)
-  const prevIndex = values.indexOf(context!.previousValue.value)
-  const isSelected = itemContext!.value === context?.modelValue.value
-  const wasSelected = prevIndex === values.indexOf(itemContext!.value)
+  const index = values.indexOf(menuContext.modelValue.value)
+  const prevIndex = values.indexOf(menuContext.previousValue.value)
+  const isSelected = itemContext.value === menuContext.modelValue.value
+  const wasSelected = prevIndex === values.indexOf(itemContext.value)
 
   // We only want to update selected and the last selected content
   // this avoids animations being interrupted outside of that range
@@ -82,11 +81,11 @@ function handleFocusOutside(ev: FocusOutsideEvent) {
   emits('interactOutside', ev)
 
   if (!ev.defaultPrevented) {
-    itemContext!.onContentFocusOutside()
+    itemContext.onContentFocusOutside()
 
     const target = ev.target as HTMLElement
     // Only dismiss content when focus moves outside of the menu
-    if (context!.rootNavigationMenu?.value?.contains(target))
+    if (menuContext.rootNavigationMenu?.value?.contains(target))
       ev.preventDefault()
   }
 }
@@ -100,21 +99,21 @@ function handlePointerDownOutside(ev: PointerDownOutsideEvent) {
       item.contains(target),
     )
     const isRootViewport
-      = context?.isRootMenu && context.viewport.value?.contains(target)
+      = menuContext.isRootMenu && menuContext.viewport.value?.contains(target)
 
-    if (isTrigger || isRootViewport || !context?.isRootMenu)
+    if (isTrigger || isRootViewport || !menuContext.isRootMenu)
       ev.preventDefault()
   }
 }
 
 watchEffect((cleanupFn) => {
   const content = currentElement.value
-  if (context?.isRootMenu && content) {
+  if (menuContext.isRootMenu && content) {
     // Bubble dismiss to the root content node and focus its trigger
     const handleClose = () => {
-      itemContext!.onRootContentClose()
+      itemContext.onRootContentClose()
       if (content.contains(document.activeElement))
-        itemContext!.triggerRef.value?.focus()
+        itemContext.triggerRef.value?.focus()
     }
     content.addEventListener(EVENT_ROOT_CONTENT_DISMISS, handleClose)
 
@@ -128,9 +127,9 @@ function handleEscapeKeyDown(ev: KeyboardEvent) {
   emits('escapeKeyDown', ev)
 
   if (!ev.defaultPrevented) {
-    context!.onItemDismiss()
-    itemContext!.triggerRef?.value?.focus()
-    itemContext!.wasEscapeCloseRef.value = true
+    menuContext.onItemDismiss()
+    itemContext.triggerRef?.value?.focus()
+    itemContext.wasEscapeCloseRef.value = true
   }
 }
 
@@ -157,7 +156,7 @@ function handleKeydown(ev: KeyboardEvent) {
       // If we can't focus that means we're at the edges
       // so focus the proxy and let browser handle
       // tab/shift+tab keypress on the proxy instead
-      itemContext!.focusProxyRef.value?.focus()
+      itemContext.focusProxyRef.value?.focus()
       return
     }
   }
@@ -191,8 +190,8 @@ function handleDismiss() {
     ref="primitiveElement"
     :aria-labelledby="triggerId"
     :data-motion="motionAttribute"
-    :data-state="getOpenState(context?.modelValue.value === itemContext!.value)"
-    :data-orientation="context?.orientation"
+    :data-state="getOpenState(menuContext.modelValue.value === itemContext.value)"
+    :data-orientation="menuContext.orientation"
     v-bind="props"
     @keydown="handleKeydown"
     @escape-key-down="handleEscapeKeyDown"
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
index 64dd57244..e754dd1ff 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuIndicator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import { useCollection } from '@/shared'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
 import { Presence } from '@/Presence'
@@ -11,11 +11,11 @@ const props = defineProps<NavigationMenuIndicatorProps>()
 
 const { injectCollection } = useCollection('nav')
 const collectionItems = injectCollection()
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 
 const position = ref<{ size: number; offset: number }>()
-const isHorizontal = computed(() => context?.orientation === 'horizontal')
-const isVisible = computed(() => !!context?.modelValue.value)
+const isHorizontal = computed(() => menuContext.orientation === 'horizontal')
+const isVisible = computed(() => !!menuContext.modelValue.value)
 
 const activeTrigger = ref<HTMLElement>()
 
@@ -33,19 +33,19 @@ function handlePositionChange() {
 }
 
 watchEffect(() => {
-  if (!context?.modelValue.value) {
+  if (!menuContext.modelValue.value) {
     position.value = undefined
     return
   }
   const items = collectionItems.value
   activeTrigger.value = items.find(item =>
-    item.id.includes(context?.modelValue.value),
+    item.id.includes(menuContext.modelValue.value),
   )
   handlePositionChange()
 })
 
 useResizeObserver(activeTrigger, handlePositionChange)
-useResizeObserver(context!.indicatorTrack, handlePositionChange)
+useResizeObserver(menuContext.indicatorTrack, handlePositionChange)
 </script>
 
 <script lang="ts">
@@ -56,14 +56,14 @@ export default {
 
 <template>
   <Teleport
-    v-if="context?.indicatorTrack.value"
-    :to="context?.indicatorTrack.value"
+    v-if="menuContext.indicatorTrack.value"
+    :to="menuContext.indicatorTrack.value"
   >
     <Presence :present="isVisible">
       <Primitive
         aria-hidden
         :data-state="isVisible ? 'visible' : 'hidden'"
-        :data-orientation="context.orientation"
+        :data-orientation="menuContext.orientation"
         :as-child="props.asChild"
         :as="as"
         :style="{
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
index 1dfa6c361..f750e475e 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuItem.vue
@@ -1,9 +1,11 @@
 <script lang="ts">
+import { createContext, useArrowNavigation, useCollection, useId } from '@/shared'
+
 export interface NavigationMenuItemProps extends PrimitiveProps {
   value?: string
 }
 
-export interface NavigationMenuItemContextValue {
+export type NavigationMenuItemContext = {
   value: string
   contentId: string
   triggerRef: Ref<HTMLElement | undefined>
@@ -15,13 +17,13 @@ export interface NavigationMenuItemContextValue {
   onRootContentClose(): void
 }
 
-export const NAVIGATION_MENU_ITEM_INJECTION_KEY
-  = Symbol() as InjectionKey<NavigationMenuItemContextValue>
+export const [injectNavigationMenuItemContext, provideNavigationMenuItemContext]
+  = createContext<NavigationMenuItemContext>('NavigationMenuItem')
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, inject, provide, ref } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { type Ref, ref } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   focusFirst,
   getTabbableCandidates,
@@ -29,7 +31,6 @@ import {
   removeFromTabOrder,
 } from './utils'
 import { Primitive, type PrimitiveProps } from '@/Primitive'
-import { useArrowNavigation, useCollection, useId } from '@/shared'
 
 const props = withDefaults(defineProps<NavigationMenuItemProps>(), {
   as: 'li',
@@ -37,13 +38,13 @@ const props = withDefaults(defineProps<NavigationMenuItemProps>(), {
 const { injectCollection } = useCollection('nav')
 const collectionItems = injectCollection()
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const context = injectNavigationMenuContext()
 
 const value = props.value || useId()
 const triggerRef = ref<HTMLElement>()
 const focusProxyRef = ref<HTMLElement>()
 
-const contentId = makeContentId(context!.baseId, value)
+const contentId = makeContentId(context.baseId, value)
 
 let restoreContentTabOrderRef: () => void = () => ({})
 
@@ -67,7 +68,7 @@ function handleContentExit() {
   }
 }
 
-provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
+provideNavigationMenuItemContext({
   value,
   contentId,
   triggerRef,
@@ -80,14 +81,14 @@ provide(NAVIGATION_MENU_ITEM_INJECTION_KEY, {
 })
 
 function handleClose() {
-  context?.onItemDismiss()
+  context.onItemDismiss()
   triggerRef.value?.focus()
 }
 
 function handleKeydown(ev: KeyboardEvent) {
   const currentFocus = document.activeElement as HTMLElement
   if (ev.keyCode === 32 || ev.key === 'Enter') {
-    if (context?.modelValue.value === value) {
+    if (context.modelValue.value === value) {
       handleClose()
       ev.preventDefault()
       return
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
index 7f434e604..a1d205d01 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { inject, onMounted } from 'vue'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { onMounted } from 'vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -12,11 +12,11 @@ const props = withDefaults(defineProps<NavigationMenuListProps>(), {
   as: 'ul',
 })
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 onMounted(() => {
-  context?.onIndicatorTrackChange(currentElement.value)
+  menuContext.onIndicatorTrackChange(currentElement.value)
 })
 </script>
 
@@ -32,7 +32,7 @@ export default {
       v-bind="$attrs"
       :as-child="props.asChild"
       :as="as"
-      :data-orientation="context?.orientation"
+      :data-orientation="menuContext.orientation"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
index cccc00d60..890f67647 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuRoot.vue
@@ -1,14 +1,12 @@
 <script lang="ts">
 import {
-  type InjectionKey,
   type Ref,
   computed,
-  provide,
   ref,
   toRefs,
 } from 'vue'
 import type { Direction, Orientation } from './utils'
-import { useCollection, useId } from '@/shared'
+import { createContext, useCollection, useId } from '@/shared'
 
 export interface NavigationMenuRootProps extends PrimitiveProps {
   modelValue?: string
@@ -30,7 +28,7 @@ export type NavigationMenuRootEmits = {
   'update:modelValue': [value: string]
 }
 
-export interface NavigationMenuContextValue {
+export interface NavigationMenuContext {
   isRootMenu: boolean
   modelValue: Ref<string>
   previousValue: Ref<string>
@@ -50,8 +48,8 @@ export interface NavigationMenuContextValue {
   onItemDismiss(): void
 }
 
-export const NAVIGATION_MENU_INJECTION_KEY
-  = Symbol() as InjectionKey<NavigationMenuContextValue>
+export const [injectNavigationMenuContext, provideNavigationMenuContext]
+  = createContext<NavigationMenuContext>(['NavigationMenuRoot', 'NavigationMenuSub'], 'NavigationMenuContext')
 </script>
 
 <script setup lang="ts">
@@ -102,7 +100,7 @@ const debouncedFn = useDebounceFn((val: string) => {
   modelValue.value = val
 }, computedDelay)
 
-provide(NAVIGATION_MENU_INJECTION_KEY, {
+provideNavigationMenuContext({
   isRootMenu: true,
   modelValue,
   previousValue,
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
index 2437d3956..ad8f9fb31 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuSub.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type Ref, inject, provide, ref } from 'vue'
+import { type Ref, ref } from 'vue'
 import { useVModel } from '@vueuse/core'
 import type { Orientation } from './utils'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuContext, provideNavigationMenuContext } from './NavigationMenuRoot.vue'
 import {
   Primitive,
   type PrimitiveProps,
@@ -30,7 +30,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 }) as Ref<string>
 const previousValue = ref('')
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
 const indicatorTrack = ref<HTMLElement>()
@@ -39,8 +39,8 @@ const viewport = ref<HTMLElement>()
 const { createCollection } = useCollection('nav')
 createCollection(indicatorTrack)
 
-provide(NAVIGATION_MENU_INJECTION_KEY, {
-  ...context!,
+provideNavigationMenuContext({
+  ...menuContext,
   isRootMenu: false,
   modelValue,
   previousValue,
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
index f6f9fcab4..50be5ce4b 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuTrigger.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type VNode, computed, inject, onMounted, ref } from 'vue'
+import { type VNode, computed, onMounted, ref } from 'vue'
 import { unrefElement } from '@vueuse/core'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
-import { NAVIGATION_MENU_ITEM_INJECTION_KEY } from './NavigationMenuItem.vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuItemContext } from './NavigationMenuItem.vue'
 import { getOpenState, makeContentId, makeTriggerId } from './utils'
 import {
   Primitive,
@@ -19,8 +19,8 @@ const props = withDefaults(defineProps<NavigationMenuTriggerProps>(), {
   as: 'button',
 })
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
-const itemContext = inject(NAVIGATION_MENU_ITEM_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
+const itemContext = injectNavigationMenuItemContext()
 
 const { primitiveElement, currentElement: triggerElement }
   = usePrimitiveElement()
@@ -30,17 +30,17 @@ const contentId = ref('')
 const hasPointerMoveOpenedRef = ref(false)
 const wasClickCloseRef = ref(false)
 
-const open = computed(() => itemContext?.value === context?.modelValue.value)
+const open = computed(() => itemContext.value === menuContext.modelValue.value)
 
 onMounted(() => {
-  itemContext!.triggerRef = triggerElement
-  triggerId.value = makeTriggerId(context!.baseId, itemContext!.value)
-  contentId.value = makeContentId(context!.baseId, itemContext!.value)
+  itemContext.triggerRef = triggerElement
+  triggerId.value = makeTriggerId(menuContext.baseId, itemContext.value)
+  contentId.value = makeContentId(menuContext.baseId, itemContext.value)
 })
 
 function handlePointerEnter() {
   wasClickCloseRef.value = false
-  itemContext!.wasEscapeCloseRef.value = false
+  itemContext.wasEscapeCloseRef.value = false
 }
 
 function handlePointerMove(ev: PointerEvent) {
@@ -48,11 +48,11 @@ function handlePointerMove(ev: PointerEvent) {
     if (
       props.disabled
       || wasClickCloseRef.value
-      || itemContext!.wasEscapeCloseRef.value
+      || itemContext.wasEscapeCloseRef.value
       || hasPointerMoveOpenedRef.value
     )
       return
-    context!.onTriggerEnter(itemContext!.value)
+    menuContext.onTriggerEnter(itemContext.value)
     hasPointerMoveOpenedRef.value = true
   }
 }
@@ -61,7 +61,7 @@ function handlePointerLeave(ev: PointerEvent) {
   if (ev.pointerType === 'mouse') {
     if (props.disabled)
       return
-    context!.onTriggerLeave()
+    menuContext.onTriggerLeave()
     hasPointerMoveOpenedRef.value = false
   }
 }
@@ -72,19 +72,19 @@ function handleClick() {
     return
 
   if (open.value)
-    context?.onItemSelect('')
-  else context?.onItemSelect(itemContext!.value)
+    menuContext.onItemSelect('')
+  else menuContext.onItemSelect(itemContext.value)
 
   wasClickCloseRef.value = open.value
 }
 
 function handleKeydown(ev: KeyboardEvent) {
-  const verticalEntryKey = context!.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
+  const verticalEntryKey = menuContext.dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight'
   const entryKey = { horizontal: 'ArrowDown', vertical: verticalEntryKey }[
-    context!.orientation
+    menuContext.orientation
   ]
   if (open.value && ev.key === entryKey) {
-    itemContext!.onEntryKeyDown()
+    itemContext.onEntryKeyDown()
     // Prevent FocusGroupItem from handling the event
     ev.preventDefault()
     ev.stopPropagation()
@@ -93,19 +93,19 @@ function handleKeydown(ev: KeyboardEvent) {
 
 function setFocusProxyRef(node: VNode) {
   // @ts-expect-error unrefElement expect MaybeRef, but also support Vnode
-  itemContext!.focusProxyRef.value = unrefElement(node)
+  itemContext.focusProxyRef.value = unrefElement(node)
   return undefined
 }
 
 function handleVisuallyHiddenFocus(ev: FocusEvent) {
-  const content = document.getElementById(itemContext!.contentId)
+  const content = document.getElementById(itemContext.contentId)
   const prevFocusedElement = ev.relatedTarget as HTMLElement | null
 
   const wasTriggerFocused = prevFocusedElement === triggerElement.value
   const wasFocusFromContent = content?.contains(prevFocusedElement)
 
   if (wasTriggerFocused || !wasFocusFromContent)
-    itemContext!.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')
+    itemContext.onFocusProxyEnter(wasTriggerFocused ? 'start' : 'end')
 }
 </script>
 
@@ -144,6 +144,6 @@ export default {
       :tabindex="0"
       @focus="handleVisuallyHiddenFocus"
     />
-    <span v-if="context?.viewport" :aria-owns="contentId" />
+    <span v-if="menuContext.viewport" :aria-owns="contentId" />
   </template>
 </template>
diff --git a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
index 16bc2c463..3a5a01634 100644
--- a/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
+++ b/packages/radix-vue/src/NavigationMenu/NavigationMenuViewport.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import {
   computed,
-  inject,
   nextTick,
   ref,
   watch,
 } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
-import { NAVIGATION_MENU_INJECTION_KEY } from './NavigationMenuRoot.vue'
+import { injectNavigationMenuContext } from './NavigationMenuRoot.vue'
 import { getOpenState } from './utils'
 import {
   Primitive,
@@ -21,18 +20,18 @@ defineProps<NavigationMenuViewportProps>()
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const context = inject(NAVIGATION_MENU_INJECTION_KEY)
+const menuContext = injectNavigationMenuContext()
 
 const size = ref<{ width: number; height: number }>()
 
-const open = computed(() => !!context?.modelValue.value)
+const open = computed(() => !!menuContext.modelValue.value)
 // We persist the last active content value as the viewport may be animating out
 // and we want the content to remain mounted for the lifecycle of the viewport.
-const activeContentValue = computed(() => context!.modelValue.value)
+const activeContentValue = computed(() => menuContext.modelValue.value)
 
 watch(currentElement, () => {
   if (currentElement.value)
-    context!.onViewportChange(currentElement.value)
+    menuContext.onViewportChange(currentElement.value)
 })
 
 const content = ref<HTMLElement>()
@@ -70,15 +69,15 @@ export default {
       :as="as"
       :as-child="asChild"
       :data-state="getOpenState(open)"
-      :data-orientation="context?.orientation"
+      :data-orientation="menuContext.orientation"
       :style="{
         // Prevent interaction when animating out
-        pointerEvents: !open && context?.isRootMenu ? 'none' : undefined,
+        pointerEvents: !open && menuContext.isRootMenu ? 'none' : undefined,
         ['--radix-navigation-menu-viewport-width' as any]: size ? `${size?.width}px` : undefined,
         ['--radix-navigation-menu-viewport-height' as any]: size ? `${size?.height}px` : undefined,
       }"
-      @pointerenter="context?.onContentEnter(context!.modelValue.value)"
-      @pointerleave="context?.onContentLeave()"
+      @pointerenter="menuContext.onContentEnter(menuContext.modelValue.value)"
+      @pointerleave="menuContext.onContentLeave()"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Toast/FocusProxy.vue b/packages/radix-vue/src/Toast/FocusProxy.vue
index 10a17e748..712306e70 100644
--- a/packages/radix-vue/src/Toast/FocusProxy.vue
+++ b/packages/radix-vue/src/Toast/FocusProxy.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import { VisuallyHidden } from '@/VisuallyHidden'
-import { inject } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 
 const emits = defineEmits<{
   'focusFromOutsideViewport': [void]
 }>()
 
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
+const providerContext = injectToastProviderContext()
 </script>
 
 <template>
@@ -17,7 +16,7 @@ const context = inject(TOAST_PROVIDER_INJECTION_KEY)
     style="position: 'fixed'"
     @focus="(event) => {
       const prevFocusedElement = event.relatedTarget as HTMLElement | null;
-      const isFocusFromOutsideViewport = !context!.viewport.value?.contains(prevFocusedElement);
+      const isFocusFromOutsideViewport = !providerContext.viewport.value?.contains(prevFocusedElement);
       if (isFocusFromOutsideViewport) emits('focusFromOutsideViewport');
     }"
   >
diff --git a/packages/radix-vue/src/Toast/ToastAnnounce.vue b/packages/radix-vue/src/Toast/ToastAnnounce.vue
index 9069bfd4a..cd051397c 100644
--- a/packages/radix-vue/src/Toast/ToastAnnounce.vue
+++ b/packages/radix-vue/src/Toast/ToastAnnounce.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { ref } from 'vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 import { VisuallyHidden } from '@/VisuallyHidden'
 import { useTimeout } from '@vueuse/shared'
 import { useRafFn } from '@vueuse/core'
 
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
+const providerContext = injectToastProviderContext()
 
 const isAnnounced = useTimeout(1000)
 const renderAnnounceText = ref(false)
@@ -17,7 +17,7 @@ useRafFn(() => {
 
 <template>
   <VisuallyHidden v-if="isAnnounced || renderAnnounceText">
-    {{ context?.label.value }}
+    {{ providerContext.label.value }}
     <slot />
   </VisuallyHidden>
 </template>
diff --git a/packages/radix-vue/src/Toast/ToastClose.vue b/packages/radix-vue/src/Toast/ToastClose.vue
index 51ff5e31d..2304508d8 100644
--- a/packages/radix-vue/src/Toast/ToastClose.vue
+++ b/packages/radix-vue/src/Toast/ToastClose.vue
@@ -2,15 +2,14 @@
 import { Primitive } from '@/Primitive'
 import type { PrimitiveProps } from '@/Primitive'
 import ToastAnnounceExclude from './ToastAnnounceExclude.vue'
-import { TOAST_INTERACTIVE_CONTEXT } from './ToastImpl.vue'
-import { inject } from 'vue'
+import { injectToastRootContext } from './ToastRootImpl.vue'
 
 export interface ToastCloseProps extends PrimitiveProps {}
 const props = withDefaults(defineProps<ToastCloseProps>(), {
   as: 'button',
 })
 
-const interactiveContext = inject(TOAST_INTERACTIVE_CONTEXT)
+const rootContext = injectToastRootContext()
 </script>
 
 <template>
@@ -18,7 +17,7 @@ const interactiveContext = inject(TOAST_INTERACTIVE_CONTEXT)
     <Primitive
       v-bind="props"
       :type="as === 'button' ? 'button' : undefined "
-      @click="interactiveContext?.onClose()"
+      @click="rootContext.onClose()"
     >
       <slot />
     </Primitive>
diff --git a/packages/radix-vue/src/Toast/ToastProvider.vue b/packages/radix-vue/src/Toast/ToastProvider.vue
index b3ca997b2..8afe9c140 100644
--- a/packages/radix-vue/src/Toast/ToastProvider.vue
+++ b/packages/radix-vue/src/Toast/ToastProvider.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
 import type { SwipeDirection } from './utils'
+import { createContext } from '@/shared'
 
-type ToastProviderContextValue = {
+type ToastProviderContext = {
   label: Ref<string>
   duration: Ref<number>
   swipeDirection: Ref< SwipeDirection>
@@ -15,7 +16,8 @@ type ToastProviderContextValue = {
   isClosePausedRef: Ref<boolean>
 }
 
-export const TOAST_PROVIDER_INJECTION_KEY = Symbol() as InjectionKey<ToastProviderContextValue>
+export const [injectToastProviderContext, provideToastProviderContext]
+  = createContext<ToastProviderContext>('ToastProvider')
 
 export interface ToastProviderProps {
   /**
@@ -43,7 +45,7 @@ export interface ToastProviderProps {
 </script>
 
 <script setup lang="ts">
-import { type InjectionKey, type Ref, provide, ref, toRefs } from 'vue'
+import { type Ref, ref, toRefs } from 'vue'
 
 const props = withDefaults(defineProps<ToastProviderProps>(), {
   label: 'Notification',
@@ -63,7 +65,7 @@ if (props.label && typeof props.label === 'string' && !props.label.trim()) {
   throw new Error(error)
 }
 
-provide(TOAST_PROVIDER_INJECTION_KEY, {
+provideToastProviderContext({
   label,
   duration,
   swipeDirection,
diff --git a/packages/radix-vue/src/Toast/ToastRoot.vue b/packages/radix-vue/src/Toast/ToastRoot.vue
index d2b19b767..35898d5e3 100644
--- a/packages/radix-vue/src/Toast/ToastRoot.vue
+++ b/packages/radix-vue/src/Toast/ToastRoot.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Presence } from '@/Presence'
-import ToastImpl, { type ToastImplEmits, type ToastImplProps } from './ToastImpl.vue'
+import ToastRootImpl, { type ToastRootImplEmits, type ToastRootImplProps } from './ToastRootImpl.vue'
 import { useVModel } from '@vueuse/core'
 
 const props = withDefaults(defineProps<ToastRootProps>(), {
@@ -9,7 +9,7 @@ const props = withDefaults(defineProps<ToastRootProps>(), {
 })
 const emits = defineEmits<ToastRootEmits>()
 
-export interface ToastRootProps extends ToastImplProps {
+export interface ToastRootProps extends ToastRootImplProps {
   defaultOpen?: boolean
   /**
    * Used to force mounting when more control is needed. Useful when
@@ -18,7 +18,7 @@ export interface ToastRootProps extends ToastImplProps {
   forceMount?: true
 }
 
-export type ToastRootEmits = ToastImplEmits & {
+export type ToastRootEmits = ToastRootImplEmits & {
   'update:open': [value: boolean]
 }
 
@@ -30,7 +30,7 @@ const open = useVModel(props, 'open', emits, {
 
 <template>
   <Presence :present="forceMount || open">
-    <ToastImpl
+    <ToastRootImpl
       :open="open"
       :type="type"
       :duration="duration"
@@ -70,6 +70,6 @@ const open = useVModel(props, 'open', emits, {
       }"
     >
       <slot />
-    </ToastImpl>
+    </ToastRootImpl>
   </Presence>
 </template>
diff --git a/packages/radix-vue/src/Toast/ToastImpl.vue b/packages/radix-vue/src/Toast/ToastRootImpl.vue
similarity index 80%
rename from packages/radix-vue/src/Toast/ToastImpl.vue
rename to packages/radix-vue/src/Toast/ToastRootImpl.vue
index a7fd915ed..ee561ed35 100644
--- a/packages/radix-vue/src/Toast/ToastImpl.vue
+++ b/packages/radix-vue/src/Toast/ToastRootImpl.vue
@@ -1,7 +1,8 @@
 <script lang="ts">
-export const TOAST_INTERACTIVE_CONTEXT = Symbol() as InjectionKey<{
-  onClose(): void
-}>
+import { createContext, useForwardRef } from '@/shared'
+
+export const [injectToastRootContext, provideToastRootContext]
+  = createContext<{ onClose(): void }>('ToastRoot')
 
 export default {
   inheritAttrs: false,
@@ -10,16 +11,15 @@ export default {
 
 <script setup lang="ts">
 import { Primitive, type PrimitiveProps, usePrimitiveElement } from '@/Primitive'
-import { computed, inject, onMounted, onUnmounted, provide, ref, watchEffect } from 'vue'
-import type { ComponentPublicInstance, InjectionKey } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { computed, onMounted, onUnmounted, ref, watchEffect } from 'vue'
+import type { ComponentPublicInstance } from 'vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 import { getAnnounceTextContent, handleAndDispatchCustomEvent, isDeltaInDirection } from './utils'
 import { type SwipeEvent, TOAST_SWIPE_CANCEL, TOAST_SWIPE_END, TOAST_SWIPE_MOVE, TOAST_SWIPE_START, VIEWPORT_PAUSE, VIEWPORT_RESUME } from './utils'
 import ToastAnnounce from './ToastAnnounce.vue'
-import { useForwardRef } from '@/shared'
 import { onKeyStroke } from '@vueuse/core'
 
-export interface ToastImplProps extends PrimitiveProps {
+export interface ToastRootImplProps extends PrimitiveProps {
   type?: 'foreground' | 'background'
   open?: boolean
   /**
@@ -29,7 +29,7 @@ export interface ToastImplProps extends PrimitiveProps {
   duration?: number
 }
 
-export type ToastImplEmits = {
+export type ToastRootImplEmits = {
   'close': []
   'escapeKeyDown': [event: KeyboardEvent]
   'pause': []
@@ -40,19 +40,19 @@ export type ToastImplEmits = {
   'swipeEnd': [event: SwipeEvent]
 }
 
-const props = withDefaults(defineProps<ToastImplProps>(), {
+const props = withDefaults(defineProps<ToastRootImplProps>(), {
   open: false,
   as: 'li',
 })
 
-const emits = defineEmits<ToastImplEmits>()
+const emits = defineEmits<ToastRootImplEmits>()
 
 const forwardRef = useForwardRef()
 const { primitiveElement, currentElement } = usePrimitiveElement()
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
+const providerContext = injectToastProviderContext()
 const pointerStartRef = ref<{ x: number; y: number } | null>(null)
 const swipeDeltaRef = ref<{ x: number; y: number } | null>(null)
-const duration = computed(() => props.duration || context!.duration.value)
+const duration = computed(() => props.duration || providerContext.duration.value)
 
 const closeTimerStartTimeRef = ref(0)
 const closeTimerRemainingTimeRef = ref(duration.value)
@@ -71,7 +71,7 @@ function handleClose() {
   // count to SR users and ensure focus isn't lost
   const isFocusInToast = currentElement.value?.contains(document.activeElement)
   if (isFocusInToast)
-    context!.viewport.value?.focus()
+    providerContext.viewport.value?.focus()
   emits('close')
 }
 
@@ -83,7 +83,7 @@ if (props.type && !['foreground', 'background'].includes(props.type)) {
 }
 
 watchEffect((cleanupFn) => {
-  const viewport = context?.viewport.value
+  const viewport = providerContext.viewport.value
   if (viewport) {
     const handleResume = () => {
       startTimer(closeTimerRemainingTimeRef.value)
@@ -108,28 +108,26 @@ watchEffect((cleanupFn) => {
 // we include `open` in deps because closed !== unmounted when animating
 // so it could reopen before being completely unmounted
 watchEffect(() => {
-  if (props.open && !context?.isClosePausedRef.value)
+  if (props.open && !providerContext.isClosePausedRef.value)
     startTimer(duration.value)
 })
 
 onKeyStroke('Escape', (event) => {
   emits('escapeKeyDown', event)
   if (!event.defaultPrevented) {
-    context!.isFocusedToastEscapeKeyDownRef.value = true
+    providerContext.isFocusedToastEscapeKeyDownRef.value = true
     handleClose()
   }
 })
 
 onMounted(() => {
-  context?.onToastAdd()
+  providerContext.onToastAdd()
 })
 onUnmounted(() => {
-  context?.onToastRemove()
+  providerContext.onToastRemove()
 })
 
-provide(TOAST_INTERACTIVE_CONTEXT, {
-  onClose: handleClose,
-})
+provideToastRootContext({ onClose: handleClose })
 </script>
 
 <template>
@@ -142,7 +140,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
     {{ announceTextContent }}
   </ToastAnnounce>
 
-  <Teleport :to="context?.viewport.value">
+  <Teleport :to="providerContext.viewport.value">
     <Primitive
       :ref="v => {
         forwardRef(v)
@@ -157,7 +155,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
       :as="as"
       :as-child="asChild"
       :data-state="open ? 'open' : 'closed'"
-      :data-swipe-direction="context!.swipeDirection.value"
+      :data-swipe-direction="providerContext.swipeDirection.value"
       :style="{ userSelect: 'none', touchAction: 'none' }"
       @pointerdown.left="(event: PointerEvent) => {
         pointerStartRef = { x: event.clientX, y: event.clientY };
@@ -167,8 +165,8 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
         const x = event.clientX - pointerStartRef.x;
         const y = event.clientY - pointerStartRef.y;
         const hasSwipeMoveStarted = Boolean(swipeDeltaRef);
-        const isHorizontalSwipe = ['left', 'right'].includes(context!.swipeDirection.value);
-        const clamp = ['left', 'up'].includes(context!.swipeDirection.value)
+        const isHorizontalSwipe = ['left', 'right'].includes(providerContext.swipeDirection.value);
+        const clamp = ['left', 'up'].includes(providerContext.swipeDirection.value)
           ? Math.min
           : Math.max;
         const clampedX = isHorizontalSwipe ? clamp(0, x) : 0;
@@ -180,7 +178,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
           swipeDeltaRef = delta;
           handleAndDispatchCustomEvent(TOAST_SWIPE_MOVE, (ev: SwipeEvent) => emits('swipeMove', ev), eventDetail);
         }
-        else if (isDeltaInDirection(delta, context!.swipeDirection.value, moveStartBuffer)) {
+        else if (isDeltaInDirection(delta, providerContext.swipeDirection.value, moveStartBuffer)) {
           swipeDeltaRef = delta;
           handleAndDispatchCustomEvent(TOAST_SWIPE_START, (ev: SwipeEvent) => emits('swipeStart', ev), eventDetail);
           (event.target as HTMLElement).setPointerCapture(event.pointerId);
@@ -203,7 +201,7 @@ provide(TOAST_INTERACTIVE_CONTEXT, {
           const toast = event.currentTarget;
           const eventDetail = { originalEvent: event, delta };
           if (
-            isDeltaInDirection(delta, context!.swipeDirection.value, context!.swipeThreshold.value)
+            isDeltaInDirection(delta, providerContext.swipeDirection.value, providerContext.swipeThreshold.value)
           ) {
             handleAndDispatchCustomEvent(TOAST_SWIPE_END, (ev: SwipeEvent) => emits('swipeEnd', ev), eventDetail);
           }
diff --git a/packages/radix-vue/src/Toast/ToastViewport.vue b/packages/radix-vue/src/Toast/ToastViewport.vue
index b4a9ac12e..9db254780 100644
--- a/packages/radix-vue/src/Toast/ToastViewport.vue
+++ b/packages/radix-vue/src/Toast/ToastViewport.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Primitive, usePrimitiveElement } from '@/Primitive'
 import type { PrimitiveProps } from '@/Primitive'
-import { type ComponentPublicInstance, computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue'
-import { TOAST_PROVIDER_INJECTION_KEY } from './ToastProvider.vue'
+import { type ComponentPublicInstance, computed, onMounted, ref, toRefs, watchEffect } from 'vue'
+import { injectToastProviderContext } from './ToastProvider.vue'
 import { onKeyStroke, unrefElement } from '@vueuse/core'
 import FocusProxy from './FocusProxy.vue'
 import { focusFirst, getTabbableCandidates } from '@/FocusScope/utils'
@@ -34,8 +34,8 @@ const { hotkey, label } = toRefs(props)
 const { primitiveElement, currentElement } = usePrimitiveElement()
 const { createCollection } = useCollection()
 const collections = createCollection(currentElement)
-const context = inject(TOAST_PROVIDER_INJECTION_KEY)
-const hasToasts = computed(() => context!.toastCount.value > 0)
+const providerContext = injectToastProviderContext()
+const hasToasts = computed(() => providerContext.toastCount.value > 0)
 const headFocusProxyRef = ref<HTMLElement>()
 const tailFocusProxyRef = ref<HTMLElement>()
 
@@ -44,25 +44,25 @@ onKeyStroke(hotkey.value, () => {
 })
 
 onMounted(() => {
-  context?.onViewportChange(currentElement.value)
+  providerContext.onViewportChange(currentElement.value)
 })
 
 watchEffect((cleanupFn) => {
   const viewport = currentElement.value
-  if (hasToasts.value && viewport && context) {
+  if (hasToasts.value && viewport) {
     const handlePause = () => {
-      if (!context.isClosePausedRef.value) {
+      if (!providerContext.isClosePausedRef.value) {
         const pauseEvent = new CustomEvent(VIEWPORT_PAUSE)
         viewport.dispatchEvent(pauseEvent)
-        context.isClosePausedRef.value = true
+        providerContext.isClosePausedRef.value = true
       }
     }
 
     const handleResume = () => {
-      if (context.isClosePausedRef.value) {
+      if (providerContext.isClosePausedRef.value) {
         const resumeEvent = new CustomEvent(VIEWPORT_RESUME)
         viewport.dispatchEvent(resumeEvent)
-        context.isClosePausedRef.value = false
+        providerContext.isClosePausedRef.value = false
       }
     }