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.