Vue Best Practices

Owner: Development Last revision: 12.11.2021

General Rules#

When writing Vue code, always adhere to the Vue style guide, unless otherwise specified below.

Directive Shorthands#

Directive shorthands (: for v-bind:, @ for v-on: and # for v-slot) should not be used, as they are less readable.

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

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

Component/instance Options Order#

The Vue style guide specifies a recommended order for component/instance options, but we prefer putting them in alphabetical order, the only exception being el, which might go first.

const app = new Vue({
    el: '#app',
    components: {
        // ...
    },
    created: function () {
        // ...
    },
    data: {
        // ...
    },
    methods: {
        // ...
    },
    mounted: function () {
        // ...
    },
    watch: {
        // ...
    }
});

Element Attribute Order#

The Vue style guide specifies a recommended order for element attributes, but we prefer putting standard HTML attributes first, followed by Vue attributes in alphabetical order.

<my-element class="component__element has-modifier" id="my-first-element"
    v-bind:value="myValue"
    v-if="isMyElementVisible"
    v-on:click="toggleMyElement"
></my-element>

Templates

If a Vue component has so many props (or listeners, directives, …) that they don’t fit on one line anymore you need to put every prop on its own line. Every line needs to be intended with 4 spaces. The closing > goes on a new unintended line followed by the closing tag.

<template>
    <!-- Good -->
    <my-component myProp="value"></my-component>
</template>

<template>
    <!-- Good -->
    <my-component
        v-if="shouldDisplay"
        myProp="value"
        @change="handleEvent"
    ></my-component>
</template>

<template>
    <!-- Bad: wrong indentation, closing `>` is not correct placed -->
    <my-component
            v-if="shouldDisplay"
            myProp="value"
            @change="handleEvent">
    </my-component>
</template>