Тёмный

Dynamic Components in Vue 

Alexander Lichter
Подписаться 8 тыс.
Просмотров 6 тыс.
50% 1

🃏 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

Наука

Опубликовано:

 

6 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 50   
@TheAlexLichter
@TheAlexLichter Месяц назад
Whoops, no premiere today folks but still a helpful video! Let me know if it helps 🙌🏻
@codedjango
@codedjango Месяц назад
sure...it helps...wasn't aware of the global style of importing components....thanks for this video 👍
@tolgabeyazoglu536
@tolgabeyazoglu536 Месяц назад
Like your previous video on how to use the lazy component, this is a very useful video thank you
@TheAlexLichter
@TheAlexLichter Месяц назад
Happy I could be of help ☺️
@prishanf
@prishanf Месяц назад
Awesome video Alex. Thanks for all the good content.
@TheAlexLichter
@TheAlexLichter Месяц назад
Thank you 🙏🏻 Happy that my content is helpful ☺️
@Wojtasvx
@Wojtasvx Месяц назад
Very good tutorial, I am waiting for more!
@TheAlexLichter
@TheAlexLichter Месяц назад
Thanks a lot 🙏🏻 More is coming! 🔥
@lbmgary
@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.
@svenvanreenen
@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
@TheAlexLichter Месяц назад
Thank you Sven 🙏🏻 Glad I could help improving your project ☺️
@Gornius
@Gornius Месяц назад
Had no idea that Lazy components existed, but they are so useful!
@TheAlexLichter
@TheAlexLichter Месяц назад
Right? Perf-wise really helpful ☺️
@valacshiro378
@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
@TheAlexLichter Месяц назад
Really happy the videos help 🙏🏻 Glad I can contribute to the Vue and Nuxt community ☺️
@korbinperry6906
@korbinperry6906 2 дня назад
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 😅
@shakur_t
@shakur_t Месяц назад
This was a very great and useful video, thank u for sharing it
@TheAlexLichter
@TheAlexLichter Месяц назад
You are welcome 🙌🏻
@beia-rl2dw
@beia-rl2dw Месяц назад
Awesome video, it is very helpful for me!!!
@TheAlexLichter
@TheAlexLichter Месяц назад
Glad it helped! 🙌
@swissmexxa
@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
@TheAlexLichter Месяц назад
This sounds like a bug to me (remembered sth around that) - is there an open issue for it? If not, please raise one!
@VladyslavOstapko
@VladyslavOstapko Месяц назад
Thanks!
@TheAlexLichter
@TheAlexLichter Месяц назад
No problem! ☺️
@EvestDev
@EvestDev Месяц назад
Well, i have some code to update XD. Thx a bunch for the video ❤️
@TheAlexLichter
@TheAlexLichter Месяц назад
No problem at all! 😊
@lbmgary
@lbmgary Месяц назад
lol, like every time I watch something from this jerk... :)
@TarasShabatin
@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
@TheAlexLichter Месяц назад
In a real world codebase 100% 👌🏻 In this example I wanted to keep it short 😁
@adiprimanto8871
@adiprimanto8871 Месяц назад
anybody know how to make webpage builder? is there any library recommendations ?
@Aguycalledmax
@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
@TheAlexLichter Месяц назад
I think I'd use a computed, yes 👍🏻
@designerjehovah4453
@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
@lovelyboy8056 Месяц назад
This is because you didn’t met in a job cases where this dynamic components really need.
@TheAlexLichter
@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.
@KuroManX
@KuroManX Месяц назад
Vue dynamic components + Strapi dynamic zones, best combo for a CMS.
@TheAlexLichter
@TheAlexLichter Месяц назад
Would love to see unlimited nesting of dynamic zones though (e.g. like storyblok allows) 🔥
@muratozalp3763
@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
@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
@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 } }); }, }; };
@sandros94
@sandros94 Месяц назад
Now I'm curious if it is possible to set components as global when they come from a module/layer
@TheAlexLichter
@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.
@user-qb7yc3qg3b
@user-qb7yc3qg3b Месяц назад
haha)) its broken O.O
@Wojtasvx
@Wojtasvx Месяц назад
I think you could simplify {{ isSwitched ? "True" : "False" }} to just {{ isSwitched }}
@TheAlexLichter
@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
@DontFollowZim Месяц назад
Unless of course you want it capitalized
@ubaydillah1535
@ubaydillah1535 Месяц назад
i fans antfu
@TheAlexLichter
@TheAlexLichter Месяц назад
We all admire him 🔥
Далее
Strawberry Cat?! 🙀 #cat #cute #catlover
00:42
Просмотров 4,9 млн
Yeni Özbək Mahnisi Yoxsa Vefali Reqsi? 😍
00:36
Просмотров 2,1 млн
NEW Folder Structure in Nuxt 4
16:50
Просмотров 9 тыс.
Avoid losing Reactivity in your Vue Application
10:32
DejaVue #E010 - Design Patterns in Vue.js
29:39
Просмотров 1,2 тыс.
A Better Way To Organize Components In Vue
10:10
Просмотров 17 тыс.
The BEST way to proxy your API in Nuxt
21:12
Просмотров 13 тыс.
How to use Nuxt Layers to encapsulate your code
17:08
Is your function REALLY a Vue composable?
10:53
Просмотров 9 тыс.
Patching Packages - The ULTIMATE Guide
19:38
Просмотров 1,6 тыс.
Сравнили apple и xiaomi!
0:21
Просмотров 27 тыс.
Choose a phone for your mom
0:20
Просмотров 6 млн