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.