Beginner LevelVue JS
What is the difference between global and local component registration in Vue?
❓ Interview Prompt: Compare global app.component() registration vs local imports in Composition API <script setup>.
Vue components must be registered before they can be rendered in templates.
1. Global Registration ('app.component()'):
•
Registered on the application instance in 'main.js': 'app.component("BaseButton", BaseButton)'.
•
Available in every template across the entire app without importing.
•
Drawback: Prevents build tools (Vite/Webpack) from tree-shaking unused components, increasing bundle size!
2. Local Registration:
•
In '<script setup>', any imported component is automatically registered locally!
•
Clean tree-shaking, explicit dependencies, and IDE autocompletion.
Code Implementation Example
html
<!-- Local Registration in <script setup> (Vue 3 standard) -->
<script setup>
// Importing automatically registers the component locally!
import CustomCard from '@/components/CustomCard.vue';
import PrimaryButton from '@/components/PrimaryButton.vue';
</script>
<template>
<CustomCard>
<PrimaryButton label="Click Me" />
</CustomCard>
</template>💡Local component registration via automatic <script setup> imports.
🎯 Interview Key Takeaway
Prefer local component imports in <script setup> to enable tree-shaking and explicit component dependencies.
#Components#Registration#Tree-Shaking#Beginner
Back to all Vue JS Questions→