Single File Components concept in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue Single File Component template section.

Vue

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

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

Amessage

BHello World

Cdata

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name without defining it

Putting JavaScript code inside the template

The <template> section contains the HTML markup. Here, we want to display the text "Hello World" inside the div.

2fill in blank

medium

Complete the code to export the component's script section with a name.

Vue

<script setup>
const name = '[1]'
</script>

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

AMyComponent

Bcomponent

CApp

DVueComp

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase names for components

Not exporting the component properly

In Vue 3 Single File Components with script setup, you can define variables directly. Here, we set the component's name as "MyComponent".

3fill in blank

hard

Fix the error in the style section to apply scoped styles.

Vue

<style [1]>
  div {
    color: blue;
  }
</style>

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

Ascoped

Bglobal

Cmodule

Dlocal

Attempts:

3 left

💡 Hint

Common Mistakes

Using "global" instead of "scoped"

Forgetting to add any attribute

Adding the scoped attribute to the style tag ensures styles apply only to this component.

4fill in blank

hard

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

Vue

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

<script setup>
import { ref } from 'vue'
const [2] = ref('Hello Vue')
</script>

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

Amessage

Bcount

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names in template and script

Not importing ref from Vue

The reactive variable is named message. We display it in the template using {{ message }}.

5fill in blank

hard

Fill all three blanks to create a computed property and use it in the template.

Vue

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

<script setup>
import { ref, computed } from 'vue'
const count = ref(0)
const [2] = computed(() => count.value [3] 1)
</script>

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

AdoubleCount

Bincremented

C+

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong operator like multiplication

Mismatching variable names between script and template

The computed property is named incremented. It adds 1 to count.value. The template displays {{ incremented }}.