0Pricing
Vue Academy · Lesson

Creating and Registering Components

Define and register components globally and locally.

Why Components?

Components let you split a UI into independent, reusable pieces.

  • Each manages its own template, logic, and style
  • You compose them into larger structures
  • They make code organized and maintainable

Single-File Components

A Single-File Component (.vue) bundles three blocks in one file.

<template>
  <p>{{ greeting }}</p>
</template>

<script setup>
import { ref } from "vue"
const greeting = ref("Hello!")
</script>

<style scoped>
p { color: teal; }
</style>

All lessons in this course

  1. Creating and Registering Components
  2. Props and Custom Events
  3. Slots and Scoped Slots
← Back to Vue Academy