Create A Vue App With Render Functions Tutorial! What Is it?

No video

Create A Vue App With Render Functions Tutorial! What Is it?

Рет қаралды 11,522

Program With Erik

Күн бұрын

Пікірлер: 26

@ProgramWithErik 4 жыл бұрын

What do you guys think of Render functions?

@encryptedkenyan 4 жыл бұрын

Bruh.. This is awesome! Great examples :D !

@hcmlopes 4 жыл бұрын

Could you share an example of when you would use this in the real world? I understand how you can dynamically change the tag but I fail to see how this is even needed most of the times. It's a naive though of my part but I just don't have any use cases that I can think of

@ProgramWithErik 4 жыл бұрын

Render functions work really well with renderless components. I'll have to give an example of that in the future. For example, if you wanted to wrap a 3rd party library in Vue. You could using a renderless component with a render function that only has a scoped slot it. Then wrap that in any content that you need to be effected by the 3rd party library. Also, sometimes you want a really simple component, that only does 1 thing, and you want it to be really fast. Render functions tend to be a bit faster then templates

@justafreak15able 3 жыл бұрын

I don't know if you need an example now but this is for people watching now. And a simple example would be a toast or a custom alert. you can make a showToast mixin and in that mixin, you use the render function to create your elements. And you can do this this.showToast("Toast Message"); this will work great if you have to show toast on different pages. No no importing toast components. Bootstrap-Vue toast has a render function toast.

@jamesikubi6831 4 жыл бұрын

Thanks Erik, but guys always remember; " Vue recommends using templates to build your HTML in the vast majority of cases. There are situations however, where you really need the full programmatic power of JavaScript. That’s where you can use the render function, a closer-to-the-compiler alternative to templates". vuejs.org/v2/guide/render-function.html

@sergiocastro5060 3 жыл бұрын

This video was an excellent explication, thank you so much Erick !!!!

@ProgramWithErik 3 жыл бұрын

You are welcome

@sergiocastro5060 3 жыл бұрын

@@ProgramWithErik thanks, you have a new subscriptor

@AliAlmoullim 4 жыл бұрын

Btw, you can use JSX instead of the createElement function

@johnnydriesen7575 4 жыл бұрын

IMHO ... I don't see the advantage (yet) Though, thanks for sharing your knowledge, @Erik !

@imranraja1322 4 жыл бұрын

Can't we add a single element with render function except for whole template for example: In a table I want to dynamically add and in it input with v-model with pure js it does not work?

@turabmehdi1632 4 жыл бұрын

Great overview, many thanks. Had a question, how does one use vuetify components, i.e., v-app-bar, v-navigation-drawer, etc. within render functions?

@sitiafiqahismail6533 3 жыл бұрын

thank you so much this just helped me a lot!

@Lannnister 4 жыл бұрын

Amazing tutorial, thanks!

@7x01 Жыл бұрын

Render reminds me a of React structure.

@Kanexxable 4 жыл бұрын

Do render functions make Vue faster or reduce bundle size. They could be useful for making libraries

@victormarval4904 4 жыл бұрын

Awesome video, Erik. I've seen this approach being used a lot lately, but I couldn't really underestand it until now. Do you think render functions will be used a lot more in Vue 3?

@ProgramWithErik 4 жыл бұрын

They are still there, and have been updated. But it's really not something everyone will be using