vue_style_guide.md

Vue Style Guide

The most important part of the style guide

Component/instance options order

1. Side Effects (triggers effects outside the component)

• el

2. Global Awareness (requires knowledge beyond the component)

• name, parent

3. Component Type (changes the type of the component)

• functional

4. Template Modifiers (changes the way templates are compiled)

• delimiters, comments

5. Template Dependencies (assets used in the template)

• components, directives, filters

6. Composition (merges properties into the options)

• extends, mixins

7. Interface (the interface to the component)

• inheritAttrs, model, props/propsData

8. Local State (local reactive properties)

• data, computed

9. Events (callbacks triggered by reactive events)

• watch
• beforeCreate, created, beforeMount, mounted
• beforeUpdate, updated, activated
• deactivated, beforeDestroy, destroyed

10. Non-Reactive Properties (instance properties independent of the reactivity system)

• methods

11. Rendering (the declarative description of the component output)

• template/render, renderError

Element attribute order

1. Definition (provides the component options)

• is

2. List Rendering (creates multiple variations of the same element)

• v-for

3. Conditionals (whether the element is rendered/shown)

• v-if/v-else-if/v-else, v-show, v-cloak

4. Render Modifiers (changes the way the element renders)

• v-pre, v-once

5. Global Awareness (requires knowledge beyond the component)

• id

6. Unique Attributes (attributes that require unique values)

• ref, key

7. Two-Way Binding (combining binding and events)

• v-model

8. Other Attributes

• all unspecified bound & unbound attributes

9. Events (component event listeners)

• v-on

10. Content (overrides the content of the element)

• v-html, v-text