Vue Best Practices— Props, Spacing, and Naming

John Au-Yeung
Jun 17 · 4 min read
Photo by Sven Hornburg on Unsplash

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.

Photo by Micheile Henderson on Unsplash

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.

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store