🧩 Vue Component System

What Is a Component?

A component is a reusable, self-contained piece of an interface. It packages its own markup (what it looks like), its own logic (how it behaves), and — in Vue — often its own scoped styles, all in one place. Instead of building a page as one giant file, you build a tree of small components that each do one job well.

💡 A useful analogy: Components are like LEGO bricks. Each brick has a defined shape and connection points, and you assemble complex structures by clicking simple bricks together. You rarely think about the plastic — you think about the shape you want and reach for the brick that fits. Vue components work the same way: build the brick once, then click copies of it wherever you need them.

A real application is a hierarchy of these bricks. The root component holds a few large sections; those sections hold smaller pieces; and the smallest leaves render a single button or rating star.

A typical Vue component hierarchy. Each box is an independent, reusable component.

Why Components?

Breaking an interface into components is not busywork — it buys you four concrete advantages that compound as your app grows.

The mental shift is this: you stop thinking "how do I build this whole page?" and start thinking "what are the small, nameable pieces, and how do they fit together?"

Single-File Components

The standard, recommended way to author a Vue component is the Single-File Component (SFC) — a file ending in .vue that holds the template, script, and styles for one component together. Modern Vue 3 code uses the <script setup> syntax with the Composition API, which is the most concise and best-typed option.

<!-- BaseButton.vue -->
<template>
  <button class="base-button" @click="handleClick">
    {{ text }}
  </button>
</template>

<script setup>
// Declare the props this component accepts
const props = defineProps({
  text: { type: String, default: 'Click me' }
})

// Declare the events this component can emit
const emit = defineEmits(['click'])

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

<style scoped>
.base-button {
  background-color: #42b883;
  color: white;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  cursor: pointer;
}
.base-button:hover {
  background-color: #35495e;
}
</style>

Options API vs. Composition API

You will still meet the older Options API in tutorials and legacy code, where logic is split into data, methods, and computed buckets. This course uses the Composition API with <script setup>, which groups code by feature instead of by option type. Here is the same counter both ways:

<script>
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('mounted')
  }
}
</script>

<script setup>
import { ref, computed, onMounted } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}

onMounted(() => {
  console.log('mounted')
})
</script>

Notice how the Composition API keeps the count, its computed value, and its increment function together as one unit — that grouping pays off enormously in large components. You'll go deep on the Composition API in a later lesson; for now, just recognize the ref/computed/onMounted pattern.

Registering Components

Before you can use a component in a template, Vue needs to know it exists. You register it either locally (in the one component that uses it) or globally (available everywhere).

Local registration (preferred)

With <script setup>, local registration is automatic: you simply import the child component and use it in the template. No components: { ... } block is needed.

<!-- ParentView.vue -->
<template>
  <BaseButton text="Save" @click="save" />
</template>

<script setup>
import BaseButton from './BaseButton.vue'

function save() {
  console.log('saved!')
}
</script>

Global registration (use sparingly)

Global components are registered once on the app instance and can be used in any template without importing. This is convenient for a handful of truly ubiquitous components, but overusing it bloats your bundle and hides dependencies.

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'

const app = createApp(App)

// Now <BaseButton> works in every template, no import needed
app.component('BaseButton', BaseButton)

app.mount('#app')

The Component Lifecycle

Every component instance is born, mounted to the page, updated as data changes, and eventually torn down. Vue lets you hook into each of these moments to run code at exactly the right time. In the Composition API, the hooks are imported functions that you call inside <script setup>.

The lifecycle of a component, from creation through updates to teardown.

Which hook for which job?

The most important pairing is set up in onMounted, tear down in onBeforeUnmount. Anything you attach to the outside world — a resize listener, a third-party chart, an interval — must be cleaned up, or you leak memory every time the component mounts and unmounts.

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const width = ref(window.innerWidth)

function handleResize() {
  width.value = window.innerWidth
}

onMounted(() => {
  // The DOM exists now — safe to touch it or attach listeners
  window.addEventListener('resize', handleResize)
})

onBeforeUnmount(() => {
  // Always undo what you did in onMounted
  window.removeEventListener('resize', handleResize)
})
</script>

Dynamic Components & KeepAlive

Sometimes you want to render different components in the same spot depending on state — think of a tabbed interface. Vue's built-in <component :is="..."> element does exactly this: give it a component (or its name) and it renders that one.

<template>
  <div class="tabs">
    <button
      v-for="tab in tabs"
      :key="tab.name"
      :class="{ active: currentTab === tab.name }"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>

    <!-- Renders whichever component currentComponent points to -->
    <component :is="currentComponent" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

const tabs = [
  { name: 'home', label: 'Home', component: HomeTab },
  { name: 'profile', label: 'Profile', component: ProfileTab },
  { name: 'settings', label: 'Settings', component: SettingsTab }
]

const currentTab = ref('home')
const currentComponent = computed(
  () => tabs.find(t => t.name === currentTab.value).component
)
</script>

Preserving state with KeepAlive

By default, switching away from a dynamic component destroys it, and switching back recreates it — losing any state, such as text a user typed into a form. Wrap the dynamic component in <KeepAlive> to cache it instead:

<KeepAlive>
  <component :is="currentComponent" />
</KeepAlive>

Cached components gain two extra lifecycle hooks — onActivated (shown again) and onDeactivated (hidden but kept) — which are perfect for refreshing data or pausing a video when a tab loses focus.

Worked Example: A Reusable Modal

Let's tie the concepts together with a small but genuinely reusable modal dialog. It shows off props (for configuration), events (to talk back to its parent), slots (to project content), and lifecycle hooks (to wire up an Escape-key handler and clean it up).

<!-- BaseModal.vue -->
<template>
  <Transition name="modal-fade">
    <div
      v-if="isOpen"
      class="modal-overlay"
      @click="closeOnBackdrop && close()"
    >
      <div class="modal" @click.stop>
        <header class="modal-header">
          <h3>{{ title }}</h3>
          <button class="modal-close" @click="close">&times;</button>
        </header>

        <div class="modal-body">
          <!-- Default slot: the parent decides what goes here -->
          <slot>No content provided.</slot>
        </div>

        <footer class="modal-footer">
          <!-- Named slot with a sensible fallback -->
          <slot name="footer">
            <button @click="close">Cancel</button>
            <button @click="confirm">Confirm</button>
          </slot>
        </footer>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'

const props = defineProps({
  title: { type: String, default: 'Dialog' },
  isOpen: { type: Boolean, default: false },
  closeOnBackdrop: { type: Boolean, default: true }
})

const emit = defineEmits(['close', 'confirm'])

function close() {
  emit('close')
}
function confirm() {
  emit('confirm')
}

// Close on the Escape key — set up and cleaned up via lifecycle hooks
function onKeydown(event) {
  if (event.key === 'Escape' && props.isOpen) close()
}

onMounted(() => document.addEventListener('keydown', onKeydown))
onBeforeUnmount(() => document.removeEventListener('keydown', onKeydown))
</script>

And here is a parent using it. Notice how the parent controls visibility with a ref, listens for @close/@confirm, and projects both body content and a custom footer:

<template>
  <button @click="showModal = true">Delete account</button>

  <BaseModal
    title="Are you sure?"
    :is-open="showModal"
    @close="showModal = false"
    @confirm="handleDelete"
  >
    <p>This will permanently delete your account. This cannot be undone.</p>

    <template #footer>
      <button @click="showModal = false">Keep my account</button>
      <button class="danger" @click="handleDelete">Yes, delete it</button>
    </template>
  </BaseModal>
</template>

<script setup>
import { ref } from 'vue'
import BaseModal from './BaseModal.vue'

const showModal = ref(false)

function handleDelete() {
  console.log('account deleted')
  showModal.value = false
}
</script>

One small component, and it already demonstrates the pillars of the component system: encapsulation (it owns its overlay markup and key handler), props for configuration, events for communication, slots for flexible content, and lifecycle hooks for setup and cleanup.

Hands-on Exercise

<!-- BaseButton.vue -->
<template>
  <button
    :class="['base-button', variant]"
    :disabled="disabled"
    @click="emit('click')"
  >
    {{ label }}
  </button>
</template>

<script setup>
defineProps({
  label: { type: String, required: true },
  variant: { type: String, default: 'primary' },
  disabled: { type: Boolean, default: false }
})
const emit = defineEmits(['click'])
</script>

<style scoped>
.base-button { padding: 0.5rem 1rem; border: none; border-radius: 4px; color: #fff; cursor: pointer; }
.base-button:disabled { opacity: 0.5; cursor: not-allowed; }
.primary { background: #42b883; }
.secondary { background: #35495e; }
.danger { background: #e74c3c; }
</style>

<!-- ParentView.vue -->
<template>
  <BaseButton label="Save"   variant="primary"   @click="onClick('save')" />
  <BaseButton label="Cancel" variant="secondary" @click="onClick('cancel')" />
  <BaseButton label="Delete" variant="danger"    @click="onClick('delete')" />
</template>

<script setup>
import BaseButton from './BaseButton.vue'
function onClick(which) {
  console.log('clicked:', which)
}
</script>

Best Practices

Summary & Quiz

📚 Further Reading

• Vue.js — Components Basics
• Vue.js — Component Registration
• Vue.js — Lifecycle Hooks (Composition API)
• Vue.js — KeepAlive

🚀 What's Next?

Components are only useful once they can talk to each other. Next up: Props, Events, and Communication — the precise rules for passing data down, sending events up, and building two-way bindings with v-model.