How to properly split a project into components?

Question

Vue.js

Hi all.
There is a project, promo site, beauty, page transition, etc. The site consists of the following elements:
1) preloader
2) preroll video
3) header
- logo
- burger
- page title
- pop-up menu
4) footer
- mute the site
- a button to go to another page
5) index page
- fullpage js
- slick js slider
Can you use this structure as an example to explain how to think correctly when breaking a project into components? Or maybe there are examples of good manuals?

Answer 1

Everything is simple.
* If a piece of code looks like a separate entity - select it as a component
* If a piece of code is used in more than one place - select

Answer 2

In terms of organizing components, I personally like BEM