Question about useSlots() - not reactive?

[awacode21]

i need to access the slots content in script setup to count the children of the default slot.
According the documentation https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs
i can use

const slots = useSlots();
console.log(slots.default().length);

And within template just $slots.default().length.

But i recognize a difference in both. In template $slots seems to be reactive when slot content changes (example change from 4 to 3 children in slot). The value updates.

But useSlots seems not to be reactive. I don't get it running to get the update when slot content gets added or removed. i tried to use a ref, i tried to use a computed, it looks like i can only access the initial value on component setup but no further updates when slot content changes.

Is this difference expected? How would i need to handle it?

[liulinboyi]

You can use like this Example, Hope this helps you.

new.mp4

[awacode21]

This helped me a lot! Thank you so much.

[awacode21]

@liulinboyi Should that still be possible with latest vue / nuxt version?

[acabreragnz]

I know this doesn't directly answer the OP's question, but in case anyone needs to make it reactive based on the current viewport, this approach worked for me:

import { ref, watch } from 'vue';
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';

const slots = defineSlots<{
  footer(): VNode[];
}>();

const breakpoints = useBreakpoints(breakpointsTailwind);
const hasFooterSlot = ref(false);

watch(
  () => breakpoints.active().value,
  () => {
    hasFooterSlot.value = !!slots.footer?.()?.length
  },
  { immediate: true }
);