Component registration (global vs local) in Vue - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a locally registered component is used outside its parent?

Consider a Vue 3 app where ChildComp is registered locally inside ParentComp. What will happen if you try to use <ChildComp /> inside App.vue without registering it globally?

Vue

<script setup>
import ParentComp from './ParentComp.vue'
</script>
<template>
  <ParentComp />
  <ChildComp />
</template>

A The app will compile but <code>ChildComp</code> will render as plain text <code>&lt;ChildComp /&gt;</code>.

B Vue will render a blank space where <code>ChildComp</code> is used without errors.

C Vue will log a console warning: <code>Failed to resolve component: ChildComp</code>.

D The <code>ChildComp</code> will render normally because local registration is global by default.

💡 Hint

Think about where components are known and registered in Vue.

Locally registered components are only known inside the component where they are registered. Using them outside without global registration causes Vue to not recognize the tag, resulting in a console warning.

📝 Syntax

intermediate

Which option correctly registers a component globally in Vue 3?

You want to register MyButton globally so it can be used anywhere in your app without importing. Which code snippet does this correctly?

A app.component('MyButton', MyButton)

B app.use(MyButton)

C app.registerComponent('MyButton', MyButton)

D app.globalComponent('MyButton', MyButton)

💡 Hint

Look for the official Vue 3 method to register global components.

The app.component() method registers a component globally in Vue 3. Other options are not valid Vue API methods.

❓ state_output

advanced

What is the rendered output when a local component is registered with a different name?

Given this code, what will be rendered inside App.vue?

// ChildComp.vue
<template><div>Hello from Child</div></template>

// ParentComp.vue
<script setup>
import CustomChild from './ChildComp.vue'
</script>
<template>
  <CustomChild />
</template>

// App.vue
<template>
  <ParentComp />
</template>

A Nothing renders because the component name is mismatched

B <customchild></customchild>

C Runtime error: Unknown custom element <CustomChild>

D <div>Hello from Child</div>

💡 Hint

Check how local registration names affect usage inside the same component.

Inside ParentComp, the component is registered as CustomChild and used as such, so it renders correctly. The name change only affects usage inside ParentComp.

🔧 Debug

advanced

Why does this globally registered component fail to render?

You registered MyWidget globally but when you use <my-widget /> in your template, nothing shows. Why?

const app = createApp(App)
app.component('MyWidget', MyWidget)
app.mount('#app')

A Vue automatically converts PascalCase to kebab-case, so <code>&lt;my-widget /&gt;</code> should work; issue is elsewhere.

B Component names are case-sensitive; use <code>&lt;MyWidget /&gt;</code> instead of kebab-case.

C You must register components in kebab-case strings to use kebab-case tags.

D The component must be imported with a .vue extension to render.

💡 Hint

Think about Vue's handling of component names in templates.

Vue automatically converts PascalCase component names to kebab-case in templates, so <my-widget /> is valid for 'MyWidget'. The problem is likely elsewhere, such as the component code or mounting.

🧠 Conceptual

expert

Why prefer local registration over global in large Vue apps?

In a large Vue 3 app, why is local component registration often preferred over global registration?

A Local registration allows components to be used anywhere without importing, reducing code size.

B Local registration improves app startup time by loading only needed components per view.

C Global registration causes components to lose reactivity and state management features.

D Global registration automatically scopes CSS which can cause style conflicts.

💡 Hint

Think about performance and code organization in big apps.

Local registration helps keep the app lightweight by only loading components where needed, improving startup time and maintainability. Global registration loads all components upfront, which can slow down the app.