Building a Reusable Tabs Component with Vue Slots
HTML-код
- Опубликовано: 21 окт 2024
- In this Vue 3 tutorial, we’ll be using slots to build a custom tab component that allows any sort of content to be turned into a single page tab system.
LINKS
Companion Article - learnvue.co/20...
Vite Tutorial - www.youtube.co....
FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
learnvue.co/vu...
follow me on twitter:
/ mattmaribojoc
🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co...
Best of best😍😍. I really appreciate this video. Very natural style of explanation, anyone can understand👼🏿.
Thank you so much - those words really mean a lot :)
i thinks so !!it's great work!
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?
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.
this playlist is gold
Would be cool to have an updated version (maybe even only of the article), considering how different the syntax is now with
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);
@@petrnadvornik9767 thank you so much for this!
great tutorial - I didn't know about setup() or provide/inject and now I know
best Video, was struggling to do this since a Week. Thanks alot
Really really helpful and straight forward
Good job, you've got a new subscriber!
awesome! thank you
Cheers mate, cool tutorial!
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?
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
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!
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
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.
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.
Yeah - this is up to date. If you shoot over a codepen, I can try to help debug!
Same here. Exactly 3:56
Nothing returns from tabTitles
I'm using Vue 3
@@ahmed-mansoor What is a fix for "Nothing returns from tabTitles"?
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?
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!
Great work really good explanation Thanks
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
Thankyou for the good video!
can you tell us the correct way how to deal with a lazy loading image component?
Awsome Video and very well explained
Why is this code so much more different than the Companion Article and Github repo?
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?
hey! i would try creating reactive array of components, then showing that as your tabs. that might do the trick!
@@LearnVue It worked, thanks!
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
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
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
you can defined multiple slots! learnvue.co/tutorials/vue-slots-guide#named-slots
Mate, there is an issue when i want to v-for Tabs component
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
I have succeeded using:
const slots = useSlots()
const tabTitles = ref(slots.default?.().map((item) => item.props?.title))
@@patriik948 thank you!
what if one of the tabs required props? how did you do that?
I tried to loop Tab component using v-for it returns an error -> Uncaught (in promise) TypeError: Cannot read properties of null (reading 'title')
How do I add a pre-selected tab? like content
nice， but what is mean with provide and inject fn？
Thanks a lot!
Can you do DataTable on Nuxt3?
How do i make it vertical
PLEASE READ: For anyone getting slot undefined errors palce your script section above the template section. This fixed all errors for me.
Excelente video, saludos desde México
♥️♥️♥️
👍👍👍👍👍
I didn't understood anything that was explained to me
I am soo glad they removed this.$children. Writing this component in litterally 4 seconds was just boring af.
Thanks
would be nice if you put some inputs as content of a Tab and switch between tabs.. I can't do that without loss input data when switch tabs =(