VueJS Best Practices for Web Development

There is no doubt VueJS has got popularity in such a short time. VueJS was developed by Google’s developer Evan You in 2013. VueJS is a progressive framework that is used to create interactive user interfaces. To make VueJS application development successful, all you need is to follow the right approach for VueJS development services. Here we are going to discuss the VueJS best practices for productive VueJS development.

Read More: VueJS vs Gatsby – Which is the best Framework to use?

VueJS Best Practices 2020

Kebab Cases for custom events

Unlike in the case of the components and props, Events doesn’t offer any automatic case transformation. It is recommended to use the name of the event is the same as the name of the event listener. So, to maintain consistency and readability, stick to the kebab-case in the custom events.

“KEBAB-CASE MEANS TO WRITE ALL LETTERS IN A SMALL CASE BY USING THE HYPHEN IN BETWEEN”

For instance-
In JavaScript

this.$emit('helloEvent')

Never use the event names in camelCase or PascalCase.

In HTML

<my-component v-on:hello-event="DoSomething"></my-component>

In this example, you can observe, the (v-on) event listeners in DOM templates automatically transform (‘helloEvent’) to (hello-event). So, using the custom event names in Kebab-case is one of the VueJS best practices.

Use: key inside v-for while mapping an array to elements

In VueJS, (v-for) directive is used to render the array list items. It is advisable to use (: key) attribute inside the (v-for) since it helps the application be constant and predictable whenever the manipulation of the data is required. Without using the (: key) attribute inside the (v-for) directive, the elements could be disordered and could be less predictive.

In HTML

//Bad Practice
<ul id="tws-example1">
<li v-for="product in products">
</li>
</ul>

//Good Practice
<ul id="tws-example2">
<li v-for="order in order" :key="order.id">
{{order.id}}
</li>
</ul>

Props Declaration (camelCase vs. kebab-case)

In the traditional practices, camelCase is used in JavaScript while kebab-case in the HTML. In VueJS, it has made it easy for us as HTML is case-sensitive, so it converts any uppercase to lowercase, while JavaScript templates converted kebab-case.

In HTML

//Bad Practice
<blog-post postTitle="helloword!"></blog-post>

//Good Practice
<blog-post post-title="helloword!"></blog-post>

Data must be a function

To follow VueJS best practices, then never use data as an object instead of using it as a function and returning a data object. Since by doing so, data will be shared with all instances of the components. Our main objective is to build reusable components, but with a unique object, so to achieve this, we will pass the object through a function.

//Bad Practice
var data = {
counter = 0;
};

//Good Practice
data: function(){
return data;
}

Avoid using v-if with v-for

Never use the same elements in (v-if) and (v-for) since the VueJS prioritize the directive over the directive. So, if we use the v-for with v-if, it first loops through every element and checks it if conditional.

For instance- 

In HTML

//Bad Practice
<ul>
<li
 v-for="object in objects"
 v-if="object.isActive"
 :key=object.id>
{{object.name}}
</li>
</ul>

//Good Practice
<ul>
<li
v-for="object in objects"
 :key=object.id>
{{object.name}}
</li>
</ul>

Vue.component('this-component', {
props: {
propA: Number,
propB: [String, Number],
propC: {
 type: Object,
 default: function() {
return { message: 'hellotws' }
}
},
})

: is short for v-bind

@ is short for v-on

Actual Syntax
<a v-bind:href="url">.......</a>

Shorthand
<a :href="url">.......</a>

Actual Syntax
<a v-on:click="action">.....</a>

Shorthand
<a @click="action">.....</a>

//Bad Practice
created: () {
this.handleChange()
},
methods: {
handleChange() {
}
},
watch() {
property() {
this.handleChange()
}
}

//Good Practice
methods: {
handleChange() {
}
},
watch() {
property {
immediate: true
handler() {
this.handleChange()
}
}

//Bad Practice
var helloMixin1 = {
methods: {
update: function () {
}
}
}

//Good Practice
var helloMixin2 = {
methods: {
$_helloMixin2_update: function () {
}
}
}