When to Use Render Function

Hi 👋

Firstly, I would like to congratulate the recent Vue.js Live 2023 ticket raffle winners and express my gratitude to all who participated. Your support and enthusiasm are much appreciated, and I hope to continue offering engaging events and opportunities in the future.

In other news, I'll soon start preparing my talk for Vue.js Live 2023 conference.

Stay tuned for more updates, and thank you for being a valued part of our community.

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

There are very few cases where you should use a render function instead of regular templates to create components in Vue.js.

Avoiding rendering functions results in code that is much easier to read and more accessible to other developers.

I think that render functions are a difficult-to-read mix of HTML and JavaScript.

Avoiding render functions is also the recommended approach in the Vue documentation:

Vue recommends using templates to build applications in the vast majority of cases. However, there are situations where we need the full programmatic power of JavaScript. That's where we can use the render function.

Code Examples

Let's compare a simple example using the <template> tag and render function. First the regular Vue component code:

And this would be the equivalent using render function:

SFC Playground

Render Function Scenarios

Render functions are required when there is a necessity for harnessing the complete programmatic capabilities of JavaScript, such as gaining greater authority over how an application is rendered. Vue libraries development greatly benefits from render functions, which are also employed by a specific subset of developers.

This article explains a few render functions use-cases.

Until next week,