Defining components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue component using the Composition API.

Vue

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

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click=[1]>Clicked {{ count }} times</button>
</template>

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

Aincrement

Bcount

Cref

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the variable name instead of the function name in the click event.

Trying to access count.value directly in the template.

The @click event should call the increment function to increase the count.

2fill in blank

medium

Complete the code to import and register a component in Vue 3 with

Vue

<script setup>
import [1] from './MyButton.vue'
</script>

<template>
  <[2] />
</template>

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

Abutton

BButton

Cmy-button

DMyButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or kebab-case in the import statement.

Using a different tag name than the imported component.

You import the component by its PascalCase name and use the same name in the template.

3fill in blank

hard

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

Vue

<script setup>
const message = 'Hello Vue!'
</script>

<template>
  <p>{{ [1] }}</p>
</template>

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

Amsg

Bmessage

CMessage

Dthis.message

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different variable name than declared.

Trying to use this.message inside the template.

The variable defined in script setup is message. Use it exactly in the template.

4fill in blank

hard

Fill both blanks to define a reactive property and display it in the template.

Vue

<script setup>
import { [1] } from 'vue'
const count = [2](0)
</script>

<template>
  <p>Count is: {{ count }}</p>
</template>

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

Aref

Breactive

C0

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive for a primitive value.

Not importing ref from Vue.

Use ref to create a reactive value and initialize it with 0.

5fill in blank

hard

Fill all three blanks to define a component with a prop and display it.

Vue

<script setup>
defineProps({
  [1]: {
    type: String,
    required: true
  }
})
</script>

<template>
  <h1>{{ [2] }}</h1>
  <p>{{ [3] }}</p>
</template>

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

Atitle

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the prop in script and template.

Trying to display a variable not defined as a prop.

The prop is named title. Use title to display the heading and message for the paragraph.