Component registration (global vs local) in Vue - Quick Revision & Key Differences

Recall & Review

beginner

What is global component registration in Vue?

Global component registration means you register a component once and it can be used anywhere in your Vue app without importing it again.

beginner

What is local component registration in Vue?

Local component registration means you register a component only inside the component where you want to use it. You import and declare it in that component's setup.

intermediate

How do you register a component globally in Vue 3?

You use app.component('ComponentName', ComponentObject) in your main.js or main.ts file before mounting the app.

intermediate

Why might you prefer local registration over global registration?

Local registration keeps your app organized and avoids loading unused components everywhere, which can improve performance and clarity.

beginner

Show a simple example of local component registration in Vue 3 using <script setup>.

<pre><script setup>
import ChildComponent from './ChildComponent.vue'
</script></pre>

In <script setup>, you just import the component and use it directly in the template.

Where do you register a global component in Vue 3?

A Inside the component's <style> section

B Inside the component's <template> section

C In main.js or main.ts before app.mount()

D In the browser console

Global components are registered in the main entry file before mounting the app.

What is a benefit of local component registration?

A It allows using components without importing them

B It automatically registers components globally

C It disables component usage

D It keeps components only where they are needed

Local registration limits component usage to where they are imported, improving organization.

Which Vue 3 syntax allows you to use components without declaring them in a components object?

A <script setup>

B Options API

C Global registration only

D Vue 2 syntax