LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1515 min read

Components Basics

Break a UI into reusable, self-contained components and compose them together.

Why Break UI into Components

A component is a self-contained, reusable piece of UI — its own template, logic, and (usually) style. Breaking a page into components lets you build a complex interface out of small, testable, independently understandable pieces, and reuse the same piece (a button, a card, a modal) wherever it's needed.

Defining a Component

In practice, every .vue file is already a component. A "child" component is simply another .vue file you import and use inside a parent's template.

<!-- src/components/AppButton.vue -->
<template>
  <button class="app-button">
    <slot />
  </button>
</template>


<style scoped>
.app-button { padding: 0.5rem 1rem; border-radius: 6px; }
</style>

Registering and Using a Component

With <script setup>, importing a component automatically makes it available in the template — no separate registration step required.

<!-- src/App.vue -->
<script setup>
import AppButton from './components/AppButton.vue';
</script>


<template>
  <AppButton>Click Me</AppButton>
</template>
PascalCase in Templates

Writing component tags in PascalCase (<AppButton>) rather than kebab-case (<app-button>) is the recommended convention in Single-File Components, and makes it visually obvious you're using a component, not a native HTML tag.

Composing Components

Real applications nest components many levels deep — a page is made of sections, sections are made of cards, cards are made of buttons and icons. This composition is Vue's primary tool for managing complexity as an app grows.

App.vue
└── ProductPage.vue
    ├── ProductGallery.vue
    ├── ProductDetails.vue
    │   └── AppButton.vue
    └── ReviewList.vue
        └── ReviewCard.vue (repeated per review)

Common Beginner Mistakes

Building one giant component for an entire page

Large, monolithic components become hard to reason about and reuse — break out sections that render repeatedly or vary independently.

Forgetting to import a component before using its tag

An unrecognized tag in the template usually means the component wasn't imported — Vue will typically warn about this in the console.

FAQs

No practical limit — but keep nesting meaningful; component boundaries should reflect genuine reuse or independent concerns, not be split arbitrarily.

Only if the data actually passed to them (as props) changes — Vue's reactivity system is precise about what needs to update.

Summary

Components are Vue's core unit of reuse and organization — every .vue file is one, composed together to build a full page. Next, you'll learn how a parent passes data down into a child with props.

Next Lesson →

Props