Slots and :let

[blangenfeld]

TLDR: Can a Vue slot yield its bindings to a .heex template via :let?

Super-contrived example here...

MyCoolList.vue

<template>
    <ul>
        <li v-for="item in items" :key="item.id">
            <slot name="item" v-bind="{ item }" >
                User <%= user.email %> has id <%= user.email %>
            </slot>
        </li>
    </ul>
</template>

my_cool_liveview.ex

# Default slot content, no problem
<.vue v-component="MyCoolList" items={[user_1, user_2, ...]} />

# No good, because `user` is `nil` (i.e. `v-bind` didn't translate)
<.vue v-component="MyCoolList" items={[user_1, user_2, ...]}>
   <:row :let={user}>
      User <%= user.id %> has email <%= user.email %>
   </:row>
</.vue>

I see here that we're calling render_slot/1, so :let will always receive nil.

live_vue/lib/live_vue/slots.ex

Line 33 in b46d5b3

{render_slot(@slot)}

But are slot bindings are even available in this context, to be passed to render_slot/2?

[Valian]

Hi @blangenfeld!

I don't think it's possible now. Currently slots are purely server-driven - slots are rendered on the server, and then base64 encoded and attached to the root element as data-slots attribute.

live_vue/assets/js/live_vue/hooks.ts

Lines 16 to 24 in b46d5b3

	/**
	* Parses the slots from the element's attributes and returns them as a record.
	* The slots are parsed from the "data-slots" attribute.
	* The slots are converted to a function that returns a div with the innerHTML set to the base64 decoded slot.
	*/
	const getSlots = (el: HTMLElement): Record<string, () => any> => {
	const dataSlots = getAttributeJson(el, "data-slots")
	return mapValues(dataSlots, base64 => () => h("div", { innerHTML: atob(base64).trim() }))
	}

Then, they're passed down into Vue component as a slot. There is no mechanism of:

• rendering Vue code
• figuring out what slots are being called (with which bindings)
• and asking server to re-render these

I don't know if it's possible, nor if it would be performant. Usually I'm just passing down array of items to Vue and let it fully handle rendering. Mixing HEEX and Vue too much doesn't work well in my experience, mostly because of component duplication. You can see more on my ElixirConfEU 2025 slides

May I ask what's your use case?

[blangenfeld]

@Valian , thanks for the thoughtful response. I suspected "something something rendering" to be the hurdle here. 😅

As for the use case: I'm using LiveView to build @headlessui/vue components into an app. I've put together a styled Listbox, and am passing options into it. I reached for :let as a way to customize the option rendering as desired, because that's how I might do it in LiveView.

Not a problem, though! I can always work out an option "shape" that can describe any way I'd reasonably want my Listbox to present the options... { key, value, title, subtitle, icon }, whatever. Just wondered if it'd also be possible via :let.

Thanks for your work on this! Very cool project. 😎