Vue.js Advanced Component Composition Patterns

Let's talk about Advanced Components, what patterns should you use, how can slots and JSX help? Let's take al ook!

👉Check out my last video on Tailwind CSS 3

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

Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out

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

🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bos ! 💻

0:00 Introduction
0:39 App Introduction
2:08 Nested Slots
5:20 Composition Store
9:55 Render Function Pattern
13:25 JSX Solution

Links

[pranav]

Congratulations on the 100k, Erik!

Great video. Would love to see some similar advanced Vue content in the future!

[Remeroska]

Be careful with the composition store. Having reactive values outside of the setup script lifecycle can lead to nightmarish memory leaks both in the browser and in the server (if you're working in an SSR environment). I strongly advise against it. Nuxt 3 useState approach (keyed reactive refs) is by far the safest and more correct approach.

[LesCarbonaro]

Slots are cool and all, but beyond one or two levels deep they become cumbersome. So to me the store pattern is the way to go here. jsx?? I don't think so... it's what turned me off of react and onto Vue in the first place, so not about to go down that route again. Informative tutorial, thank you.

[brandonleichty]

Congrats on reaching 100k developers! You're my #1 go-to Vue channel!

[LuckyStilet]

You could use <component :is="{template: `<div>my test component</div>`}"/>

[rajikkali]

Global modals work great with the store pattern using an object that holds all state I want. I do it all the time and it’s infinitely customizable on the fly without limitation.

[rotorink]

nice! more tsx in vue? it’s a little more experimental & not as seamless as jsx in react, naturally, but vue with tsx fascinates me. there’s a couple good resources on how to work with the 2 but there’s really not a lot of content out there on it.

[jitendra]

I think it will be a great feature for updating Hybrid apps live, without pushing a real app update into the store.

[danielwood]

Would you create a video about how to render a component from async content? For example...think Wordpress style short-code. Loading a vue component from HTML that is loaded from an API call. I've always wonder if there was a way to do that. I assume using the render function would be needed.

[artakan]

It looks cool at the beginning, but you kind of open the Pandora box with the issues, I speak about experiences. Issues when you want to use events, issues when you want to use Jest, etc, ....

[DarylLegion]

Thanks Erik, great tutorial! I just started to learn Vue and in the future I might use this.

[rajikkali]

Never had to import mounted (onMounted) before… with Vue3 we write more code and it’s less readable.

[caiovinicius]

The composition store way is magnific! I'll start to use it in my projects when necessary.

[DedicatedManagers]

At 6:24 why don’t you just export the store variable. Why do you need a function to call to retrieve the variable.

[edwardgwilson]

Off topic question... what theme are you using in VS Code?

[gd]

Hi, I couldn't find any complete or good resource for jwt auth in vue. Can you make one with production ready. 😀

[SirDamatoIII]

Love Vue, would just like to have it render SEO friendly manner. Especially since SSR is not always an option. This I have seen done as an intercept, on routing where the SEO specific meta structure is sent when a the Google crawler bot is identified. Any ideas on something like this, as a bullet proof solution would be awesome since VueMeta is no longer applicable since the version Vue3 release.

[RaskaTheFurry]

I try to store all variables and methods in the root .vue file... unless they are component specific.
like Table has sorting methods, im not gonna use that anywhere else.
But getting data from API is at the top, because its provided everywhere and deep...

[web_chaos]

Sad😕

1. I don't want make props drilling, but I did slot drilling
2. Not reactive as expected, and needs yous additional code
3. Most people need time to understand this pattern, also for experience programmers. In my opinion, this pattern almost never will be using in real projects

[IgorKravets]

I guess you could pass a component as a prop or in store and just use it in shadow box