Project 2: Blog Layout
Vue Engineer
Builds on these lessons
Component Task
Objective
A freshly scaffolded Vue project's component is just plain constants exposed from <script setup>, rendered with {{ }} interpolation — no special setup beyond the file itself.
You're building a blog's header.
Task: declare blogTitle and postCount constants, and render both in the template.
Component.vue
<script setup>
const blogTitle = 'The Dev Journal';
const postCount = 12;
</script>
<template>
<h1>{{ blogTitle }}</h1>
<p>{{ postCount }} posts published</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result