Why components are essential in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue component named 'HelloWorld'.

Vue

<script setup>
import { defineComponent } from 'vue'

export default [1]({
  name: 'HelloWorld'
})
</script>

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

Aref

BcreateApp

CdefineComponent

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using createApp instead of defineComponent.

Trying to use ref or reactive to define a component.

The defineComponent function is used to define a Vue component in the Composition API.

2fill in blank

medium

Complete the code to use the 'HelloWorld' component inside the template.

Vue

<template>
  <div>
    <[1] />
  </div>
</template>

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

AHelloWorld

Bhello-world

ChelloWorld

DHello_World

Attempts:

3 left

💡 Hint

Common Mistakes

Using kebab-case instead of PascalCase in the template.

Using incorrect casing that does not match the component name.

In Vue templates, component names are case-sensitive and usually PascalCase is used when imported as components.

3fill in blank

hard

Fix the error in the component registration by completing the code.

Vue

<script setup>
import HelloWorld from './HelloWorld.vue'

const app = [1]()
app.component('HelloWorld', HelloWorld)
app.mount('#app')
</script>

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

Aref

BdefineComponent

Creactive

DcreateApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using defineComponent instead of createApp for app creation.

Trying to register components without creating an app instance.

The createApp function creates a Vue application instance where components can be registered.

4fill in blank

hard

Fill both blanks to create a reusable button component with a click event.

Vue

<template>
  <button @[1]="[2]">Click me</button>
</template>

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

Aclick

BhandleClick

Csubmit

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'submit' instead of 'click' for the event.

Using 'onClick' which is not the Vue event syntax.

The @click directive listens for click events, and handleClick is the method called when clicked.

5fill in blank

hard

Fill all three blanks to pass a prop named 'title' and display it inside the component.

Vue

<template>
  <h1>[1]</h1>
</template>

<script setup>
const props = defineProps({
  [2]: String
})

console.log(props.[3])
</script>

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

Atitle

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the prop in template and script.

Forgetting to define the prop in defineProps.

The prop name 'title' is used consistently in the template, props definition, and console log.