What are Vue components and how do you register them globally vs locally?
Learn what Vue components are and how to register them globally with app.component or locally, plus the trade-offs for bundle size and maintainability.
Expected Interview Answer
Vue components are reusable, self-contained UI building blocks that bundle template, logic, and styles, and they can be registered globally with app.component() so any template can use them, or locally in a component's components option so only that component can.
Global registration makes a component available everywhere in the app without importing it, which is convenient but keeps the component in the bundle even if unused and can hide dependencies. Local registration imports and lists a component only where it is needed, which keeps relationships explicit and lets bundlers tree-shake unused components, making it the recommended default for most applications.
- Reusable UI split into small, focused pieces
- Local registration keeps dependencies explicit
- Better tree-shaking and smaller bundles locally
- Global registration reduces boilerplate for ubiquitous components
- Clear separation of concerns per component
AI Mentor Explanation
Vue components are like specialist players you can field again and again. Global registration is naming a twelfth man available to every match in the season without a fresh contract, while local registration is picking a player only for the specific game that needs him, keeping each team sheet honest about exactly who is on the field.
Step-by-Step Explanation
Step 1
Define a component
Create a single-file component (.vue) or an object with template, setup/data, and props.
Step 2
Choose a scope
Decide whether the component is used everywhere (global) or only in specific parents (local).
Step 3
Register globally
Call app.component('MyButton', MyButton) so every template in the app can use <MyButton /> without importing.
Step 4
Register locally
Import the component and add it to the components option (Options API) or use it directly in <script setup>.
Step 5
Use in template
Reference the component by its registered name; local registration keeps the dependency visible and tree-shakeable.
What Interviewer Expects
- Definition of a component as a reusable UI unit
- Correct syntax for app.component() global registration
- Correct local registration via the components option or script setup
- Trade-offs of global versus local registration
- Awareness that script setup auto-registers imported components locally
Common Mistakes
- Registering everything globally and bloating the bundle
- Forgetting to import a component before local registration
- Mismatching the registered name and the tag used in the template
- Assuming global components are tree-shaken away when unused
Best Answer (HR Friendly)
“Vue components are reusable pieces of an interface, like a button or a card, that you build once and use many times. You can make a component available everywhere in the app (global) or only inside the specific parts that need it (local), and local is usually preferred for cleaner, smaller apps.”
Code Example
import { createApp } from 'vue'
import App from './App.vue'
import MyButton from './MyButton.vue'
const app = createApp(App)
app.component('MyButton', MyButton)
app.mount('#app')import MyButton from './MyButton.vue'
export default {
components: { MyButton },
template: '<MyButton />'
}Follow-up Questions
- Why is local registration preferred for tree-shaking?
- How does <script setup> handle component registration?
- How do you pass data into a component with props?
- What is the difference between props and slots?
- How do you emit events from a child component to a parent?
MCQ Practice
1. Which method registers a component globally in Vue 3?
app.component('Name', Component) registers a component globally so any template in the app can use it without importing.
2. What is a key advantage of local registration?
Local registration keeps dependencies explicit and lets bundlers remove components that are never used, shrinking the bundle.
3. In <script setup>, how is an imported component registered?
With <script setup>, any imported component is automatically available in the template as a local registration.
Flash Cards
What is a Vue component? — A reusable, self-contained UI unit bundling template, logic, and styles.
How do you register globally? — app.component('Name', Component) makes it usable in every template without importing.
How do you register locally? — Add it to the components option, or just import it in <script setup>.
Why prefer local registration? — It keeps dependencies explicit and lets bundlers tree-shake unused components.