Since Syndicode loves Vue.js and really supports the opinion that Vue tries to give the developer power over components and their implementation, today we’d like to tell you about building renderless Vue components. The term renderless components refers to components that don’t render anything. How Vue handles the rendering of a component?
A component’s render function is incredibly powerful. Since Vue understands S.O.L.I.D. principles, it lets components have props, events, slots, and scoped slots which makes communication and extension of a component easier. We can then build components that have all the features, without any of the styling or markup. Which is really great for re-usability and efficient code.
So, to find out how Vue handles the rendering of a component, in details, and with code examples provided, read this original article Building ‘Renderless’ Vue Components by Samuel Oloruntoba.
There you will find about:
- the ways Vue defining a component’s markup;
- the template compiler and the render function;
- why we actually want components that don’t render anything;
- a ‘Toggle’ renderless component;
- slots in renderless components;
- scoped slots.