VUE Free Section Starter Challenge 20 min

1. Reactive State with ref() and reactive()

Overview: Declare reactive primitives with `ref()` and objects with `reactive()`.

Concept & Syntax Guide

In Vue 3 Composition API, `ref(val)` wraps values in a reactive proxy. In JavaScript you access `.value`, and in the template Vue unwraps it automatically.

Hands-On Practice Exercise

Initialize a Reactive Store Banner

Create a reactive ref `const brand = ref("Stro Hafta")` and render it in the template.

Target Output: Welcome to Stro Hafta

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Welcome to Stro Hafta

VUE Code Editor

1
2
3
4
5
6
7
8
9
10

<div id="app">
  <h2>Welcome to {{ brand }}</h2>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp, ref } = Vue;
createApp({
  setup() {
    const brand = ref('Stro Hafta');
    return { brand };
  }
}).mount('#app');
</script>