Learn about Components in Vue.js

Vue.js is a popular JavaScript framework for building interactive user interfaces. One of its key features is the use of components, which allows developers to create reusable and self-contained pieces of code. In this guide, we will explore the fundamentals of Vue.js components and demonstrate their power through practical examples.

What are Components?

Components in Vue are modular and reusable pieces of code that encapsulate a specific part of the user interface. They enable developers to break down a web page into smaller, manageable units, making applications more scalable and easier to maintain.

Creating a basic Component

Let's start by creating a simple Vue component called FoodItem. Open your Vue project and follow these steps.

Create a new folder named components inside the src folder.

Inside the components folder, create a new file named FoodItem.vue.

Add the following code to FoodItem.vue

<!-- FoodItem.vue -->
<template>
  <div>
    <h2>{{ name }}</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples'
    }
  }
};
</script>

<style></style>

This simple component consists of a template with heading and paragraph elements, a script section for data properties, and an empty style section.

Adding the Component to the main application

To use the FoodItem component in your main application, follow these steps.

Open your main.js file.

Import the FoodItem component.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import FoodItem from './components/FoodItem.vue'

const app = createApp(App)
app.component('food-item', FoodItem)
app.mount('#app')

The food-item tag is now available for use in your templates.

Integrating the Component in App.vue

Now, let's use the FoodItem component in your App.vue file.

<!-- App.vue -->
<template>
  <div>
    <h1>Food</h1>
    <food-item/>
    <food-item/>
    <food-item/>
  </div>
</template>

<script></script>

<style>
  #app > div {
    border: dashed black 1px;
    display: inline-block;
    margin: 10px;
    padding: 10px;
    background-color: lightgreen;
  }
</style>

You can see how easy it is to integrate a custom component into your application. The food-item component will be rendered three times within the main div element.

Individual Components with click counter

Let's enhance our FoodItem component to make each instance count clicks individually. Update the FoodItem.vue file.

<!-- FoodItem.vue -->
<template>
  <div v-on:click="countClicks">
    <h2>{{ name }}</h2>  
    <p>{{ message }}</p>
    <p id="red">You have clicked me {{ clicks }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples',
      clicks: 0
    }
  },
  methods: {
    countClicks() {
      this.clicks++;
    }
  }
}
</script>

<style>
  #red {
    font-weight: bold ;
    color: rgb(144, 12, 12);
  }
</style>

Now, each FoodItem component will independently count the number of clicks it receives.

Vue.js 2 compatibility

Vue.js 3 is the latest version, but if you are using Vue.js 2, the concepts remain similar. Vue.js 2 also supports components, and you can follow the same steps outlined above with slight modifications.

Here's a quick example using Vue.js 2 syntax.

<!-- FoodItem.vue for Vue 2 -->
<template>
  <div @click="countClicks">
    <h2>{{ name }}</h2>  
    <p>{{ message }}</p>
    <p id="red">You have clicked me {{ clicks }} times.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Apples',
      message: 'I like apples',
      clicks: 0
    }
  },
  methods: {
    countClicks() {
      this.clicks++;
    }
  }
}
</script>

<style>
  #red {
    font-weight: bold ;
    color: rgb(144, 12, 12);
  }
</style>

The key differences include using @click instead of v-on:click for event handling in the template. Vue.js components empower developers to build scalable and maintainable user interfaces with ease. The ability to encapsulate specific functionalities into reusable, self-contained modules enhances code organization and fosters a more efficient development process. Throughout this comprehensive guide, we've covered the basics of creating Vue components, integrating them into the main application, and exploring their individual behaviors. The examples provided showcase the versatility of Vue.js, whether you're using the latest version (Vue 3) or its predecessor (Vue 2).

As you continue your journey with Vue.js, consider the benefits of components in terms of modularity and reusability. Leveraging these features not only improves the structure of your code but also streamlines the maintenance and scalability of your Vue applications. Whether you're a seasoned Vue.js developer or just getting started, the principles of working with components remain a fundamental aspect of creating dynamic and engaging user interfaces.

Sharing 3 exercises that are designed to reinforce your understanding. See the attachment.