Project 23: Weather Widget

Vue Engineer

Component Task

Objective

Review day: combine composables and computed properties — days 14 and 4 — into a reusable temperature converter.

You're building a weather widget.

Task: write a useTemperature composable taking a starting celsius value and returning it alongside a fahrenheit computed, consumed by a WeatherWidget component.

Component.vue

<!-- useTemperature.js -->
import { ref, computed } from 'vue';

export function useTemperature(celsius) {
  const c = ref(celsius);
  const fahrenheit = computed(() => (c.value * 9) / 5 + 32);
  return { c, fahrenheit };
}

<!-- WeatherWidget.vue -->
<script setup>
import { useTemperature } from './useTemperature';

const { c, fahrenheit } = useTemperature(22);
</script>
<template>
  <p>{{ c }}°C / {{ fahrenheit }}°F</p>
</template>

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

Build Output

🟢

Build your component to see the result

← Previous Next →