Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look at some best practices for props, spacing, and naming.
Proo Name Casing
In Vue apps, props should be named in a consistent way.
They should be valid JavaScript identifier names in camelCase.
For instance, we should write:
<template>
<div></div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
The prop name is msg which is a valid JavaScript identifier name.
Default Props
Having default props is a good idea.
This way, if we forget to pass in a prop, then we still have a default value set for our prop.
For instance, we can write:
<template>
<div></div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: {
type: String,
default: "hello"
}
}
};
</script>
We added a default field to our prop object.
Now if we don’t have anything passed in for the msg prop then it’s set to the 'hello' prop.
Prop Types
We can add prop types to our Vue component prop so that we won’t have props with the wrong type passed in.
For instance, we can write:
<template>
<div></div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
Then the msg prop would always be a string.
If it’s not, we’ll get an error.
Put HTML Element Content in a New Line
If we have HTML elements content, then we can put them in a new line.
For instance, we can write:
<template>
<tr>
<td>{{ foo }}</td>
<td>{{ bar }}</td>
</tr>
</template>
<script>
export default {
name: "App",
data() {
return {
foo: 1,
bar: 2
};
}
};
</script>
Then we have 2 td elements in their own line.
It’s easier to read to have them in their own line.
v-bind Directive Style
We can use : instead of v-bind to save us some typing.
For example, we can write:
<template>
<HelloWorld :msg="msg"/>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
components: {
HelloWorld
},
data() {
return {
msg: "hi"
};
}
};
</script>
We have :msg which is short for v-bind .
We save typing by using the shorthand.
v-on Style
We can use @ instead of v-on . For instance, we can write:
<template>
<button @click="onClick">click me</button>
</template>
<script>
export default {
name: "App",
methods: {
onClick() {
alert('hello')
}
}
};
</script>
@ is short for v-on:click .
We save typing by using the shorthand.
Use of v-html
We should be careful when we use v-html so that we don’t let attacks execute cross-site scripting attacks.
We should avoid it as much as possible and escape anything that may have code in it.
this in Template
this is Vue templates shouldn’t be used. It’s probably added as a mistake from copy and pasting in most cases.
For instance, instead of writing:
<a :href="this.url">link</a>
We should write:
<a :href="url">link</a>
Array Brackets Spacing
In our Vue apps, we should have array brackets spacing so that they’re easy to read.
For instance, we can write:
const arr = ['foo', 'bar'];
Arrow Spacing
Arrow functions should have consistent spacing.
For instance, we should write:
const fn = () => {
//...
}
We have one space before and after the arrow.
Block Spacing
Block spacing should be consistent so that we can write:
const fn = () => {
//...
}
We have 2 spaces for indentation.
Brace Style
We should put the opening brace on the same line as the declaration.
For instance, we should write:
if (foo) {
baz();
} else {
bar();
}
We have the opening brace after the closing parentheses for the if and else for the else block.
camelCase
camelCase should be used for declaring variables.
This is a commonly accepted convention so we should use it for consistency.
For instance, we write:
let fooBar = 1;
Conclusion
We should use camelCase for prop names and variables.
Spacing should be consistent throughout our code.
Default props and prop type validation are also good things to add to prevent errors.
