What is a Component in Vue: Simple Explanation and Example

A component in Vue is a reusable piece of code that controls a part of the user interface. It lets you split your app into small, manageable sections, each with its own structure, style, and behavior.

How It Works

Think of a Vue component like a LEGO block. Each block is a small part of a bigger model. You build your app by putting these blocks together. Each component has its own HTML (structure), CSS (style), and JavaScript (behavior) bundled inside it.

When Vue runs your app, it reads these components and shows their content on the screen. Components can also talk to each other by sending and receiving data, just like friends passing notes. This makes your app organized and easier to understand.

Example

This example shows a simple Vue component that displays a greeting message. It uses the setup script style and returns a message to show in the template.

vue

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

<script setup>
import { ref } from 'vue'
const message = ref('Hello from Vue component!')
</script>

Output

Hello from Vue component!

When to Use

Use Vue components whenever you want to break your app into smaller parts that can be reused or managed separately. For example, buttons, forms, headers, or user profiles can each be a component.

This helps when your app grows bigger because you can work on one part without breaking others. It also makes your code cleaner and easier to test.

Key Points

• Components are reusable building blocks of a Vue app.
• Each component has its own template, logic, and style.
• They help organize and simplify complex user interfaces.
• Components can communicate by passing data and events.

Key Takeaways

A Vue component is a self-contained piece of UI with its own structure, style, and behavior.

Components help break down complex apps into smaller, manageable parts.

Use components to reuse code and keep your app organized.

Components communicate by passing data and events to each other.