Vue Academy · Lesson

Creating and Registering Components

Define and register components globally and locally.

Creating and Registering Components is a free Vue Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

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>

Defining a Component

The template block is the markup. The script block holds logic. The style block holds CSS.

scoped styles apply only to this component
Templates need a clear structure of elements

Component Names

By convention, component files and usage use PascalCase.

File: UserCard.vue
In templates: <UserCard />
PascalCase distinguishes components from native HTML

Importing a Component

To use a component, import it where you need it.

<script setup>
import UserCard from "./components/UserCard.vue"
</script>

<template>
  <UserCard />
</template>

Local Registration (script setup)

With script setup, simply importing a component makes it available in the template. No extra registration step is needed.

<script setup>
import Header from "@/components/Header.vue"
import Footer from "@/components/Footer.vue"
</script>

<template>
  <Header />
  <main>Content</main>
  <Footer />
</template>

Local Registration (Options API)

With the Options API you register components in the components option.

import UserCard from "./UserCard.vue"

export default {
  components: {
    UserCard
  }
}

// Now <UserCard /> works in this template

Global Registration

Global registration with app.component makes a component usable everywhere without importing.

import { createApp } from "vue"
import App from "./App.vue"
import BaseButton from "./components/BaseButton.vue"

const app = createApp(App)
app.component("BaseButton", BaseButton)
app.mount("#app")

Global vs Local

Choosing a registration scope:

Global convenient but bloats the bundle, harder to track usage
Local explicit imports, better tree-shaking, clearer dependencies

Prefer local registration except for a few truly universal base components.

Reusing a Component

The same component can be used many times. Each instance is independent.

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

<!-- three separate instances,
     each with its own state -->

Nesting Components

Components form a tree. A parent can contain children, which contain their own children.

<!-- App.vue -->
<template>
  <PageLayout>
    <ArticleList />
  </PageLayout>
</template>

<!-- ArticleList contains ArticleCard children -->

Quick Check

Test your understanding of component registration.

Recap: Creating Components

You learned to build and register components:

.vue files hold template, script, and style
Use PascalCase names
script setup auto-registers imported components
Options API uses the components option
app.component() registers globally

Next: props and custom events.

Frequently asked questions

Is the “Creating and Registering Components” lesson free?

Yes — the full text of “Creating and Registering Components” is free to read here on the web, and the Vue Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Creating and Registering Components”?

Define and register components globally and locally. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Creating and Registering Components” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

Creating and Registering Components
Props and Custom Events
Slots and Scoped Slots

← Back to Vue Academy