Vue Portal Provider that nests/recurse

portal-provider.ts

import {
	inject,
	provide,
	type InjectionKey,
	type SlotsType,
	type ComputedRef,
	computed,
	toRef,
	defineComponent,
} from 'vue';

export const PortalProviderInjectionKey: InjectionKey<
	ComputedRef<HTMLElement>
> = Symbol('PortalProviderInjectionKey');

export const PortalProvider = defineComponent({
	props: {
		to: {
			type: Object as () => HTMLElement,
			default: undefined,
		},
	},
	slots: Object as SlotsType<{ default: void }>,
	setup(props, context) {
		const providedPortalTo = usePortalProvider();
		const propsPortalTo = toRef(props, 'to');

		const value = computed(() => propsPortalTo.value ?? providedPortalTo.value);

		provide(PortalProviderInjectionKey, value);

		return () => context.slots.default();
	},
});

export function usePortalProvider() {
	return inject(
		PortalProviderInjectionKey,
		computed(() => document.body),
	);
}