What Is a Component

A component is the fundamental unit of a Vue application. Everything you see in the browser is rendered by a component — the app shell, the navigation, the individual cards, the buttons. Understanding one component well means understanding how all of them work.

What a component is

A Vue component is a reusable, self-contained piece of UI. It has:

• State — reactive data it owns or receives
• Template — the HTML structure it renders
• Behavior — functions that respond to events and update state

When Vue renders a component, it produces real DOM elements. When the component’s state changes, Vue efficiently updates only the DOM elements that changed.

Creating a component

In src/components/, create PersonCard.vue:

<script setup lang="ts">
</script>

<template>
  <div class="person-card">
    <span class="name">Unknown Person</span>
  </div>
</template>

<style scoped>
.person-card {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.name { font-weight: 600; font-size: 0.9rem; }
</style>

Using a component

Import and use PersonCard in App.vue:

<script setup lang="ts">
import PersonCard from './components/PersonCard.vue'
</script>

<template>
  <PersonCard />
  <PersonCard />
  <PersonCard />
</template>

Each <PersonCard /> is an instance of the component. They share the same template and style definition, but are independent — each has its own state if it holds any. Vue replaces each <PersonCard /> with the component’s rendered DOM output.

The component tree

Vue apps are a tree of components. The root component (App.vue) contains other components, which contain others, and so on.

For FamilyTree, the tree looks like:

App
├── RouterView
│   └── HomeView
│       └── FocusView
│           ├── PersonCard (parents)
│           ├── PersonCard (focus person)
│           ├── PersonCard (spouse)
│           └── PersonCard (children)

Each PersonCard is the same component definition, used multiple times. Props (covered in Lesson 03) make each instance display different data.

Component naming

Vue components are named in PascalCase (PersonCard, not person-card) to distinguish them from standard HTML elements. In templates, you can use either <PersonCard /> or <person-card /> — Vue accepts both — but PascalCase is the convention in single-file component projects.

Exercise

1. Create src/components/PersonCard.vue with the code above.
2. Import and render three <PersonCard /> instances in App.vue.
3. Confirm all three appear in the browser.
4. Add a background CSS property to .person-card in the scoped styles. Verify that this style does not affect any other element on the page.

Recap

• A component is a reusable, self-contained piece of UI with state, a template, and behavior.
• Each usage of a component is an independent instance.
• Vue apps are a tree of components — App.vue is the root; all other components nest inside it.
• Import a component in <script setup> and use it in the template directly — no components: {} registration needed.