Subscribe on changes!

Vue components should be divided into Block and Element.

avatar
Feb 7th 2023

What problem does this feature solve?

It is very difficult to find and debug block components when using framework like bootstrap-vue. 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 template section.

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. Future use of Element component on based of type.

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>
avatar
Feb 7th 2023

The following functionality is already available but not clearly defined, With element approach it can be clearly defined and scoped.

  1. If the component is of element="input" type, then v-model should automatically work on component, Without defining emit "input".
  2. If the component is of element="button" type, then @click should automatically work on component, Without defining emit "click".
avatar
Feb 7th 2023

Please use the RFC process for proposals of complex changes such as this: https://github.com/vuejs/rfcs

FWIW: I'm not in convinced.