Suggest an edit

Improve this article

Refine the answer for “What is a component in Vue.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

### What is a component in Vue.js

**A component** is a **self-contained, reusable interface block** in Vue.js that combines markup (HTML), logic (JavaScript), and styles (CSS).
Components are the **building blocks of a Vue application**, out of which the entire user interface is assembled.

---

## The core idea

Components let you split the interface into **small, independent parts**, each of which:

- has **its own state** (data);
- **reacts** to changes in that data;
- can **communicate with other components** (via props, events, provide/inject);
- and can be **reused** in different places throughout the application.

---

## Example of a simple component

```javascript

<template>
  <button @click="count++">Counter: {{ count }}</button>
</template>

Here, `Counter.vue` is a full-fledged **component** that:

- has **its own state** (`count`);
- **updates the interface reactively**;
- **encapsulates its styles** using `scoped`.

---

## Component structure

A typical `.vue` file (Single File Component, SFC) consists of three parts:

| Block | Purpose |
|---|---|
| `<template>` | Defines the markup that will be rendered |
| `<script>` or `<script setup>` | Contains the JS logic (data, methods, imports, events, etc.) |
| `<style>` | Defines the component's styles (the scope can be limited with `scoped`) |

---

## Types of components

1. **Global** - registered via `app.component()` and available everywhere.

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import Counter from './Counter.vue'

const app = createApp(App)
app.component('Counter', Counter)
app.mount('#app')
```

2. **Local** - imported and declared inside another component.

```javascript
<script setup>
import Counter from './Counter.vue'
</script>

<template>
  <Counter />
</template>
```

---

## Interaction between components

- **Passing data down:** via `props`

```javascript
<UserCard :name="user.name" />
```

- **Sending events up:** via `emit`

```javascript
<button @click="$emit('like')">Like</button>
```

- **Shared context:** via `provide` / `inject`
- **Global state:** via Pinia, Vuex, or the Composition API

---

## Why components are a key part of Vue

- They let you **structure code** and **simplify scaling** the project;
- They provide **reusability and readability**;
- They make a **reactive, modular architecture** possible;
- They improve the application's **testability** and **maintainability**.

---

### Summary

> **A component in Vue.js** is an independent module that combines a template, logic, and styles.
> It describes how a part of the interface should look and behave, and it updates automatically when data changes.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts417 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.