Renderless vs rendered components?

[sky-xo]

Hey there!

I noticed you're only using renderless components in this theme. Is this normally how you work with Vue and Shopify? If so, can you explain the rational? Does it make things easier / faster?

Do you work this way with all your Vue projects? Or is this specific to Shopify because you're working with statically rendered liquid templates?

Thanks!!

[sergejcodes]

Hi,

I usually use renderless components in projects that already have a different templating engine (liquid, twig, etc) at its core, it's not limited to Shopify.

But then it's mostly on a case-by-case basis. When implementing new features I consider if it makes more sense to implement the feature as a regular component or as renderless. Sometimes it makes more sense to leave the templating to the initial templating engine and wrap the block in a Vue renderless component to provide some additional reactivity. It's mostly for maintainability.

You can wrap differently structured parts of code with the same renderless component and provided specific data, methods, etc which then can be accessed and used.