Dynamic Components in Vue

🃏 The more complex scenarios applications have to cover, the more the need for dynamic components increases. Using different tabs, icons, modals with different content or blocks defined in a CMS - all these cases are typical for dynamic components. But how to implement them in an easy way and which options are there? You'll find out in this video!

---
Key points:

3️⃣ Three different ways to implement dynamic components
🌍 Global components vs. locally imported components
🗻 Bonus - How Nuxt handles global components

---

Links:

📺 @DejaVueFm

Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!

🌐 Connect further:

---

Chapters:

00:00 Intro + Setup
00:42 Demo App
02:36 A simple switch for two components
04:15 Truly dynamic components
05:40 Imports via alias or relative paths
08:09 resolveComponent
10:10 Global components
12:10 Nuxt's global implementation
13:04 Summary

[TheAlexLichter]

Whoops, no premiere today folks but still a helpful video! Let me know if it helps 🙌🏻

[svenvanreenen]

Great video Alex! Mine was really using an old JS switch case to render components dynamically but will definitely see how this can improve the case.

[tolgabeyazoglu]

Like your previous video on how to use the lazy component, this is a very useful video thank you

[lbmgary]

Love this video. For our CMS we allow the editor to select the components that will be present on any given page. To handle that we use vite to inject at build time all of these special components that our customer has access to use. Pretty simple. I really wish we could use a variable in resolve but it's probably due to knowing what component is needed at build time. idk, maybe there is another more elegant way b/c with enough components it gets a little messy on the output with all those Lazy components waiting to pop off.

[Gornius]

Had no idea that Lazy components existed, but they are so useful!

[swissmexxa]

Problem in Nuxt, if you use a dynamic component and use useFetch (or useAsyncData) in the dynamic loaded component, the useFetch won‘t recognize the payload key in the DOM while hydrating and refetch the data on hydration. This is a big problem when working with storybloks own dynamic component. We had to create a wrapper around useFetch because of this.

[korbinperry]

By chance could you elaborate just a little, you mentioned the "flash avoidance strategy" and I perked up a bit.

Our fairly large site has just migrated to Nuxt and we've experienced some flashing, I suspect mostly actually due to SSR / CSR issues and some changes we need to make, but perhaps this is more common than I know 😅

[iomka]

Why just not to use defineAsyncComponent with await import inside the callback in case if we don't want use global components registration?

[valacshiro]

Amazing and helpful as always, love this videos keep it going :D

Thank you very much for the time a effort to make this. I always leran something new 😊

[shakur_t]

This was a very great and useful video, thank u for sharing it

[Aguycalledmax]

How would you handle dynamic components if they accepted different props?
Is there a way to pass props within resolvecomponent or would you use something like a computed v-bind?

[beia-rldw]

Awesome video， it is very helpful for me!!!

[prishanf]

Awesome video Alex. Thanks for all the good content.

[Wojtasvx]

I think you could simplify {{ isSwitched ? "True" : "False" }} to just {{ isSwitched }}

[TarasShabatin]

I guess the better name would be or isAnotherDynCompShown instead of isSwitched.

Your variables' names must represent what it is storing.

Your methods' names must represent what those methods are doing.

Long live to Uncle Bob and "Clean Code".

[Wojtasvx]

Very good tutorial, I am waiting for more!

[designerjehovah]

Great video. Personally and I'm ashamed to say it but I've never used the <component /> to render dynamic components but rather the if/else statement. I really want to learn these tidbits of knowledge and more

[sandros]

Now I'm curious if it is possible to set components as global when they come from a module/layer

[KuroManX]

Vue dynamic components + Strapi dynamic zones, best combo for a CMS.

[muratozalp]

Most time i dont have a boolean variable to switch components. For example let us say i have menu and select menu item or tab item. I need to change component according to menu key. In this situation, i will have to put switch case for every menu option because this won't work with dynamic variables such as Am i right?