Project 3: Recipe Page

Vue Engineer

Builds on these lessons

Component Task

Objective

ref() wraps a value so Vue can track reads and writes to it — mutating .value automatically re-renders anything in the template that uses it.

You're building a recipe page's serving-size control.

Task: create a servings ref starting at 2, and an addServing function that increments it on a button click.

Component.vue

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

const servings = ref(2);
function addServing() {
  servings.value++;
}
</script>

<template>
  <p>Servings: {{ servings }}</p>
  <button @click="addServing">+1 Serving</button>
</template>

* Hint: Correct characters turn green, incorrect ones turn red.

Build Output

🟢

Build your component to see the result

← Previous Next →