It's really odd that Blocks aren't Vue components

[jsodeman]

For example, I want my Toast component to look like one of the PrimeBlocks Alert blocks: https://blocks.primevue.org/#/application/alert

The Toast component only exposes a slot for the message, so I can't just drop in the HTML from the block. Instead I have to figure out how to use passthrough and various options to get the Vue component to render html that matches the block. And even then it doesn't really work because you can't change the custom icon based on the message severity. And if I use just the HTML then I have to recreate all the functionality of toast from scratch.

Or the Action Panel blocks would seem to be the Dialog component, but if I just use the HTML from the block then I don't have all the functionality of the Dialog without recreating it from scratch.

I purchased PrimeVue Blocks, but given that the Blocks are just HTML with classes for a comparable price you seem to get a lot more from Tailwind UI.

[cagataycivici]

It is because blocks are meant to be customized and used as a base when creating your own components by wrapping them. If there were shipped as components like PrimeVue components, you had to import them, get restricted to an API like props, events so on.

Providing them as templates gives you full flexibility to build your own libraries.

For Toast and Action Panels, you may create a ticket for a template slot that customizes content entirely for sure, that sounds like a great idea so get best of both worlds. We add slots as much as we can but there is always room for improvement.

[timothymarois]

@cagataycivici, not really. It could easily be vue components you copy and paste, like tailwind UI. Functionality is a priority of purchase more than HTML which I can find at any tailwind site. Otherwise, there isn't necessarily a need to purchase PrimeBlocks if it's just HTML; there are many libraries out there now that are just HTML, so it's easy to find that. Hard to find components.

[jsodeman]

Thanks for the context, and I agree that the blocks being overly customized would make them less useful.

In thinking about how to explain it better, what I really would like is to see is code showing the existing PrimeVue components with the passthrough and properties set to generate what's shown in the block.

For example the Sidebar Layout. When I looked at the code I expected to see some combination of HTML and PrimeFlex for the layout and components like a Sidebar with a PanelMenu/Tree/etc with the options, passthrough, and classes on those components configured to generate the shown UI.

That way I could tweak the styling as needed by adjusting the various Vue component props instead of having to recreate a Tree using the HTML from the block and adding v-for loops and event handlers to get the functionality of a Tree. Or having to figure out all the correct Tree props needed on my own.

If you take the Sign-In form as example, that code uses InputText, Checkbox, and Button components instead of the equivalent HTML. So you have

<Button label="Sign In" icon="pi pi-user" class="w-full"></Button>

instead of

<button type="button" class="w-full"><i class="pi pi-user"></i> Sign In</button>

That's what I'd expect to see throughout the blocks.

[cagataycivici]

I went ahead and created this issue for the overlay elements which I believe should allow copying-pasting a block content inside a component. We should add this to more components after using these 4 components as a Proof of Concept like buttons and more.

primefaces/primevue#4433

PassThrough is all about customizing the default dom elements, it may not be enough in some cases like this one so more slots are required to be able to use it in some sort of a Headless mode.

We'll discuss your feedback next week in our team meeting, thank you for the valuable feedback! Flexibility is the new mindset of PrimeVue so you may expect new enhancements in near future.