1. Los nombres de archivos siempre deben ser en lowercase y kebab case.

# MAL
appTable.vue
StaticMap.vue

# BIEN
app-table.vue
static-map.vue

2. Los nombres de los componentes deben ser igual al nombre del archivo (ver regla #1)

// MAL
export default {
  name: 'AppTable',
};

// BIEN
export default {
  name: 'app-table',
};

3. La propiedad name debe estar primera en la definición del componente. SIEMPRE.

// MAL
export default {
  methods,
  watch,
  data
  computed,
  name: 'app-table',
};

// BIEN
export default {
  name: 'app-table',
  data,
  watch,
};

4. Todas las funciones que un componente necesita se deben declarar fuera de la definición del mismo.

// MAL
export default {
  name: 'app-table',
  data() {},
  methods: {
    myMethod() {},
  },
  computed: {
    myComputed() {},
  },
  watch: {
    name: () => {},
  },
};

// BIEN
function data() {}

function myComputed() {}

function myMethod() {}

function name() {}

export default {
  name: 'app-table',
  data,
  methods: {
    myMethod,
  },
  computed: {
    myComputed,
  },
  watch: {
    name,
  },
};

5. Usar la sintaxis corta @ or : sobre v-bind y v-on

<!-- MAL -->
<input v-on:change="onChange" />
<button v-bind:disabled="isDisabled">Submit</button>

<!-- BIEN -->
<input @change="onChange" />
<button :disabled="isDisabled">Submit</button>

6. La sección de style de los componentes siempre debe usar el atributo scoped. La única excepción es el componente base App.

<!-- MAL -->
<template>
  <button class="button">Submit</button>
</template>

<style>
.button {
  border: none;
  border-radius: 2px;
}
</style>

<!-- BIEN -->
<template>
  <button class="button">Submit</button>
</template>

<style scoped>
.button {
  border: none;
  border-radius: 2px;
}
</style>

7. Usar $ como prefijo para variables dentro de la instancia de Vue.

// MAL
import Vue from 'vue';
Vue.userInfo = { id: 1, name: 'Cosme Fulanito' };

// BIEN
import Vue from 'vue';
Vue.$userInfo = { id: 1, name: 'Cosme Fulanito' };

8. Nunca poner logica en los templates, usar methods/computed.

<!-- MAL -->
<template>
  <div v-if="someArray.length > 0">
  </div>
</template>

<!-- BIEN -->
<template>
  <div v-if="hasValues">
  </div>
</template>

<script>
// computed
function hasValues() {
  return this.someArray.length > 0;
}
</script>

9. Siempre usar v-key junto a la directiva v-for

<!-- MAL -->
<ul v-for="item in items">

<!-- BIEN -->
<ul v-for="item in items" :key="item">

10. Evitar el uso de v-if al mismo nivel de v-for

<!-- MAL -->
<ul v-for="user in users" v-if="user.active" :key="user.id">
</ul>

<!-- BIEN -->
<ul v-for="user in filteredUsers" :key="user.id">
</ul>

<script>
function filteredUsers() {
  return this.users.filter(u => u.active);
}

export default {
  name: 'user-list',
  computed: {
    filteredUsers,
  },
};
</script>

11. Usar filtros siempre que se quiera presentar datos en una manera distinta sin afectar al valor original.

<!-- MAL -->
<td>
  {{ amount }}
</td>

<script>

function created() {
  this.amount = this.amount.toFixed(2);
}

export default {
	created,
}
</script>

<!-- BIEN -->
<td>
	{{ amount | round }}
</td>

<script>

function round(value) {
  return value.toFixed(2);
}

export default {
  filters: {
    round,
  },
};
</script>

12. Siempre usar clases de css sobre otro tipo de selectores.

<!-- MAL -->
<template>
	<button>Submit</button>
</template>

<style scoped>
button {
	background-color: peru;
	padding: 20px;
}
</style>

<!-- BIEN -->
<template>
	<button class="btn">Submit</button>
</template>

<style scoped>
.btn {
	background-color: peru;
	padding: 20px;
}
</style>

13. Los componentes deben siempre tener las secciones template, script y style en ese orden.

<!-- MAL -->
<script>
</script>
<style>
</style>
<template>
</template>

<!-- BIEN -->
<template>
</template>

<script>
</script>

<style lang="scss" scoped>
</style>