Project 9: Travel Destination Page
Vue Engineer
Builds on these lessons
Component Task
Objective
onMounted() runs a callback once the component has been inserted into the DOM — the standard place to fetch initial data or run setup that needs a real DOM node.
You're building a travel destination page.
Task: create a destination ref, and set its value inside onMounted.
Component.vue
<script setup>
import { ref, onMounted } from 'vue';
const destination = ref('');
onMounted(() => {
destination.value = 'Kyoto, Japan';
});
</script>
<template>
<h2>{{ destination }}</h2>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result