When to use components?

I'm new to component-based design with Vue and was hoping someone could share their experience regarding breaking up websites into components. Specifically, how do you determine when to use a component vs. plain HTML/Blade?

My thinking is to stick with HTML/blade views for page layout and basic elements (section, article, header, footer, main) and use Vue components for reusable/custom elements that require behavior (navigation, tabs, search forms, sliders, pagination, etc.). Essentially, most things listed as components in the Bootstrap docs would become Vue components.

If anyone could share some tips or best practices from their own experience, that would be great. I don't want to over-complicate things--if not needed.

Thanks.

Olixr

9 years ago

Best Answer

Level 11

@neovive I think you are on the right path. (just my opinion of course) but that is similar to what I was doing.

I was using Bulma for a grid css (very similar to Bootstrap) just without the JS included. I started turning the components in there into their own Vue components. (i.e. modals, tabs, etc).

I found it easier for my projects to try and separate out the components into useful modules as their own that I could re-use as needed. Of course you will run into areas where you build more customized components to one area.

I even have a few instances where there are child components that make great help. (i.e. tabs component that has child tab components to handle their own specific behaviour.

However I know this is from my project that I do this. If your working on something like a SPA (single page application) you may find much more components that are closely coupled. You would also probably put more templating into the components themselves as well.

I generally keep my layouts and barebones in laravel blade files and just pull in my Vue components as needed for functionality. (i.e. a modal on this page with navigation)

Just as a rule of thumb if I find myself repeating certain elements across a page (say for example an alert/notice) I typically try to throw it into a Vue component with its functionality so that its easier to just plop into place around my project.

As always some of it comes down to personal preference and how you see fit to organize your code base. It will sort of fall into place as you get started and notice areas where you find yourself repeating sections with the same functionality where it would be much easier to drop a component in.

This is just my opinion and 2 cents. I am sure others have valuable input as well. So far this is what I have found useful as I was learning / practicing with Vue in laravel.