What's the ideal size of a Vue component?

user_14710765 0
Viewed 576

I find the concept of atoms and molecules very interesting, but I can't imagin ending up with thousands of atom components, scattered all over the place. Another way of putting the question would be: when is a Vue component getting too big ? Thank you for your input.

vue-component vue.js
1 Answers

Well it depends of a lot things, but if you see the code you're writing will be re-use more than twice i guess, it's a good idea to make as a component.

Additionnally you could think of the fact of clarity, if you're having a lot of html in your component, for readability purpose you could split this component in few pieces.

For example this component i've made, it's a Job offer,

  • in the blue rectangle we have the acronym of the company hiring
  • in the dark gray rectangle, the percentage of the the job,
  • a button to toggle the "card" and show the full job content,
  • a title of the offer and the deadline for the postulation.

When it's closed enter image description here

Then when it's toggled enter image description here

It was kind of a lot of html in the code so beside aving a Job offer component with everything in it, i've splitted it for readibility,

In total there is 5 component inside JobOffers

  • A button that i re-use everywhere in my website
  • The JobAcronym (blue rectangle)
  • The JobMeta (title + deadline + button), the middle of it
  • The JobPercentage (dark gray rectangle)
  • The JobContent, (arichtext component),visible when its toggled

Doing so, it could easily be more readable in my code, people knew which part was represented by what just reading the code.

For sure it creates more atoms and molecules, but if you create a directory named JobOffer and you put all your components required intside (appart from the button that is kind of global), it doesn't make your application difficult to read.

Even some component doesn't have a logic behind, like the JobAcronym and JobPercentage, they do contains a lot of html that could make your JobOffer component hard to read if they were inside of it.

To conclude, you really need to choose with your guts, if you see you're having trouble finding where to apply your edit to change some ui, beceause there is a lot of html code, then split it.Even if you won't re-use that component anywhere else.

What's important is the readability of your code, and it's really more easier to maintain.

So when you, or someone else come back in few months to do some updates on it, they won't loose time trying to guess which part belongs where.

I hope it answered your question and cleared some doubts you had :)

user_120316480
Related