Vue JS Best Practices

April 19, 2019

Naming Conventions
Always Use Multi-Word
Use PascalCase or kebab-case for single file components
Use prefix for Base Component names  (e.g.: BaseTable or AppTable
Use The for Single Instance Component names  (e.g.: TheHeader or TheSidebar)
Use parent component name as prefix for tightly coupled child components

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


Props should always use camelCase during declaration, but kebab-case in templates and JSX
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>

Best Practices.
Component data must be a function
// Bad
export default {
  data: {
    foo: 'bar'  
  }
}

//Good
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

Prop definitions should be as detailed as possible.
// This is only OK when prototyping
props: ['status']

//Good
props: {
  status: String
}


Always use key with v-for
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    
  </li>
</ul>


Never use v-if on the same element as v-for.
// Bad
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    
  </li>
</ul>
// Good
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    
  ></li>
</ul>

Directive shorthands  (: for v-bind: and @ for v-on:)  should be used always or never.
// Bad
<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

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

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