Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #86 - When to Use Render Function #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #86

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:

Vue Tip: When to Use Render Function

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:

2 <div class="wrapper">
3 <p class="any-class">Lorem Ipsum</p>
4 </div>

And this would be the equivalent using render function:

1<script setup>
2import { h } from 'vue'
4const render = h(
5 'div', // type
6 { class: 'wrapper' }, // props
7 [
8 h(
9 'div',
10 {
11 class: 'any-class',
12 innerHTML: 'Lorem Ipsum',
13 },
14 []
15 ),
16 ] // children
21 <render />

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.

Curated Vue ContentπŸ“• Auth in Nuxt 3: Logging in and Logging Out

πŸ‘‰πŸ» Michael explains how to use Supabase and Github to log users in and out of a Nuxt 3 application.
πŸ“• Composing Layouts with Vue Router
πŸ‘‰πŸ» We all know that Vue Router can be used to map routes to page components.
πŸ‘‰πŸ» Daniel shows how you can also use it to compose page layouts.
πŸ“Ή Rapid Fullstack Development with Nuxt 3 and tRPC

πŸ‘‰πŸ» tRPC is a library that makes it easy to build end-to-end typesafe APIs without code generation by leveraging the power of modern TypeScript.
πŸ“Ή I Tried Nuxt 3 and Vue.js: My Top 3 DX Loves

πŸ‘‰πŸ» Tejas learned Nuxt & Vue from Daniel Croe over a ~2 hour livestream.
πŸ› οΈ PreVue
PreVue allows users to:
πŸ‘‰πŸ» Create components and preview their code
πŸ‘‰πŸ» Set up different routes and views
πŸ‘‰πŸ» Establish parent-child component relationships
πŸ‘‰πŸ» View application hierarchy in tree format
πŸ‘‰πŸ» Export the component architecture
Quote of the weekCurated Web Development ContentπŸ“• Which web frontend architecture fits best?

πŸ‘‰πŸ» Technical article where Patrick creates a guide on how to find the right web frontend architecture that fits your specific quality goals.
πŸ“• TypeScript’s Migration to Modules
πŸ‘‰πŸ» TypeScript has restructured its codebase to use ES modules.
πŸ‘‰πŸ» It results in smaller package sizes, quicker build times, and little disruption to end users.
πŸ“• My favourite 3 lines of CSS

πŸ‘‰πŸ» β€œThe main reason I’ve written this post though, is to send people to it when they ask why I use .flow or use margin, but also, I hope you’ve seen how damn powerful CSS Custom Properties are.”
πŸ› οΈ Modern Font Stacks
πŸ‘‰πŸ» Features a system font stack for every modern OS organized by typeface classification.
πŸ‘‰πŸ» The fonts are fast and do not require downloading, layout shifts, or flashes.
πŸ‘‰πŸ» They can be easily previewed with customizations.
πŸ› οΈ consola
πŸ‘‰πŸ» Elegant Console Logger for Node.js and Browser
πŸ‘‰πŸ» Easy to use
πŸ‘‰πŸ» Fancy output with fallback for minimal environments
πŸ‘‰πŸ» Pluggable reporters
πŸ‘‰πŸ» and more...
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
Β© 2023 All rights reserved.