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

Practice - 5 Tasks

1fill in blank

easy

Complete the code to globally register a Vue component named 'MyButton'.

Vue

import { createApp } from 'vue';
import App from './App.vue';
import MyButton from './components/MyButton.vue';

const app = createApp(App);
app.[1]('MyButton', MyButton);
app.mount('#app');

Drag options to blanks, or click blank then click option'

Acomponent

BregisterComponent

Cuse

Dinstall

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'registerComponent' which is not a Vue method.

Using 'use' which is for plugins, not components.

In Vue 3, the component method on the app instance is used to globally register a component.

2fill in blank

medium

Complete the code to locally register the 'MyCard' component inside the components option.

Vue

<script setup>
import MyCard from './MyCard.vue';
</script>

<script>
export default {
  components: {
    [1]: MyCard
  }
}
</script>

Drag options to blanks, or click blank then click option'

ACard

Bmy-card

CMyCard

Dcard

Attempts:

3 left

💡 Hint

Common Mistakes

Using kebab-case like 'my-card' as the key in components object.

Using a different name that doesn't match the import.

When locally registering components, the key in the components object is usually the component's PascalCase name.

3fill in blank

hard

Fix the error in the code by completing the blank to correctly register the component locally.

Vue

<script>
import UserProfile from './UserProfile.vue';
export default {
  [1]: {
    UserProfile
  }
}
</script>

Drag options to blanks, or click blank then click option'

Aimports

Bcomponents

Cregister

Dcomponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' which is singular and invalid here.

Using 'register' or 'imports' which are not Vue options.

The correct option to locally register components in Vue is the components property.

4fill in blank

hard

Fill both blanks to complete the code that globally registers two components 'HeaderComp' and 'FooterComp'.

Vue

import { createApp } from 'vue';
import App from './App.vue';
import HeaderComp from './HeaderComp.vue';
import FooterComp from './FooterComp.vue';

const app = createApp(App);
app.[1]('HeaderComp', HeaderComp);
app.[2]('FooterComp', FooterComp);
app.mount('#app');

Drag options to blanks, or click blank then click option'

Acomponent

Buse

Cregister

Dinstall

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use' which is for plugins, not components.

Using 'register' or 'install' which are not Vue app methods.

Use the component method twice to globally register multiple components on the app instance.

5fill in blank

hard

Fill all three blanks to complete the code that locally registers 'NavBar', uses it in the template, and globally registers 'FooterBar'.

Vue

<template>
  <NavBar />
  <FooterBar />
</template>

<script>
import NavBar from './NavBar.vue';
import FooterBar from './FooterBar.vue';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.[1]('FooterBar', FooterBar);

export default {
  [2]: {
    [3]: NavBar
  }
};

app.mount('#app');
</script>

Drag options to blanks, or click blank then click option'

Acomponent

Bcomponents

CNavBar

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use' instead of 'component' for global registration.

Using wrong keys in components object.

Not matching component names exactly.

Globally register 'FooterBar' with component, locally register 'NavBar' inside the components option, and use the exact component name 'NavBar' as the key.

Practice

1. What is the main difference between global and local component registration in Vue?

easy

A. Global registration requires importing components manually, local does not.

B. Local registration makes a component available everywhere, global limits it to one component.

C. Global registration makes a component available everywhere, local limits it to one component.

D. Local registration automatically registers components globally.

Solution

1. Step 1: Understand global registration

   Global registration means the component can be used in any template without importing it again.

2. Step 2: Understand local registration

   Local registration means the component is only available inside the component where it is registered.

3. Final Answer:

   Global registration makes a component available everywhere, local limits it to one component. -> Option C

4. Quick Check:

   Global = everywhere, Local = one component [OK]

Hint: Global = everywhere, local = one place only [OK]

Common Mistakes:

• Confusing global with local availability
• Thinking local registration is automatic
• Assuming global requires manual import every time

2. Which of the following is the correct syntax to register a component locally inside a Vue component?

easy

A. export default { globalComponents: { MyComponent } }

B. Vue.component('MyComponent', MyComponent)

C. import MyComponent from './MyComponent.vue';

D. components: { MyComponent }

Solution

1. Step 1: Identify local registration syntax

   Local registration uses the components option inside the component definition object.

2. Step 2: Match correct syntax

   The syntax is components: { MyComponent } to register locally.

3. Final Answer:

   components: { MyComponent } -> Option D

4. Quick Check:

   Local registration uses components: { } [OK]

Hint: Local registration uses components: { ComponentName } [OK]

Common Mistakes:

• Using Vue.component() for local registration
• Confusing import statement with registration
• Trying to use globalComponents option which doesn't exist

3. Given this code, what will be the output when rendering <ParentComponent/>?

const ChildComponent = {
  template: '
Child here
'
}

const ParentComponent = {
  template: '
',
  components: { ChildComponent }
}

app.component('parent-component', ParentComponent)
app.mount('#app')

medium

A. Child here

B. Error: Unknown custom element

C.

D. Child here

Solution

1. Step 1: Check local registration in ParentComponent

   ChildComponent is registered locally inside ParentComponent using components: { ChildComponent }.

2. Step 2: Understand template rendering

   The tag inside ParentComponent's template will render ChildComponent's template

   Child here

   only if the tag name matches the registered component name in kebab-case.

3. Step 3: Identify the issue

   The component is registered as ChildComponent but used as , which Vue treats as a different tag. Since 'child-component' is not globally registered, Vue will throw an unknown custom element error.

4. Final Answer:

   Error: Unknown custom element <child-component> -> Option B

5. Quick Check:

   Component names are case-sensitive and must match usage [OK]

Hint: Component names must match tag names exactly or use kebab-case [OK]

Common Mistakes:

• Assuming PascalCase component names automatically match kebab-case tags
• Forgetting to register components globally when using kebab-case tags
• Expecting local registration to work with mismatched tag names

4. What is wrong with this Vue code snippet?

const app = Vue.createApp({})

app.component('MyButton', {
  template: 'Click me'
})

const AnotherComponent = {
  template: ''
}

app.component('AnotherComponent', AnotherComponent)

app.mount('#app')

medium

A. The tag inside AnotherComponent template should be lowercase .

B. MyButton component is not registered globally.

C. AnotherComponent is missing local registration of MyButton.

D. Vue.createApp() cannot register components.

Solution

1. Step 1: Check component registration

   MyButton is registered globally using app.component('MyButton', ...), so it is available everywhere.

2. Step 2: Check template tag casing

   Vue requires component tags in templates to be kebab-case or PascalCase but HTML is case-insensitive, so should be .

3. Final Answer:

   The <MyButton /> tag inside AnotherComponent template should be lowercase <my-button />. -> Option A

4. Quick Check:

   Component tags must be kebab-case in templates [OK]

Hint: Use kebab-case for component tags in templates [OK]

Common Mistakes:

• Using PascalCase tags directly in templates
• Thinking global registration needs import in every component
• Assuming Vue.createApp() can't register components

5. You have a button component used in many places and a modal component used only inside one page component. How should you register them for best practice?

hard

A. Register the button component globally and the modal component locally inside the page component.

B. Register both components globally for consistency.

C. Register both components locally inside each component that uses them.

D. Register the modal component globally and the button component locally.

Solution

1. Step 1: Consider usage frequency

   The button is used many places, so global registration avoids repeated imports and registrations.

2. Step 2: Consider component scope

   The modal is used only inside one page component, so local registration keeps scope limited and reduces global clutter.

3. Final Answer:

   Register the button component globally and the modal component locally inside the page component. -> Option A

4. Quick Check:

   Global for many uses, local for few uses [OK]

Hint: Global for shared, local for limited use components [OK]

Common Mistakes:

• Registering rarely used components globally unnecessarily
• Registering widely used components locally repeatedly
• Ignoring app size and performance considerations