Building a Reusable Tabs Component with Vue Slots

Рет қаралды 33,660

Күн бұрын

Пікірлер: 58

@ennioVisco 2 жыл бұрын

Would be cool to have an updated version (maybe even only of the article), considering how different the syntax is now with

@petrnadvornik9767 2 жыл бұрын

for example: import { ref, provide, useSlots } from "vue"; const tabTitles = ref(); tabTitles.value = useSlots() ?.default?.() .map((tab) => tab?.props?.title); const selectedTitle = ref(tabTitles.value[0]); provide("selectedTitle", selectedTitle);

@martakaczmarek5412 Жыл бұрын

@@petrnadvornik9767 thank you so much for this!

@yudilokhande8915 3 жыл бұрын

Great video! Could you also tell us how one can take a deep dive into the workings of Vue? and understand what all the different terms mean and how they can be utilised?

@LearnVue 3 жыл бұрын

Personally, I think that for deep dives the best option is genuinely to read through the Vue documentation. I think it's one of the best documentations out there.

@mohtasimhasan1928 3 жыл бұрын

Best of best😍😍. I really appreciate this video. Very natural style of explanation, anyone can understand👼🏿.

@LearnVue 3 жыл бұрын

Thank you so much - those words really mean a lot :)

@aomo5 9 ай бұрын

i thinks so !!it's great work!

@geld5220 3 жыл бұрын

is this up todate? Im really stuck on 3:56 where you rendered the tabs in a row. This is giving me error. Im using vue 3 latest vue cli.

@LearnVue 3 жыл бұрын

Yeah - this is up to date. If you shoot over a codepen, I can try to help debug!

@ahmed-mansoor 3 жыл бұрын

Same here. Exactly 3:56 Nothing returns from tabTitles I'm using Vue 3

@agnemedia624 3 жыл бұрын

@@ahmed-mansoor What is a fix for "Nothing returns from tabTitles"?

@user-uk9er5vw4c Жыл бұрын

this playlist is gold

@teeed7927 Жыл бұрын

great tutorial - I didn't know about setup() or provide/inject and now I know

@gopal7745 10 ай бұрын

How can we add navigation buttons in card to go to next and previous tab. Please provide a idea or sudo code. Thanks in advance

@brunomiguelgroth 11 ай бұрын

I am learnimg dynamic components and this video was really helpful. One of my doubts was how to pass props to the dynamic component since @prop=" " could not be available when using different components, and you solve it using Provide/Inject. But one doubt still remains: is there another way to listen to events without using @emit in , since isnt all the components that will be dynamically shown that emits those events?

@petobari6422 Жыл бұрын

best Video, was struggling to do this since a Week. Thanks alot

@Shynghys98 2 жыл бұрын

Hello, how can we add reactivity to tabswrapper and card? if i pass like this :title="item", it shows in vuedevtools, but in slots.default().map((tab) => tab.props?.title) shows symbol fragment and no props. I am passing props like this

@Snoweuph 2 жыл бұрын

Is there an updated Version? I need to convert slots first to another type so that I can remove the possibility of it being undefined, though I already use an if-guard

@iimFTx 3 жыл бұрын

Really nice. I was trying to add a transition between the tab contents but that unfortunately I couldnt get working. Any idea how to transition between the tab contents?

@LearnVue 3 жыл бұрын

Hey! You should be able to wrap your dynamic component with a transition element. v3.vuejs.org/guide/transitions-enterleave.html#enter-leave-transitions Let me know if this helps!

@dmitriykret8938 2 жыл бұрын

how did you find out that the slot has a default() method, where can i find out other methods, for example get the slot by name? It's like a black box

@darwinllacuna5328 2 жыл бұрын

what if one of the tabs required props? how did you do that?

@JaimitoAleman 2 жыл бұрын

Why is this code so much more different than the Companion Article and Github repo?

@jadersbr 3 жыл бұрын

Good job, you've got a new subscriber!

@LearnVue 3 жыл бұрын

awesome! thank you

@dustincintron1682 Жыл бұрын

Great video but when following this with it complains about invoking slot "default" outside of the render function. Have not figured out how to resolve that

@patriik948 Жыл бұрын

I have succeeded using: const slots = useSlots() const tabTitles = ref(slots.default?.().map((item) => item.props?.title))

@dustincintron1682 Жыл бұрын

@@patriik948 thank you!

@wooblay Жыл бұрын

Really really helpful and straight forward

@gabrielceniza 2 жыл бұрын

How do I add a pre-selected tab? like content

@j.m.1219 2 жыл бұрын

Great video! I was trying to add buttons that would add/delete tabs, but don't quite understand how to make them work. Any tips?

@LearnVue 2 жыл бұрын

hey! i would try creating reactive array of components, then showing that as your tabs. that might do the trick!

@j.m.1219 2 жыл бұрын

@@LearnVue It worked, thanks!

@_emnljrz 2 жыл бұрын

Can you do DataTable on Nuxt3?

@mateuszmalanowski3819 7 ай бұрын

Mate, there is an issue when i want to v-for Tabs component

@youlv8254 3 жыл бұрын

nice， but what is mean with provide and inject fn？

@mateuszmalanowski3819 8 ай бұрын

Cheers mate, cool tutorial!

@onyedikachierugo4120 3 жыл бұрын

How do i make it vertical

@shmert 3 жыл бұрын

Nice! Good example of provide. Question: accessibility for tab components? Might be nice to include a bit more accessibility. Also FYI, the link to the cheatsheet is broken

@LearnVue 3 жыл бұрын

Yeah - accessibility is something I would like to cover in future videos thanks for point it out. Also, just updated the links for the cheatsheet!

@coderoom805 2 жыл бұрын

Great video. I have a question, how can we make pass a slot component for the tab title. From Hello from Tab 1 To Tab 1 Hello from Tab 1

@LearnVue 2 жыл бұрын

you can defined multiple slots! learnvue.co/tutorials/vue-slots-guide#named-slots

@ZynthProductions 3 жыл бұрын

Thankyou for the good video! can you tell us the correct way how to deal with a lazy loading image component?

@nathnolt 8 ай бұрын

Please use the element for buttons. Don't turn the element into a button. As this makes it not accessible, combined with making it non keyboard navigable.