Vue.js 3.0 Tutorial

Vue.js 3.0 Component Advanced

Vue.js 3.0 Transitions & Animations

Vue.js 3.0 Reusable & Combinable

Vue.js 3.0 Advanced

Vue.js 3.0 Tools

Vue.js 3.0 Scale

Vue.js 3.0 Accessibility

Vue.js 3.0 Migrating from Vue2

Vue.js 3.0 Contribute Documentation

Vue.js 3.0 API References

Vue.js 3.0 Style Guide

Vue 3.0 Style Guide

Vue 3.0 Documentation Style Guide

Vue.js is a popular front-end framework and, like all good libraries and frameworks, it has its own style guide. As of my knowledge cutoff in September 2021, the official Vue.js style guide can be found at this link: https://vuejs.org/v2/style-guide/

The style guide includes practices that the Vue team and the community have agreed upon to write clean, readable, and scalable Vue.js code. They are divided into several categories:

Essential - These rules help prevent errors and should be followed strictly.
Strongly Recommended - These conventions have been found to improve readability and/or developer experience in most projects.
Recommended - These conventions can be pointed to as the default choice, but there are occasional exceptions when other choices may also be appropriate.
Use with Caution - When some Vue features can be potentially problematic, they fall under this category.

Here are a few examples of rules from the style guide:

Component names in multi-word (Essential)

When registering components, it should be in multi-word. This prevents conflict with existing and future HTML elements, since all HTML elements are a single word.

// Bad
Vue.component('todo', {...})

// Good
Vue.component('todo-item', {...})

Component data as a function (Essential)

When using the data property on a component (not Vue.createApp), it should always be a function. This prevents the data object being shared across instances, leading to unintended side effects.

// Bad
Vue.createApp({
  data: {
    count: 0
  }
})

// Good
Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

Prop definitions (Strongly Recommended)

Prop definitions should be as detailed as possible. This provides documentation, validation, and default values.

// Bad
props: ['status']

// Good
props: {
  status: {
    type: String,
    required: true,
    validator: function(value) {
      return ['syncing', 'synced', 'version-conflict', 'error'].includes(value)
    }
  }
}

v-for with v-if (Use with Caution)

When using v-for with a v-if, it's recommended to replace them with a computed property. It's usually better and more performant to use computed properties instead of an in-template v-if with a v-for.

// Bad
<ul>
  <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo }}
  </li>
</ul>

// Good
computed: {
  incompleteTodos() {
    return this.todos.filter(todo => !todo.isComplete)
  }
}

<ul>
  <li v-for="todo in incompleteTodos">
    {{ todo }}
  </li>
</ul>

These are just a few of the rules from the style guide. The style guide covers a wide range of topics and is an essential resource when developing with Vue.js. Make sure to consult it regularly when writing Vue.js code.