How To Code Faster With Vue.js Render Functions!! - Advanced Render Functions Tutorial

👉Check out my first video on Render function basics!

👉 Sign up and get free Vue cheat sheets and updates!

Need to Learn Vue or Nuxt? Check out my courses below!

0:00 Introduction
01:28 Overview Of App
03:00 Adding an Form, Input and Button using h()
05:28 Adding Styles and Event Handling
08:05 Adding Search Function With Fetch
09:05 Add click handler to button
09:42 Display Data using JavaScript Map function
11:15 Add in error handling with ternary operator
12:10 Adding in a default slots with render functions
13:26 Adding in Scoped slots with render functions
14:25 Showing average score
16:00 Conclusion

♡ ♡ ♡
Make Sure To Check These Courses Out On Udemy ! 💻

Links

[ProgramWithErik]

👉 Sign up and get free Vue cheat sheets and updates!

[felipechaves]

Evan himself stated that, specially in vue3, templates are the fastest option for various reason. The render function is something that will be needed when you need dynamic components or when you need to take advantage of javascript functionalities. But speed would be better with raw templates.

[jimmyj.]

Great learn about advanced render but i don’t understand the goal behind this 😅 question about performance rendering or something else 🤔
I don’t know what is your plugin about highligthing methods but really wonderful 😍

[jamiebrs]

What is the use case for this? Is it faster rendering? More capable of handling load? Trying to understand the WHY behind wanting to do it this way.

[rajikkali]

Would love to see an example when this is truly needed rather than something that is actually better done with the Options API or just normal Composition API without the render function.
I have zero inclination to go back to vanilla JS days while still wrapping it in a beautiful framework like Vue and all the simplicity it provides.

[patriciaribeiro]

Great video, Erick. Your teaching skills are excellent.
I was only able to understand Render Functions with your explanations. Thank U! :D

[luizeduardocampos]

Nice video, thanks! Someone can say when using a render function like that is the best option?

[captainalpha]

Thanks for the video!
I'm using "render()" function in my project which is a Google calendar app clone.
However, the function doesn't allow me to create a component multiple times within the same parent. Do you have any clue as why this happens?

[CuongPC]

Hi Erik, thanks for your amazing videos about Vue.js. I've subcribed your channel 3 days ago but you're really my favorite "mentor".
I have a question, can I start a new project (that will be applied on production) with Vue3 (with totally Typescript) and Tailwind css now? (I chose Tailwind because I'm familiar with Vuetify before but Vuetify has not supported Vue3 yet).
Thanks

[samueltesh]

need more examples of when render functions save the day

[curadermbcc]

Good video, I like so much your videos Eric. I follow you, and I like these videos because are for advanced Vue users.

But please sometimes is very difficult understand what does your code (vanilla JS) because there are too much abreviations and ternary conditionals:

This line for example is very hard to understand (at least for me):

const computedAverage = shows => shows.reduce((acc, info) => +info.score + acc, 0) / shows.length

[ivanpln]

Excuse me, what is your extension for your VS Code theme?

[ВикторМачеткин]

Hello, what is the name of code style theme?

[outofrange]

Hi, thanks for your videos, they’re really awesome! Can you please make some tutorials how integrate render functions in vue 3 with 3rd party libraries like mapbox, for example?

[scriptedpixelsltd]

I wonder how often this is used? It looks/feels quite ugly rendering all the app elements within each other :/ e.g: within `h('form'', ....` there's so much within it that feels like it's taking a step back from having components in their own files?

[LNDR]

I know that it's not the point of the video, but I would like to know what are you using to make this "neon effect" on you editor. Can you tell me, please?

[hasiburrahman]

Please Make some video tutorials about MeteorJS and VueJS.

[robertkaminski]

Really readable code... for me exposing this h halper and render function is way to handle some edge case when vue template system can't handle. Using it in way that you don't complete don't have sense... but i understand that this is only demonstration of possibilities. I was forced to use it couple times and i was missided for JSX...

[ElmachitoSilbateador]

it's looks ugly tbh, if someone is gonna be edgy with vue, at least use jsx instead if "that"

[hariharan-wtqk]

Why to use Vue render functions while Vue templates are available