A Better Way To Organize Components In Vue

The base component pattern is an amazing way to organizer your components in your app. In this video I'll explore how this component pattern works, and what to look out for! We'll look at refactoring components, updating components, and how to use presentational components. With Vue and React.

👉 Check out my last video on Nuxt UI

👉Sign up for my mailing list and get neat stuff!

👉 Need some help with a project, level up your skills, React, Next, Vue, or Nuxt? Check out my 1-on-1 mentoring!

Links:

0:00 Base component pattern
0:53 Refactor to component
01:54 Icon refactor
02:27 Slot refactor
03:27 Seperator slot refactor
06:22 Base component refactor
07:37 Brief Button abstraction
08:02 Disabled button abstraction
09:00 Why you shouuld use this?

[wwizer]

we have this issue at work. We start with a basic component and it eventually turns into a swiss army knife

[StephenHebert-xx]

This is definitely an improvement from the initial component. I like to have my cake and eat it too by making the normal use case be as simple as possible while allowing full customizability when needed. In my Vue components, this generally takes the form of a prop, with a sensible default value, which is rendered as the default slot content. This way, I can either pass nothing and use the default value, pass a prop to override, or take full advantage of the slot. You can take this further and apply similar patterns to make really robust components with simple, intuitive interfaces. My personal favorite model for great component design is the FormKit library

[DevJonny]

frontend devs are rediscovering inheritance

[Kingside]

Thank you for this video. I like this pattern. However, I would prefer the naming to ButtonBase, ButtonBrief, ButtonDisabled. 1. The IDE would show them next to each other and 2. while programming my first thought is always I need a button and second which button do I need.

[mathiasokafor]

thanks alot for all you do for the vue community

[mahdirashidi]

Hi erik, good point that you mention but i get confuse, when you create a disable button, it is just for breif button not base button and if we have a various of buttons type, we have to create their disabled button??

[pepinogdev]

i prefer use props for disabled states

[freakfreak]

I simply make very dynamic and adjustable components and type everything correctly
So i then just pass as props the icon, the color, the label and separator as boolean. No slots and all that complex stuff needed.
My Icon component for example automatically identifies if it should load an SVG from a folder or if its a bootstrap icon.
This makes sure i have very small number of components in my projects because they are highly customizable

[todpale]

The SRP on the maximal level. But it makes things more complicated. This approach works pretty well with functions or even classes. But components should have consistency and work almost like those in an abstract Vuetify or any other UI library. There might be tons of scenarios for tables or modals, popups, etc.

[shadyarbzharothman]

Thanks, can I know how you're using these svgs?

[youssef-abdulaziz]

Great effort, Erik. I''ve seen lots of open source projects use this pattern, but don't u think it's a bit of an overkill when it comes to buttons? i mean maybe with complex components this is the way to go but with buttons it's not worth it to have 4 or 5 components instead of using one with some props and slots all encapsulated in one component. help me get it clear if u would.

[hyperprotagonist]

Slightly confused why DisabledButton is a component. Perhaps it was a bad example.

[rayan_azzam]

I really like those kinds of abstractions, and i am using them in my daily coding, but when it comes to performance, i have a case where i have to render list of more than 10000 items it comes to an issue when using multiple nested components inside this list.
What do you think about this case

[AlexandrGakhov]

Hi, nice idea. Maybe the example with disabled btn is not suitable.

I usually want the disabled button in dynamic.
If I will do ButtonDisabled I will have to add "if statements" for the disabled case.

[pixelhusten]

I do it by creating a Button Element that is able to display states like disabled, plus various Color Styles. Then there is the basic style such as Border, Rounded Edges. This is stored in a style prop as the default. The font size as well as the spacing within is also stored as a layout prop.
The labeling as well as optional icons are passed on to the button via a slot. Icon left, right or in the middle without wording.
If you are building a large number of buttons that can be grouped visually, we build a superordinate component. There we store the style as a map, literal or JSON and switch the respective variant via prop.

[chiquito.y.panzon]

I like how shadcn solves it, using CVA. A file to define the variants and then a slot. That gives a lot of versatility and keeps things clean. What variants does it allow? Just look at the file.

[Norfeldt]

This a very common issue and I'm still looking for the golden solution for this. In react you can collect all of your logic and keep it separate (like your video suggest) by named exports. I really like that but is that even possible in Vue?

[russpalermo]

ok - so where did you tore the abstracted button variants? In nuxt particularly I am having similar issue with folders and subfolders and increasingly longer....and longer component names.

[epiphanyatnight]

Love this video and would be great to see more!

[lidtatech]

I would argue that is better still to use an object prop and parse the icon, divider, text, color and state to the button component. That way I won't scratch my head finding the exact variance. for every use case.