Reglas de Prioridad B: Altamente Recomendadas ​

Se ha descubierto que estas reglas mejoran la legibilidad y/o la experiencia del desarrollador en la mayoría de los proyectos. Tu código seguirá funcionando si las incumples, pero las infracciones deben ser raras y bien justificadas.

Archivos de componente ​

Siempre que un sistema de compilación esté disponible para concatenar archivos, cada componente debe estar en su propio archivo.

Esto te ayuda a encontrar más rápidamente un componente cuando necesitas editarlo o revisar cómo usarlo.

app.component('TodoList', {
  // ...
})

app.component('TodoItem', {
  // ...
})

components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

Nomenclatura de archivos de componente de un solo archivo (Single-File Component) ​

Los nombres de archivo de los Single-File Components deben ser siempre PascalCase o siempre kebab-case.

PascalCase funciona mejor con la función de autocompletado en los editores de código, ya que es consistente con la forma en que referenciamos los componentes en JS(X) y los templates, siempre que sea posible. Sin embargo, los nombres de archivo con mayúsculas y minúsculas mezcladas a veces pueden generar problemas en sistemas de archivos que no distinguen entre mayúsculas y minúsculas, por lo que kebab-case también es perfectamente aceptable.

components/
|- mycomponent.vue

components/
|- myComponent.vue

components/
|- MyComponent.vue

components/
|- my-component.vue

Nombres de componentes base ​

Los componentes base (también conocidos como componentes presentacionales, tontos o puros) que aplican un estilo y convenciones específicas de la aplicación, deben comenzar todos con un prefijo específico, como Base, App o V.

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

Nombres de componentes fuertemente acoplados ​

Los componentes hijos que están fuertemente acoplados con su padre deben incluir el nombre del componente padre como prefijo.

Si un componente solo tiene sentido en el contexto de un único componente padre, esa relación debe ser evidente en su nombre. Dado que los editores suelen organizar los archivos alfabéticamente, esto también mantiene estos archivos relacionados juntos.

components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue

components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

Orden de las palabras en los nombres de los componentes ​

Los nombres de los componentes deben comenzar con las palabras de nivel más alto (a menudo las más generales) y terminar con palabras modificadoras descriptivas.

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

Componentes de autocierre ​

Los componentes sin contenido deben autocerrarse en Single-File Components, templates de cadena y JSX, pero nunca en templates in-DOM.

Los componentes que se autocierran comunican que no solo no tienen contenido, sino que están destinados a no tener contenido. Es la diferencia entre una página en blanco en un libro y una etiquetada como "Esta página se dejó en blanco intencionalmente". Tu código también es más limpio sin la etiqueta de cierre innecesaria.

Desafortunadamente, HTML no permite que los elementos personalizados se autocierren, solo los elementos "void" oficiales. Por eso, la estrategia solo es posible cuando el compilador de templates de Vue puede acceder a el template antes del DOM, para luego servir el HTML que cumple con las especificaciones del DOM.

<!-- En Single-File Components, templates de cadena y JSX -->
<MyComponent></MyComponent>

<!-- En templates in-DOM -->
<my-component/>

<!-- En Single-File Components, templates de cadena y JSX -->
<MyComponent/>

<!-- En templates in-DOM -->
<my-component></my-component>

Uso de mayúsculas/minúsculas en nombres de componentes en templates ​

En la mayoría de los proyectos, los nombres de los componentes siempre deben estar en PascalCase en Single-File Components y templates de cadena, pero en kebab-case en templates in-DOM.

PascalCase tiene algunas ventajas sobre kebab-case:

• Los editores pueden autocompletar los nombres de los componentes en los templates, porque PascalCase también se usa en JavaScript.
• <MyComponent> es visualmente más distinto de un elemento HTML de una sola palabra que <my-component>, porque hay dos diferencias de caracteres (las dos mayúsculas), en lugar de solo una (un guion).
• Si utilizas algún elemento personalizado no Vue en tus templates, como un web component, PascalCase asegura que tus componentes Vue permanezcan claramente visibles.

Desafortunadamente, debido a la insensibilidad a mayúsculas y minúsculas de HTML, los templates in-DOM aún deben usar kebab-case.

También ten en cuenta que si ya has invertido mucho en kebab-case, la consistencia con las convenciones de HTML y la posibilidad de usar el mismo formato en todos tus proyectos puede ser más importante que las ventajas mencionadas anteriormente. En esos casos, usar kebab-case en todas partes también es aceptable.

<!-- En Single-File Components y templates de cadena -->
<mycomponent/>

<!-- En Single-File Components y templates de cadena -->
<myComponent/>

<!-- En templates in-DOM -->
<MyComponent></MyComponent>

<!-- En Single-File Components y templates de cadena -->
<MyComponent/>

<!-- En templates in-DOM -->
<my-component></my-component>

<!-- En todas partes -->
<my-component></my-component>

Uso de mayúsculas/minúsculas en nombres de componentes en JS/JSX ​

Los nombres de los componentes en JS/JSX siempre deben estar en PascalCase, aunque pueden estar en kebab-case dentro de cadenas para aplicaciones más simples que solo utilizan el registro global de componentes a través de app.component.

app.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent'
  // ...
}

export default {
  name: 'my-component'
  // ...
}

app.component('MyComponent', {
  // ...
})

app.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent'
  // ...
}

Nombres de componentes con palabras completas ​

Los nombres de los componentes deben preferir palabras completas en lugar de abreviaturas.

El autocompletado en los editores hace que el costo de escribir nombres más largos sea muy bajo, mientras que la claridad que proporcionan es invaluable. Las abreviaturas poco comunes, en particular, siempre deben evitarse.

components/
|- SdSettings.vue
|- UProfOpts.vue

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Uso de mayúsculas/minúsculas en los nombres de las props ​

Los nombres de las props siempre deben usar camelCase durante la declaración. Cuando se usan dentro de templates in-DOM, las props deben ser kebab-cased. Los templates de Single-File Components y JSX pueden usar props en kebab-case o camelCase. El uso de mayúsculas/minúsculas debe ser consistente: si eliges usar props en camelCase, asegúrate de no usar props en kebab-case en tu aplicación.

props: {
  'greeting-text': String
}

const props = defineProps({
  'greeting-text': String
})

// para templates in-DOM
<welcome-message greetingText="hi"></welcome-message>

props: {
  greetingText: String
}

const props = defineProps({
  greetingText: String
})

// para SFC - por favor, asegúrate de que tu estilo de mayúsculas/minúsculas sea consistente en todo el proyecto
// puedes usar cualquiera de las convenciones, pero no recomendamos mezclar dos estilos diferentes
<WelcomeMessage greeting-text="hi"/>
// o
<WelcomeMessage greetingText="hi"/>

// para templates in-DOM
<welcome-message greeting-text="hi"></welcome-message>

Elementos con múltiples atributos ​

Los elementos con múltiples atributos deben ocupar varias líneas, con un atributo por línea.

En JavaScript, dividir objetos con múltiples propiedades en varias líneas se considera ampliamente una buena convención, porque es mucho más fácil de leer. Nuestras templates y JSX merecen la misma consideración.

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

Expresiones simples en templates ​

Los templates de los componentes solo deben incluir expresiones simples, con expresiones más complejas refactorizadas en propiedades computed o methods.

Las expresiones complejas en tus templates las hacen menos declarativas. Debemos esforzarnos por describir qué debe aparecer, no cómo estamos calculando ese valor. Las propiedades computed y los methods también permiten reutilizar el código.

{{
  fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

<!-- En un template -->
{{ normalizedFullName }}

// La expresión compleja se ha movido a una propiedad computed
computed: {
  normalizedFullName() {
    return this.fullName.split(' ')
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(' ')
  }
}

// La expresión compleja se ha movido a una propiedad computed
const normalizedFullName = computed(() =>
  fullName.value
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(' ')
)

Propiedades computed simples ​

Las propiedades computed complejas deben dividirse en tantas propiedades más simples como sea posible.

computed: {
  price() {
    const basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

const price = computed(() => {
  const basePrice = manufactureCost.value / (1 - profitMargin.value)
  return basePrice - basePrice * (discountPercent.value || 0)
})

computed: {
  basePrice() {
    return this.manufactureCost / (1 - this.profitMargin)
  },

  discount() {
    return this.basePrice * (this.discountPercent || 0)
  },

  finalPrice() {
    return this.basePrice - this.discount
  }
}

const basePrice = computed(
  () => manufactureCost.value / (1 - profitMargin.value)
)

const discount = computed(
  () => basePrice.value * (discountPercent.value || 0)
)

const finalPrice = computed(() => basePrice.value - discount.value)

Valores de atributos entre comillas ​

Los valores de atributos HTML no vacíos siempre deben estar entre comillas (simples o dobles, la que no se use en JS).

Aunque los valores de atributos sin espacios no requieren comillas en HTML, esta práctica a menudo lleva a evitar los espacios, haciendo que los valores de los atributos sean menos legibles.

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>

<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

Atajos de directivas ​

Los atajos de directivas (: para v-bind:, @ para v-on: y # para v-slot) deben usarse siempre o nunca.

<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-on:input="onInput"
  @focus="onFocus"
>

<template v-slot:header>
  <h1>Aquí podría haber un título de página</h1>
</template>

<template #footer>
  <p>Aquí hay información de contacto</p>
</template>

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Aquí podría haber un título de página</h1>
</template>

<template v-slot:footer>
  <p>Aquí hay información de contacto</p>
</template>

<template #header>
  <h1>Aquí podría haber un título de página</h1>
</template>

<template #footer>
  <p>Aquí hay información de contacto</p>
</template>