useSlotNameResolver

Overview

Helper to resolve the most specific slot name from a list of candidates in order of precedence.

Signature

useSlotNameResolver(slotNamesInOrderOfPrecedence, slots)

Parameters

Name	Type	Required	Description
slotNamesInOrderOfPrecedence	SlotNamesInOrderOfPrecedence	yes	The slot names to check for, in order of precedence.
slots	object	no	The slots object to check against. If not provided, the current instance's slots will be used.

Returns

- The resolved slot name.

Examples

<script setup>
import { useSlotNameResolver } from '@vueda/use/useSlotNameResolver.js';

// some reactive/dynamic logic
const myFieldName = computed(() => 'myField');
const mySlotsNames = computed(() => ([
  `field(${unref(myFieldName)})mySlot`, `field-mySlot`, 'mySlot'
]));
const mySlot = useSlotNameResolver(mySlotsNames);
</script>
<template>
    ...
    <!-- translate outside slot names to mySlot -->
    <some-sub-component>
      <template name="mySlot">
        <slot v-if="mySlot.exists" :name="mySlot.name" />
      </template>
    </some-sub-component>
    ...
</template>

Source

client/lib/use/useSlotNameResolver.js:58