What are components

Vue.js is a popular JavaScript framework that allows developers to build interactive web applications with ease. One of its core concepts is components, which play a crucial role in structuring and organizing Vue applications. In this article, we'll explore the concept of components in Vue 3, including Single File Components, global vs. local components, and the component hierarchy. Let's dive in!

Understanding components

At its core, Vue.js is all about creating reusable, self-contained building blocks called components. Components are like LEGO bricks that you can assemble to build complex user interfaces. They encapsulate both the UI and the behavior of a part of the application.

Components help in:

1. Reusability: you can use the same component in multiple parts of your application.
2. Maintainability: components are easier to manage and debug because they are self-contained.
3. Organization: they promote a structured way to design your application, making it easier to reason about and scale.

Components in Vue 3 are encapsulated and reusable pieces of code that contain the template, logic, and styles for a specific part of a web application. Components enable you to break down your application into smaller, manageable pieces, making it more modular and maintainable. Let's take an example of a simple Vue component.

<template>
  <div>
    <h1>Hello, Vue 3!</h1>
  </div>
</template>

<script setup>

</script>

<style scoped>
h1 {
  color: lightcoral;
}
</style>

In this example, we have a simple Vue component that displays a blue "Hello, Vue 3!" message. Let's dive more into components by looking at Single File Components (SFC), a common way to define Vue components.

Here's the output of the code above:

Single file components (SFC)

Single File Components, often referred to as SFCs, are a convenient way to define Vue components. They encapsulate a component's template, JavaScript logic, and styles in a single .vue file. This approach encourages a clear separation of concerns and keeps related code together.

Here's an example of a simple SFC:

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref("Hello, Vue!");

const changeMessage = () => {
  message.value = "Vue is awesome!";
};
</script>

<style scoped>
/* Add your styles here if needed */
</style>

In this example:

• The <template> section contains the HTML template that defines the component's layout and structure. You use Vue's template syntax to create dynamic and reactive components.
• In the <script> section, you write the JavaScript code for the component. This is where you define the component's behavior, data, methods, computed properties, and lifecycle hooks.
• The <style> section allows you to define component-specific CSS or pre-processor code. You can write plain CSS, SCSS, Less, or any other CSS pre-processor you prefer.

Global vs. local components

Vue allows you to create components globally or locally.

• Global components

Global components in Vue are registered at the global Vue instance level and can be used throughout your entire application. They are typically defined at the root of your Vue application and are available for use in any component template. However, it's important to note that registering too many global components can impact build efficiency and make component dependencies less explicit. Here's how you can create and register a global component:

<!-- GlobalComponent.vue -->

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
const message = "I am a global component";
</script>

To register this component globally and make it available throughout your app, you can do so in your main Vue instance:

<!-- main.js -->

import { createApp } from "vue";
import App from "./App.vue";
import GlobalComponent from "./GlobalComponent.vue";

const app = createApp(App);

app.component("GlobalComponent", GlobalComponent); // Component names are now in kebab-case

app.mount("#app");

Now, you can use <global-component> in any component template without needing to import it explicitly:

<!-- App.vue -->

<template>
  <div>
    <GlobalComponent></GlobalComponent>
  </div>
</template>

• Local components

Local components, on the other hand, are components defined within a single Vue component. They are only accessible and usable within the parent component that defines them. Local components are useful for creating reusable parts of a specific component. Here's how you can create and use a local component:

<!-- LocalComponent.vue -->

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
const message = "I am a local component";
</script>

In your App.vue file, you can include and use the local component as follows:

<!-- App.vue -->

<template>
  <div>
    <LocalComponent></LocalComponent>
  </div>
</template>

<script setup>
import LocalComponent from './LocalComponent.vue';
</script>

In this example, we import LocalComponent from its file (LocalComponent.vue). Local components are useful when you want to encapsulate a functionality specific to a particular component or keep your global namespace clean.

Component hierarchy

In Vue.js, components are organized in a tree-like structure, where you have parent components and child components. Each component can contain other components, forming a hierarchy.

• A parent component is a component that contains and manages one or more child components. It is at a higher level in the hierarchy and often represents a larger part of your application's UI. Parent components can pass data down to their child components through props.

• A child component is a component that is contained within a parent component. Child components are typically more focused and specific in their functionality. They can receive data from their parent components through props and emit events to communicate changes back to the parent.

For example, consider a simple to-do list application

<App>
  <TaskList>
    <TaskItem></TaskItem>
    <TaskItem></TaskItem>
  </TaskList>
</App>

In this example:

• App is the parent component that represents the overall structure of the application.
• TaskList and TaskItem are child components that are embedded within App.

To visualize this hierarchy, you can think of App as the container that holds the TaskList and TaskItem components. This parent-child relationship allows for the passing of data from App to TaskList and further down to TaskItem through props. It also enables communication between these components through events.

Conclusion

Components are a fundamental concept in Vue.js, enabling you to create reusable, maintainable, and organized code. Understanding Single File Components, global vs. local components, and component hierarchies is essential for building robust Vue applications. As you delve deeper into Vue.js development, you'll find that mastering components is key to building scalable and efficient web applications.