Registering Components
You have written BookCard.vue. Now BookList.vue wants to show several of them. Writing <BookCard /> in its template does nothing yet: Vue has to be told what the tag BookCard means. That is what registration does.
The rule
Import it to use it here;
app.componentto use it everywhere.
Local registration is the everyday way. In <script setup>, importing a component is all it takes:
<!-- BookList.vue -->
<script setup>
import BookCard from './BookCard.vue'
</script>
<template>
<section>
<BookCard />
<BookCard />
</section>
</template>The import registers BookCard for this one file. Other components cannot use it unless they import it too.
Global registration makes a component available in every template of the app. You do it once on the app instance, before mounting:
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import BaseButton from './components/BaseButton.vue'
createApp(App)
.component('BaseButton', BaseButton)
.mount('#app')Global looks convenient, but it has costs. A global component is included in the final bundle even if no page uses it, because the build tool cannot tell. And a reader of BookList.vue cannot see where BaseButton comes from. That is why local registration is the default choice.
Names: use PascalCase for component names, like BookCard. In a .vue template you may write <BookCard /> or <book-card />; both work. If you ever write templates directly inside an HTML page (an "in-DOM" template), the browser lower-cases tag names, so there you must use <book-card></book-card> with a closing tag.
The shortcut
Ask one question: "How many files need this component?" One or a few: import it where it is used. Truly every screen, and small and stable: global is allowed, though importing still works.
BookCard
Only BookList shows cards. Import it in
BookList.vue. Local.
The trap is registering globally out of habit. The app still works, but the bundle carries unused code and dependencies become invisible.
Drills
Answer fast — trust the rule.
In <script setup>, what registers BookCard for use in that file's template?
Where does app.component('BaseButton', BaseButton) make BaseButton available?
Which is a genuine downside of global registration?
You write a template directly inside index.html (an in-DOM template). How must you write BookCard's tag?
Remember
- Import in
<script setup>= local registration;app.component(name, comp)= global. - Shortcut: "how many files need it?" Few means import.
- Trap: global by habit hides dependencies and bloats the bundle.