Vue template section should be divided into Block and element.

[yogeshgalav]

As per standard approach of BEM, when dividing a webpage into Vue components it feels right to think of them as Block and Element.
It gives clear idea of dividing and reusing vue components.
Instead of manually defining in HTML, what if we put whole template section of component inside
with name attribute as component's name.

For e.g.
Post.vue and Navbar.vue can be represented in HTML as

<section name="Post">template code here</section>
<nav name="Navbar">...</nav>

And can be represented as

<template block="section">post.vue</template>
<template block="nav">...</template>

This feature will give 4 main benefits.

1. Better website accessibility.
2. Better separation of Vue components with respect to BEM and UI.
3. Better developer experience as html will now contain component names.
4. Last but not least, it will help finding and debugging block components easier in the sea of element components. For e.g., while using framework like bootstrap-vue it's very difficult to find block components.

Thank you and have a nice day!

[DomeT99]

Thanks for this contribute, I really think that from now on I will use this technique.

[yogeshgalav]

@yyx990803
早上好先生，
你觉得这个功能怎么样？
Hello Sir,
What do you think of this feature?

[LinusBorg]

Please don't tag maintainers. Your post is not entitled to special treatment, and if every post tags maintainers to get attention, we drown in notifications even more than we already do.

[ahku]

Not everything is a section. A navbar should probably use the <nav> tag.

Your proposal seem highly situational and unnecessarily adds more ways to do the same thing. Adding your named section inside the template tag should do the trick.

[yogeshgalav]

But it would facilitate finding and debugging main components very easy in situation like framework (e. g. bootsrap-vue).
Also, if developer is able to see component name in HTML wouldn't it be great developer experience.

[yogeshgalav]

I update my proposal to use any html tag.
Section, Article, Nav etc.

[yogeshgalav]

In my past experience I have seen developers confusing how to divide the complex webpage into components.
Just due to wrong component hierarchy the code becomes havoc.

The situation varies but one thing is permanent,
Webpage Sections.