Single File Components concept in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue SFC render?

Consider this Vue Single File Component (SFC). What will be displayed on the page when this component is used?

Vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const title = 'Hello Vue'
const message = ref('Welcome to Single File Components')
</script>

A <div><h1>title</h1><p>Welcome to Single File Components</p></div>

B <div><h1>Hello Vue</h1><p>Welcome to Single File Components</p></div>

C <div><h1>Hello Vue</h1><p>message</p></div>

D <div><h1>{{ title }}</h1><p>{{ message }}</p></div>

💡 Hint

Remember that {{ }} in the template shows the value of variables or refs.

The template uses {{ title }} and {{ message }}. The title is a string, so it shows 'Hello Vue'. The message is a ref with value 'Welcome to Single File Components', so it shows that text.

📝 Syntax

intermediate

Which option correctly defines a reactive property in a Vue SFC?

In Vue 3 Single File Components using