Creating Reusable Components in VueJs and Why It Is Important

From junior to the next level or how to avoid the disaster of spaghetti code 😬

Very often while woking on the project within the company or by your own you have to use the same components in the diffirent places (or in the same). It can happen especially on the large scale projects.

In this article we will take a look about why it is important to do and how it can add you experience in your career.

Why should we do it?

What are the most common mistakes of the junior developer? Exactly:

1. Number of lines of code
2. Repetitive code line

In order to avoid those mistakes it would be important to think about the code structure before actually to start coding. Nobody needs spaghetti code…🍝

And of course, to be able to write clean and reusable code, VueJs and other JavaScript frameworks have presented to us the possibility to create seperate components and use it wherever we want in the project. Otherwise, why to using a framework? 🧐

Creating reusable components also give you the possibility to custom certain elements and even to create your own design library.

Reusable components = cleaner code

Let’s imagine you are creating a page and on this page you have to use several times a “div” have the same styles and the same structure, and it takes aroung 10 lines of code.

If you use it 3 times it is already 30 lines of the same code that can become a just one line of code.

Let’s take an example of before and after. 👇

❌ Before:

<div class="heading">
  <div>
    <img src="../assets/photo1.jpeg" class="image-style" />
  </div>
  <div class="some-content">
    <h2>Text here1</h2>
    <p>Some other text1.</p>
  </div>
  <div class="something-else">
   <b-button class="btn-primary">See more</b-button>
   </div>
</div>
.....
<div class="heading">
  <div>
    <img src="../assets/photo2.jpeg" class="image-style" />
  </div>
  <div class="some-content">
    <h2>Text here2</h2>
    <p>Some other text2.</p>
  </div>
  <div class="something-else">
   <b-button class="btn-primary">See more</b-button>
   </div>
</div>
....
<div class="heading">
  <div>
    <img src="../assets/photo3.jpeg" class="image-style" />
  </div>
  <div class="some-content">
    <h2>Text here3</h2>
    <p>Some other text3.</p>
  </div>
  <div class="something-else">
   <b-button class="btn-primary">See more</b-button>
   </div>
</div>

Ohhh… it doesn’t look very elegant, what do you think? 😬 You literally repeat the same lines of code by just changing the text and the photo.

How can we change it? Let’s create a component for this photo section and transform it in one line of code instead of 10.

✅ After:

🔸 1.Creating a reusable component

First let’s create a new component and name it “ImageSection.vue”.

Inside this component we will copy one of the div that we are repeating several times and replace the text by the props.

<template>
  <div class="heading">
     <div>
       <img :src="image" class="image-style" />
     </div>
     <div class="some-content">
        <h2>{{ heading }}</h2>
        <p>{{ text }}</p>
     </div>
     <div class="something-else">
       <b-button class="btn-primary">See more</b-button>
     </div>
   </div>
</template>
<script>
export default {
name: "ImageSection",
props: {
   image: {
     type: String,
   },
   heading: {
     type: String,
   },
   text: {
     type: String,
   },
},
};
</script>

If you take a look at the example above you can see that right now instead of the image we have a prop “image”, instead of the text — “text” and instead of the heading — “heading”.

That means that our reusable component is ready to be used and all the data that is passed to the props can fully dynamic when it is used in the other component.

🔸 2. Using the component

After creating your reusable component you can use it any times you want and anywhere you want by replacing the props with the data.

<ImageSection :image="../assets/photo1.jpeg" :heading="Heading1" :text="Text1"/>
....
<ImageSection :image="../assets/photo2.jpeg" :heading="Heading2" :text="Text2"/>
....
<ImageSection :image="../assets/photo3.jpeg" :heading="Heading3" :text="Text3"/>

And here you are! 🤩 Our code looks really cleaner and readable.

🔸 3. Even better

What would be even better is also to create a data Object and to pass all the component in a v-for loop.

<template>
  <div v-for="(section, index) in sections" :key="index">
    <ImageSection :image="section.image" :heading="section.heading"   :text="section.text"/>
   </div>
</template>
<script>
export default {
name: "ImageSection",
data() {
    return {
    sections: [
    {
     image: "../assets/photo1.jpeg", 
     heading: "Heading1", 
     text: "Text1"
     },
     {
     image: "../assets/photo2.jpeg", 
     heading: "Heading2", 
     text: "Text2"
     },
     {
     image: "../assets/photo3.jpeg", 
     heading: "Heading3", 
     text: "Text3"
     },
]
}
},
};
</script>

In this case we have passed from 3 lines of code to a v-for loop that makes us avoid even more of the repetitions.

🔸 4. Slots

Another common way to make reusable component is by using the slots and this is the topic that I will cover in another article.

Thank you for reading! 😊 And remember that it is better to take time and to think about the code than to write it fast and to do it in a wrong way.