Vue Best Practices to follow in 2021

Table of Content

1. Overview 2. Vue.js best practices to follow in 2021 -Shortcut component registration -Use kebab case -Data initialization -Use API factories -Use key property 3. Conclusion

Overview

As we all know, the demand for Vue.js has been continuously increasing in the last few years. There are many reasons behind the popularity of Vue.js such as it is user-friendly, has few restrictions, easy integration, and much more that makes the development process easier and faster. These reasons have encouraged Vue.js to compete with React and Angular in many aspects. 

Vue.js is one of the most popular and leading progressive frameworks of JavaScript for creating interactive UIs when it comes to modern front-end development. It is a tool that helps developers to create unique applications, improve performance and respond quickly to innovations in your sector, all required is to follow the Best Vue.js Practices. Apart from that, the technology is widely used because of its active community support, interesting patterns, easy learning curve, and vast library which makes the development process faster. 

In this post, we’re going to discuss some best Vue.js security practices that you should follow in 2021 and beyond. So, without any further ado, let’s get started!

Best Vue.js Practices

1. Shortcut component registration

To utilize components, it is required to import other components and register them like this:

import MyAwesomeComponent from ‘./my-awesome-component.vue’; …components: {    ‘my-awesome-component’: MyAwesomeComponent}

Else, here is another simple method to register the components:

… components: {    MyAwesomeComponent,    MyAwesomeComponentTwo,    MyAwesomeComponentThree }

Source

2. Use Kebab case

The components and elements that you’re using should be a naming convention that is in kebab-case so that developers can substitute the spaces between words with a dash.

Here is the example where we have written the code to nest components and release new events:

<template>  <div>    <button @click=”increment”>Increment</button>  </div> </template> <script> export default {  name: “count-button”,  methods: {    increment() {      this.$emit(“increase-count”);    }  } }; </script>

In app.vue:

<template>  <div id=”app”>    {{count}}    <count-button @increase-count=”count++”></count-button>  </div> </template> <script> import CountButton from “./components/CountButton.vue”; export default {  name: “App”,  components: {    CountButton  },  data() {    return {      count: 0    };  } }; </script>

Source

3. Data Initialization

As we all know, the data observation model in Vue.js supports deterministic data models to initialize the data properties. 

For example:

<div id=”demo”>  <p v-class=”green: validation.valid”>{{message}}</p>  <input v-model=”message”> </div>

Make sure you’re not initializing an empty object, prefer to initialize your data like this:

new Vue({  el: ‘#demo’,  data: {    message: ”,    validation: {      valid: false    }  } })

Source

You’re not required to set each nested property in your data. Initialising data as an empty object and setting new objects using nested structures afterward is also possible. 

4. Use API factories

We can create a this.$api helper to fetch API endpoints including all classes, like this:

api ├── auth.js ├── notifications.js └── teams.js

To initialize this pattern with a plugin in any Nuxt app is a similar process like we did in a standard Vue app. 

// PROJECT: API import Auth from “@/api/auth”; import Teams from “@/api/teams”; import Notifications from “@/api/notifications”; export default (context, inject) => {   if (process.client) {     const token = localStorage.getItem(“token”);     // Set token when defined     if (token) {       context.$axios.setToken(token, “Bearer”);     }   }   // Initialize API repositories   const repositories = {     auth: Auth(context.$axios),     teams: Teams(context.$axios),     notifications: Notifications(context.$axios)   };   inject(“api”, repositories); };

export default $axios => ({   forgotPassword(email) {     return $axios.$post(“/auth/password/forgot”, { email });   },   login(email, password) {     return $axios.$post(“/auth/login”, { email, password });   },   logout() {     return $axios.$get(“/auth/logout”);   },   register(payload) {     return $axios.$post(“/auth/register”, payload);   } });

Now, call them in components like this:

export default {   methods: {     onSubmit() {       try {         this.$api.auth.login(this.email, this.password);       } catch (error) {         console.error(error);       }     }   } };

Source

5. Use Key property

You can use key properties while reusing a component to separate each of them and assume you have to use the same component for flipping also. 

If you’re using a key property in your code, <template v-for> with a child that uses v-if, the key should be moved up to the <template> tag.

<!– Vue 2.x –> <template v-for=”item in list”>   <div v-if=”item.isVisible” :key=”item.id”>…</div>   <span v-else :key=”item.id”>…</span> </template> <!– Vue 3.x –> <template v-for=”item in list” :key=”item.id”>   <div v-if=”item.isVisible”>…</div>   <span v-else>…</span> </template>

Conclusion

And that’s it!

With this, we end our article here, and hopefully, you found this post helpful and will help you in maintaining the best Vue.js practices while developing an app. With our expertise and experience, we came up with these tricks that make the task of developers easy and the development process smooth.