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
• IntroducingTailwind CS...
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out
👉mentorcruise.com/mentor/erikh...
Need to Learn Vue or Nuxt? Check out my courses below!
bit.ly/2LalQka - Learn Nuxt.js Course!
bit.ly/3aiYe8s - Quick Starter On Vue 3
bit.ly/2OETt0M - Full 6 Module course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bos ! 💻
Begginer JavaScript - BeginnerJavaScript.com/friend...
React For Beginners - ReactForBeginners.com/friend/...
Advanced React - AdvancedReact.com/friend/HANC...
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
github.com/ErikCH/Vue3Advance...

[@pranav854]

Congratulations on the 100k, Erik! Great video. Would love to see some similar advanced Vue content in the future!

[@ProgramWithErik]

Thanks! Will do!

[@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.

[@RicoHerwig]

That's an interesting topic! Do you, by chance, have a resource where I can read more about that?

[@ProgramWithErik]

Hey Thanks Matteo! I have not heard of that, but that makes sense. Perhaps using something like effect Scope, could be used to mitigate that problem... v3.vuejs.org/api/effect-scope.html#effectscope

[@Remeroska]

@@ProgramWithErik it sure does. When you define refs/reactive values outside of setup they provide a function to have their effects disposed and garbage collected. If you don't dispose them correctly memory keeps going up every time you reload a page. I'll create a reproduction repository if you want, I have had this problem twice with two projects before understanding what was wrong 😅

[@AEspinoRful]

@@Remeroska Do you know another solution besides using Nuxt 3?

[@brunofunnie]

And that's why StackOverflow doesn't allow (receive a lot of downvotes) when a comment like this appear. It creates a doubt on people minds, doesn't provide any proof of concept, put a lot of "facts" and just leave. When you do certain assumptions and advice people with phrases that contain a "don't do that" label is you obligation to show a least a POC showing the scenario, otherwise is just bollocks.

[@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.

[@ProgramWithErik]

Glad it helped~! Yeah, JSX isn't for everyone.

[@brandonleichty]

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

[@ProgramWithErik]

Thanks!

[@cesswhite]

Thank you Erik, amazing video

[@ProgramWithErik]

My pleasure!

[@edwardgwilson]

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

[@DarylLegion]

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

[@ProgramWithErik]

Glad it was helpful!

[@gd9464]

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

[@LuckyStilet1]

You could use

[@ProgramWithErik]

Interesting! I did not know that. I'll try that next time.

[@whatsupbudbud]

So it' s basically inline jsx?

[@arjunvd2277]

Hi Erik, Can we use vue ( not vue client side ) inside already working .net core view page? is it possible? like vue packages?

[@ProgramWithErik]

There was a conference talk at last years Vue Conference where someone was using the 'reactive' Vue on the server side. You could look into that

[@rajikkali2381]

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.

[@danielwood2432]

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.

[@ProgramWithErik]

Interesting, might be a fun topic to look at! Thanks I don't think I've ever done that. But I'm sure it could be done...

[@maneth3448]

100k congrats

[@ProgramWithErik]

Thank you so much 😀

[@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.

[@graphicdesignandwebsolutio365]

Definitely want a JSX vid

[@Molinafx1]

Please!

[@artakan303]

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, ....

[@ProgramWithErik]

That's a good point? Are you talking specifically about using JSX, or slots?

[@artakan303]

@@ProgramWithErik JSX is problematic (maybe it's because I still use Vue2, as Vuetify is not ready yet), slots are native to Vue, so there is not issues with them.

[@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...

[@jitendra2510]

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

[@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.

[@ProgramWithErik]

Interesting. Well first, I really like SSG so there is Vue 3 plugins for SSG like github.com/antfu/vite-ssg. As for adding meta tags vue meta is in alpha for Vue 3. Also, I think Google crawlers work fine for SPA type apps now a days. I stilll prefer SSG for the speed though on blogs and contente heavy SEO sites.

[@SirDamatoIII]

@@ProgramWithErik Thanks for the kind reply, I will go and have a look as I am keen to find a way for static content generation (on public blog side of the app), while not touching anything behind the authenticated part of the app. My results with Vue even using Portals as per what VueMeta dev team was discussing with their upgrade for Vue3 support - was that the crawling is terrible when previewing Google bot’s scraping results. They do have a wait to load method for SPAs, but most other crawlers do not or are extremely lacking. So this is quite an interesting one as an SSR approach would best although as mentioned not always possible.

[@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.

[@arnesneyers2076]

You are becoming my best friend! :)

[@rajikkali2381]

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

[@shanTwo]

Quasar ❤️

[@ProgramWithErik]

That's a good one

[@antfun8784]

buen video crack :b

[@caiovinicius7871]

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

[@ProgramWithErik]

Nice!

[@IgorKravets81]

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

[@butbutmybutt]

hmm, v-html?

[@pathtic7397]

Primitive components = components which hasn'y any logic, like sections, text containers etc.?

[@ProgramWithErik]

I feel like they are the lowest level of components, like buttons, text inputs, forms. Things like those I consider primitives. They may or may not have logic

[@pathtic7397]

@@ProgramWithErik Ok, thanks :)

[@bik7087]

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

[@ProgramWithErik]

What pattern do you like?

[@bik7087]

@@ProgramWithErik Obvious and others develops can understand. Like in official documentation

[@studiowebselect]

9:18 onMonted is not the solution. Its because the child reasign the shadowText.

[@ProgramWithErik]

The onMounted gives a minute for the child to load before we change the text.... There was probably a few ways to handle it

[@studiowebselect]

@@ProgramWithErik yes.but it was mounted with the bad value first and was reprocess/paint after. In SSR you will have the bad text in SEO.

[@studiowebselect]

@@ProgramWithErik btw, you are one of my favorite youtuber!

[@sergeichwelcome]

First

[@ProgramWithErik]

Good job!

[@Kidziel]

Is it only me that cannot play the video?

[@jbarman]

It is very annoying to look at your folder structure in the right side

[@PriyankBolia]

In one of the video, he showed why having folder structure on the right side is better for the eyes, when you hide that, the code stays at the same place.

[@ProgramWithErik]

Yeah, as @Priyank said, I put it on the right side because it's less movement when I close it of the code. I stole that from Jason at Netlify