Dynamic Components in Vue
Vložit
- čas přidán 27. 07. 2024
- 🃏 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:
🔗 Vue Docs vuejs.org/guide/essentials/co...
🔗 unplugin-auto-import - github.com/unplugin/unplugin-...
🔗 resolveComponent - vuejs.org/api/render-function...
🔗 Async Components - vuejs.org/guide/components/async
🔗 Global components in Nuxt - github.com/nuxt/nuxt/blob/fdb...
📺 Lazy Prefix in Nuxt - • The Lazy component pre...
📺 @DejaVueFm
Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up!
🌐 Connect further:
Website: www.lichter.io
Twitter/X: / thealexlichter
Twitch: / thealexlichter
---
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 - Věda a technologie
Whoops, no premiere today folks but still a helpful video! Let me know if it helps 🙌🏻
sure...it helps...wasn't aware of the global style of importing components....thanks for this video 👍
Like your previous video on how to use the lazy component, this is a very useful video thank you
Happy I could be of help ☺️
Awesome video Alex. Thanks for all the good content.
Thank you 🙏🏻
Happy that my content is helpful ☺️
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.
Very good tutorial, I am waiting for more!
Thanks a lot 🙏🏻
More is coming! 🔥
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 😊
Really happy the videos help 🙏🏻
Glad I can contribute to the Vue and Nuxt community ☺️
Had no idea that Lazy components existed, but they are so useful!
Right? Perf-wise really helpful ☺️
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.
Thank you Sven 🙏🏻
Glad I could help improving your project ☺️
This was a very great and useful video, thank u for sharing it
You are welcome 🙌🏻
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.
This sounds like a bug to me (remembered sth around that) - is there an open issue for it? If not, please raise one!
Awesome video， it is very helpful for me!!!
Glad it helped! 🙌
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 😅
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!
Thanks!
No problem! ☺️
Well, i have some code to update XD. Thx a bunch for the video ❤️
No problem at all! 😊
lol, like every time I watch something from this jerk... :)
anybody know how to make webpage builder? is there any library recommendations ?
ammmmmmmmmmmmmmmazing
Happy it helped! 🙏
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
This is because you didn’t met in a job cases where this dynamic components really need.
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.
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?
I think I'd use a computed, yes 👍🏻
Now I'm curious if it is possible to set components as global when they come from a module/layer
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.
Vue dynamic components + Strapi dynamic zones, best combo for a CMS.
Would love to see unlimited nesting of dynamic zones though (e.g. like storyblok allows) 🔥
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?
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)
@@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 } });
},
};
};
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".
In a real world codebase 100% 👌🏻
In this example I wanted to keep it short 😁
haha)) its broken O.O
I think you could simplify {{ isSwitched ? "True" : "False" }} to just {{ isSwitched }}
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 👌🏻
Unless of course you want it capitalized
i fans antfu
We all admire him 🔥