Vue components should be divided into Block and Element.

[yogeshgalav]

What problem does this feature solve?

It is very difficult to find and debug block components when using framework like bootstrap-vue.
Also, some developers couldn't figure out basic strategy for separating webpage into components.
To solve this problem Vue components can follow standard BEM (Block, Element and Modifier) approach.
While Modifiers are already denoted by props,
Block and Element needs clear mention or declaration in Vue.

It will provide following benefits:

1. Ease of finding and debugging block components inside DevTools.
2. Clarification on separation of webpage into components.
3. Use of BEM approach.
4. Use of Element component as functional components will provide more advantage.

What does the proposed API look like?

The Vue component template should always accompanied by attribute "block" or "element".
If a Vue component has template section without any declaration,
Then it would be considered as block type by default.

Block type component

<template>...</template>

<template block>...</template>

<template block="navbar">...</template>

Element type component

<template element>...</template>

<template element="button">...</template>

[darrylnoakes]

What will this actually achieve? What will Vue do differently for the two different types?

[darrylnoakes]

But what are the actual differences that distinguish them? They are both Vue components; just as using a BEM-style class on an HTML element does not change anything about the element itself, what difference will this make to the actual components?

[yogeshgalav]

It remains same as normal and functional component but coupling it with HTML concept gives better understanding and DX.

1. Block components are section of webpage, while Element components are reusable small part which cannot be used without block.
2. Element component should not be containing any nested Block or Element component (but can be used in slot).
3. Element component should only be re-rendered on prop change.
4. Element component should not contain v-if, v-for or computed property (logic part).
   Need to discuss about 4th point, not sure.

[ahku]

Fortunately, you can achieve these rules/principles in your projects already, so there will not be a need for any further development from the busy Vue team.

[yogeshgalav]

It would be helpful to beginners to understand component distribution and write simple, fast, standard code.
And this is what define great frameworks like Laravel, ROR.

[yogeshgalav]

@ahku
I could not hydrate/load elements before blocks without using Astro,
Cannot decrease First contentful paint without using SSR.
If it is technically feasible then please schedule it for next year or next version.

[yogeshgalav]

@ahku
This feature can already be implemented manually,
But if implemented natively or declared in doc then it would give following advantage:

1. Coupling of HTML view with Components.
2. Standarization of Code.
3. Easy debugging in Vue DevTools.
4. Ease and Standarization of Component distribution.

My personal belief is that a simple naming convention or Standarization could take the technology to new heights,
Specially if that technology is used in only one domain.

[yogeshgalav]

At least this naming convention should be used in docs to suggest,
Creation of Element components as a functional component or in vapor mode.