Suggest an edit

Improve this article

Refine the answer for “What can a component in Vue contain?”. 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)

A component in Vue is a **self-contained module** that brings together everything needed to display and run a specific UI fragment: markup, logic, data, styles, events, computations, and so on.

In modern projects this is most often a **SFC (Single File Component)** - a `.vue` file, which can contain the following parts:

---

## 1. **Template**

Describes the **markup**, that is, what the user sees.

Example:

```javascript
<template>
  <button @click="count++">
    Clicked {{ count }} times
  </button>
</template>
```

---

## 2. **Script** - component logic

Contains:

- reactive data (`ref`, `reactive`),
- methods,
- computed properties,
- imports,
- props,
- `emit` events,
- lifecycle hooks.

Example (`<script setup>`):

```javascript
<script setup>
import { ref } from "vue"

const count = ref(0)
</script>
```

A component can contain **any JS code** that describes its behavior.

---

## 3. **Props** - input data

A component can accept parameters from its parent:

```javascript
<script setup>
defineProps({
  title: String,
  size: {
    type: Number,
    default: 14
  }
})
</script>
```

---

## 4. **Emits** - events sent to the parent

Needed to notify the parent component about actions:

```javascript
<script setup>
const emit = defineEmits(['submit'])

function handleClick() {
  emit('submit')
}
</script>
```

---

## 5. **Slots** - passing markup into a component

Let components be flexible and reusable:

```javascript
<template>
  <div class="card">
    <slot />
  </div>
</template>
```

---

## 6. **Lifecycle hooks**

A component can perform actions at a specific moment:

```javascript
<script setup>
import { onMounted } from "vue"

onMounted(() => {
  console.log("Component mounted")
})
</script>
```

---

## 7. **Style (CSS)**

Component styles can be:

- regular
- scoped
- global
- CSS modules
- SCSS/LESS

Example:

```javascript
<style scoped>
button {
  background: #333;
  color: white;
}
</style>
```

---

## 8. **Computed properties**

```javascript
<script setup>
import { ref, computed } from "vue"

const first = ref('Vue')
const second = ref('JS')

const full = computed(() => first.value + second.value)
</script>
```

---

## 9. **Prop validation and typing**

Vue lets you describe data types:

```javascript
defineProps({
  count: {
    type: Number,
    required: true,
  }
})
```

---

## 10. **Watchers**

Tracking reactive values:

```javascript
<script setup>
import { ref, watch } from "vue"

const num = ref(0)

watch(num, (newVal) => {
  console.log(newVal)
})
</script>
```

---

## 11. **Composables**

A component can plug in external logic:

```javascript
<script setup>
import useTodo from '@/composables/useTodo'
const { todos, addTodo } = useTodo()
</script>
```

---

## 12. **Child components**

Other components can be imported and used:

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

<template>
  <UserCard />
</template>
```

---

## SUMMARY (cheat sheet)

A component in Vue can contain:

- **template** - HTML structure
- **script** - logic and state
- **props** - input parameters
- **emits** - events
- **computed** - computed values
- **watch** - watchers
- **lifecycle hooks** - lifecycle hooks
- **slots** - nested template
- **child components** - nested components
- **styles** - component styles
- **composables** - plugged-in logic

Put simply:
**A component is markup + logic + styles + data, combined into one independent module.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.