Presentation Component

Every now and then the stock controls aren't enough. Presentation Component is the pack's escape hatch: it tells the generated website to render your Vue component at that spot in the layout. The README's table sums it up as "Add your own custom component," and the node's tooltip gives you the contract: the name is the Vue component, which you drop in components/node/<Name>.vue. If you're comfortable with a little Nuxt/Vue, this is how you ship a fully custom control - a gallery, a chat box, a custom uploader - inside a tab built from your workflow.

Reasonable expectations first: this is the one node in the pack aimed at developers, not at people who just want to ship a button. If you've never touched a .vue file, this will feel like work. But the mechanism is refreshingly honest - the generated site is a real, editable Nuxt project sitting in output/presentation-site, and this node is the officially-supported seam for adding your own components to it.

How it works

The Python side is a stub - custom returns nothing. What the node does is tell the site generator "render component <name> here and pass it <data>." The data is serialized as a JSON string (default "{}") and handed to the component as props, so you can wire values through from the workflow. The component itself is plain Vue code that you write and place at components/node/<Name>.vue in the generated site.

The inputs that matter

• name (default "Testcomponent") - the component filename (without .vue). If you set name to MySlider, the site looks for components/node/MySlider.vue. The default name is a deliberate hint that you must create the file before this node does anything.
• data (default "{}") - a JSON string of extra data to send to the component as props. Keep it valid JSON; {"label": "Strength", "default": 0.7} is the shape it expects.

No outputs - the component renders in place; if it needs to affect the workflow, it does so through the site's existing write-back mechanism (the workflowIds allowlist in the tab's workflow.json).

How to install it

Same single install as the whole pack. ComfyUI Manager, search "Presentation ComfyUI", or:

cd ComfyUI/custom_nodes
git clone https://github.com/niknah/presentation-ComfyUI

then restart. Requires Node.js installed separately; first launch runs npm install for the Nuxt site in output/presentation-site, which takes a few minutes. The site runs at http://localhost:3000 - and since it's a real Nuxt project, you can also edit the site directly.

Common issues & troubleshooting

Nothing renders / blank spot. Almost always the component file is missing or the name doesn't match. Check output/presentation-site/components/node/<Name>.vue exists with the exact casing you set in name, then Settings → Presentation → Rebuild.

Component renders but gets no data. data must be valid JSON. A typo like {label: 'x'} (unquoted key) fails silently and the component receives nothing.

My edits to the site keep getting wiped. Expected behavior - the README's generated files carry a header: "Will be overwritten when someone changes the workflow." Rebuild regenerates from your graph. Put durable custom code in components that persist, or re-apply after rebuilds.

Layout not updating. Settings → Presentation → Restart / Rebuild, and kill duplicate nuxt processes on the folder before restarting.