Skip to content

Function: useBaseSlots() ​

ts
function useBaseSlots<T>(slots: T): {
  appendInnerSlot: any;
  appendSlot: any;
  clearSlot: any;
  detailsSlot: any;
  labelSlot: any;
  loaderSlot: any;
  messageSlot: any;
  prependInnerSlot: any;
  prependSlot: any;
};

Composable that extracts and provides typed slot renderer functions for all BaseField slots. Returns an object with individual slot renderer functions that safely invoke slots with proper typing. Each renderer function accepts slot parameters and returns the slot's render result or undefined.

Type Parameters ​

Type ParameterDefault typeDescription
T extends Omit<{ append?: (arg: VInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; append-inner?: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; clear?: (arg: DefaultInputSlot & { props: Record<string, any>; }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; default?: (arg: VFieldSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; details?: (arg: VInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; label?: (arg: DefaultInputSlot & { label: string | undefined; props: Record<string, any>; }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; loader?: (arg: LoaderSlotProps) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; message?: (arg: VMessageSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; prepend?: (arg: VInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; prepend-inner?: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; }, "default">Omit<{ append?: (arg: VInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; append-inner?: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; clear?: (arg: DefaultInputSlot & { props: Record<string, any>; }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; default?: (arg: VFieldSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; details?: (arg: VInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; label?: (arg: DefaultInputSlot & { label: string | undefined; props: Record<string, any>; }) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; loader?: (arg: LoaderSlotProps) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; message?: (arg: VMessageSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; prepend?: (arg: VInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; prepend-inner?: (arg: DefaultInputSlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]; }, "default">The slot definitions type, excluding the 'default' slot

Parameters ​

ParameterTypeDescription
slotsTThe slots object from the component

Returns ​

ts
{
  appendInnerSlot: any;
  appendSlot: any;
  clearSlot: any;
  detailsSlot: any;
  labelSlot: any;
  loaderSlot: any;
  messageSlot: any;
  prependInnerSlot: any;
  prependSlot: any;
}

An object containing typed slot renderer functions for all BaseField slots

NameType
appendInnerSlotany
appendSlotany
clearSlotany
detailsSlotany
labelSlotany
loaderSlotany
messageSlotany
prependInnerSlotany
prependSlotany

Example ​

typescript
const {
  clearSlot,
  prependInnerSlot,
  labelSlot,
  // ... other slot renderers
} = useBaseSlots(slots);

// Later in render function:
const labelVNode = labelSlot({ label: "My Label", props: {} });