Project 1: Portfolio

Vue Engineer

Builds on these lessons

Component Task

Objective

A Vue single-file component (.vue) combines its logic and template in one file. <script setup> is the modern, concise way to write the logic block — every top-level binding is automatically available to the template.

You're building the root of a portfolio site.

Task: declare a name constant set to 'Alex Rivera', and render it inside an <h1>.

Component.vue

<script setup>
const name = 'Alex Rivera';
</script>

<template>
  <h1>{{ name }}</h1>
</template>

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

Build Output

🟢

Build your component to see the result

← Previous