Renderless Components and Inheritance
Explore Vue's renderless components and inheritance.
A component doesn’t necessarily need a template. Not needing a template can be helpful for several reasons. Maybe we need a simple validator component that wraps all the form fields with listeners, but we don’t want it to add an extra <div>
around them. Maybe we have some abstract definition of a form field that cannot be rendered as a single template but offers some methods and data. Or perhaps we want to abstract some logic away in general.
The key difference between a standard component and a renderless component is that a renderless component lacks a template and lacks any style. While a .vue
file offers all of these, a renderless component only offers the script part and doesn’t need to be a .vue
file. A .js
file can be a Vue component too.
One could say that a renderless component is the most basic version of a component, whereas a normal .vue
component is an enhanced version.
Defining renderless components
A renderless component is defined in a single .js
file. The most basic one looks like this:
Get hands-on with 1200+ tech skills courses.