Vue is an easy front end framework to work with. It lets us create apps easily.
However, there are still many things that we should look out for when we write apps with them.
In this article, we’ll look at some essential rules that we should follow when we’re building our Vue apps.
Require Valid Default Prop
We should have a default prop value for our props to prevent issues that arise if we forgot to pass in a prop.
Also, we should make sure that the default prop type matches the type of the prop specified.
For instance, instead of writing:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
props: {
propA: {
type: String,
default: {}
}
}
};
</script>
We write:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
props: {
propA: {
type: String,
default: "foo"
}
}
};
</script>
A Computed Property Should Return Something
Computed property functions should always return something.
For instance, instead of writing:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
foo(){
if (Math.random() < 0.5){
return 'foo'
}
}
}
};
</script>
We should write:
<template >
<div id="app"></div>
</template>
<script>
export default {
name: "App",
computed: {
foo() {
return "foo";
}
}
};
</script>
Add the exact Modifier on v-on When There are Multiple v-on Directives
If there’s another v-on handler in our component or element, then we should add the exact modifier to the directive so that only the given event is handled.
For instance, instead of writing:
<template >
<div id="app">
<button v-on:click="onClick" v-on:click.ctrl="onClick"></button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
onClick() {
//...
}
}
};
</script>
We write:
<template >
<div id="app">
<button v-on:click.exact="onClick" v-on:click.ctrl="onClick"></button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
onClick() {
//...
}
}
};
</script>
Template Should be the Root of the Component Template
We should make sure that we don’t have extra things in our template element.
For instance, instead of writing:
<template v-if'foo'>
<div id="app"></div>
</template>
<script>
export default {
name: "App"
};
</script>
We wrote:
<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App"
};
</script>
Make Sure the v-bind is Valid
v-bind is valid if it has an attribute and has no invalid modifiers.
For instance, we shouldn’t have:
<div v-bind/>
or:
<div v-bind:cc.bbb="foo"/>
Instead, we write:
<div v-bind="foo"/>
or:
<div :aaa="foo"/>
or:
<div v-bind:aaa="foo"/>
assuming that aaa exists.
Make Sure that v-cloak is Valid
A valid v-cloak directive doesn’t have arguments or modifiers.
So we should write:
<div v-cloak/>
Anything else isn’t valid.
Make Sure that v-else-if is Valid
A valid v-else-if can’t have modifiers.
Also, it must have an attribute value.
It must go after an element with v-if as its sibling.
For instance, instead of writing:
<div v-else-if/>
or:
<div v-else-if:aaa="bar"/>
We write:
<div v-if="foo"/>
<div v-else-if="bar"/>
Make Sure that v-else is Valid
v-else shouldn’t have any arguments or modifiers.
It must go after an element with v-if or v-else-if as its sibling.
For instance, we should write:
<div v-if="bar"/>
<div v-else/>
instead of:
<div v-else:aaa/>
<div v-else.bbb/>
Make Sure Our v-for Directive is Valid
A v-for directive should have an argument, but no modifiers.
Also, we need to add the key prop to elements rendered by v-for .
For instance, instead of writing:
<div v-for/>
or:
<div v-for.c="todo in todos"/>
We write:
<div
v-for="todo in todos"
:key="todo.id"
/>
The :key prop or v-bind:key directive is required.
Conclusion
We should make sure that our directives are used properly.
If they need modifiers or arguments, then we add them. Otherwise, we don’t.
If we have multiple v-click directives, then we need the exact modifier on the broader one so that the other one can pick up the specified user events.
v-for directives shouldn’t have modifiers but it should have arguments.
