Dynamic Components in Vue

[@TheAlexLichter]

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

[@codedjango]

sure...it helps...wasn't aware of the global style of importing components....thanks for this video 👍

[@tolgabeyazoglu536]

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

[@TheAlexLichter]

Happy I could be of help ☺️

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

[@TheAlexLichter]

Thank you Sven 🙏🏻 Glad I could help improving your project ☺️

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

[@Wojtasvx]

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

[@TheAlexLichter]

Yes indeed! I am mainly used to output strings because of variables being undefined and then nothing is logged. But if it definitely is a Boolean yes 👌🏻

[@DontFollowZim]

Unless of course you want it capitalized

[@Gornius]

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

[@TheAlexLichter]

Right? Perf-wise really helpful ☺️

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

[@TheAlexLichter]

This sounds like a bug to me (remembered sth around that) - is there an open issue for it? If not, please raise one!

[@aureutraccoredge6227]

Could you elaborate on the wrapper you built? I am having a very similar problem and have been struggling to find an answer (also, Alex, thank you for the videos! learning so much)

[@TarasShabatin]

I guess the better name would be isAnotherDynamicComponentShown 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".

[@TheAlexLichter]

In a real world codebase 100% 👌🏻 In this example I wanted to keep it short 😁

[@korbinperry6906]

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 😅

[@TheAlexLichter]

Ah, that's just some CSS to make it "automatically dark" and not have a "white -> dark" scenario. In actual apps, I'd probably go for the color mode module!

[@shakur_t]

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

[@TheAlexLichter]

You are welcome 🙌🏻

[@valacshiro378]

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 😊

[@TheAlexLichter]

Really happy the videos help 🙏🏻 Glad I can contribute to the Vue and Nuxt community ☺️

[@prishanf]

Awesome video Alex. Thanks for all the good content.

[@TheAlexLichter]

Thank you 🙏🏻 Happy that my content is helpful ☺️

[@beia-rl2dw]

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

[@TheAlexLichter]

Glad it helped! 🙌

[@designerjehovah4453]

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

[@lovelyboy8056]

This is because you didn’t met in a job cases where this dynamic components really need.

[@TheAlexLichter]

if/else works for simple scenarios but as soon as you have "a couple of" components, sometimes with the same props, `` will come in super handy.

[@Wojtasvx]

Very good tutorial, I am waiting for more!

[@TheAlexLichter]

Thanks a lot 🙏🏻 More is coming! 🔥

[@KuroManX]

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

[@TheAlexLichter]

Would love to see unlimited nesting of dynamic zones though (e.g. like storyblok allows) 🔥

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

[@TheAlexLichter]

I think I'd use a computed, yes 👍🏻

[@EvestDev]

Well, i have some code to update XD. Thx a bunch for the video ❤️

[@TheAlexLichter]

No problem at all! 😊

[@lbmgary]

lol, like every time I watch something from this jerk... :)

[@sandros94]

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

[@TheAlexLichter]

Yes, when you are in control of the module you can do so. Otherwise, you can also use a Nuxt hook to adapt that but it is a bit more manual work.

[@caiovinicius2718]

ammmmmmmmmmmmmmmazing

[@TheAlexLichter]

Happy it helped! 🙏

[@VladyslavOstapko]

Thanks!

[@TheAlexLichter]

No problem! ☺️

[@adiprimanto8871]

anybody know how to make webpage builder? is there any library recommendations ?

[@muratozalp3763]

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 resolveComponent(menuItemKey). Am i right?

[@TheAlexLichter]

Yes, a switch/case or (IMO better) a map with dynamic imports mapped to names of the components so you still have the lazy-loading benefits (in plain Vue)

[@macawls]

@@TheAlexLichter Is this a good approach? I did this very recently for a project import * as Tabs from "../components/user-profile/tabs"; import { Heart, Users, Settings, SlidersHorizontal, DollarSign, } from "lucide-vue-next"; export const useProfileRoutes = () => { const router = useRouter(); return { tabs: { favourites: { name: "favourites", content: Tabs.Favorites, icon: Heart, }, friends: { name: "friends", content: Tabs.Friends, icon: Users, }, settings: { name: "settings", content: Tabs.Settings, icon: Settings, }, preferences: { name: "preferences", content: Tabs.Preferences, icon: SlidersHorizontal, }, donate: { name: "donate", content: Tabs.Donate, icon: DollarSign, }, }, navigateToTab: (tabName: string) => { router.push({ path: "/profile", query: { tab: tabName } }); }, }; };

[@РодионГаврилов-ч9ж]

haha)) its broken O.O

[@ubaydillah1535]

i fans antfu

[@TheAlexLichter]

We all admire him 🔥