Single-File Components

Three blocks

A .vue file usually has template (markup), script (logic), and optional style (CSS).

<script setup>
const title = "Hello Vue";
</script>

<template>
  <h1>{{ title }}</h1>
</template>

<style scoped>
h1 {
  color: #0b3d2e;
}
</style>

script setup

The modern beginner-friendly style. Top-level bindings are available in the template automatically.

scoped styles

scoped limits CSS to this component so class names do not leak across the app.

Export default (options API)

Older tutorials use an options object with data, methods, and computed. This course focuses on <script setup>, and notes options where helpful.