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.

Practice

1. What is the main purpose of defining components in Vue?

easy

A. To handle server-side rendering only

B. To create reusable pieces of UI that can be used throughout the app

C. To connect the app to a database

D. To write CSS styles for the app

Solution

1. Step 1: Understand what components do in Vue

   Components are small, reusable parts of the user interface that can be used multiple times in an app.

2. Step 2: Identify the correct purpose

   Among the options, only creating reusable UI pieces matches the role of components.

3. Final Answer:

   To create reusable pieces of UI that can be used throughout the app -> Option B

4. Quick Check:

   Components = reusable UI blocks [OK]

Hint: Components build reusable UI parts in Vue apps [OK]

Common Mistakes:

• Confusing components with styling or backend logic
• Thinking components handle database connections
• Believing components only work on the server side

2. Which of the following is the correct way to start a Vue component using the Composition API with <script setup>?

easy

A.

{{ message }}

B.

{{ message }}

C.
{{ message }}

D.

{{ message }}

Solution

1. Step 1: Recognize the <script setup> syntax

   In Vue 3, <script setup> is a special syntax that allows direct use of variables without export default.

2. Step 2: Check which option uses <script setup> correctly

   <script setup> const message = 'Hello' </script> <template> <p>{{ message }}</p> </template> declares a variable inside <script setup> and uses it in the template, which is correct.

3. Final Answer:

   <script setup> const message = 'Hello' </script> <template> <p>{{ message }}</p> </template> -> Option A

4. Quick Check:

   <script setup> uses direct variable declaration [OK]

Hint: Use

Common Mistakes:

• Using export default inside
• Declaring variables outside
• Placing <script> after <template> incorrectly

3. Given this Vue component code, what will be displayed when rendered?

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Clicked {{ count }} times</button>
</template>

medium

A. A button showing 'Clicked 0 times' initially, increasing count on each click

B. A button showing 'Clicked 1 times' initially, increasing count on each click

C. A button showing 'Clicked count times' as a literal string

D. An error because count is not reactive

Solution

1. Step 1: Understand ref and reactivity

   The variable count is a reactive reference starting at 0. Using count.value++ updates it reactively.

2. Step 2: Check the template interpolation

   The template uses {{ count }}, which Vue unwraps automatically to show the current value of count.

3. Final Answer:

   A button showing 'Clicked 0 times' initially, increasing count on each click -> Option A

4. Quick Check:

   ref count starts at 0 and updates on click [OK]

Hint: ref variables start at initial value and update reactively [OK]

Common Mistakes:

• Thinking count starts at 1 instead of 0
• Expecting literal 'count' string instead of value
• Assuming count is not reactive without .value

4. Identify the error in this Vue component code:

<script setup>
const props = defineProps({
  title: String
})

function showTitle() {
  console.log(props.title.toUpperCase())
}

showTitle()
</script>

<template>
  <h1>{{ title }}</h1>
</template>

medium

A. Missing import of defineProps

B. Calling showTitle() before props are available

C. Using title in template instead of props.title

D. Using toUpperCase() on a possibly undefined prop

Solution

1. Step 1: Analyze prop definition and usage

   defineProps({ title: String }) declares title without required: true or default value, so props.title can be undefined.

2. Step 2: Locate the error in JS code

   In showTitle(), props.title.toUpperCase() assumes title is a string, but calling toUpperCase() on undefined causes a runtime error.

3. Final Answer:

   Using toUpperCase() on a possibly undefined prop -> Option D

4. Quick Check:

   Validate props before string operations [OK]

Hint: Guard undefined props before methods like toUpperCase [OK]

Common Mistakes:

• Applying string methods to props that may be undefined
• Forgetting to import defineProps (though auto-imported in some setups)
• Assuming props are reactive variables directly

5. You want to create a Vue component that accepts a user prop object with name and age, and displays "Name: [name], Age: [age]". Which is the best way to define and use this prop in a <script setup> component?

hard

A.

Name: {{ user.name }}, Age: {{ user.age }}

B.

Name: {{ props.name }}, Age: {{ props.age }}

C.

Name: {{ props.user.name }}, Age: {{ props.user.age }}

D.

Name: {{ user.name }}, Age: {{ user.age }}

Solution

1. Step 1: Define the prop as an object with expected properties

   The prop user is an object containing name and age, so define it as an Object type and mark required if needed.

2. Step 2: Access the nested properties correctly in the template

   Use props.user.name and props.user.age to display the values inside the template.

3. Final Answer:

   Define user as an object prop and access nested properties via props.user.name and props.user.age -> Option C

4. Quick Check:

   Object prop with nested access = <script setup> const props = defineProps({ user: { type: Object, required: true } }) </script> <template> <p>Name: {{ props.user.name }}, Age: {{ props.user.age }}</p> </template> [OK]

Hint: Define object prop fully and access nested fields via props [OK]

Common Mistakes:

• Defining nested fields as separate props instead of one object
• Destructuring props incorrectly in
• Using defineProps with wrong syntax for objects