What Vue Is, the SFC, and Vite Setup

Chapter 1

A framework that sits between React and Angular — and borrows the best ideas of each

With both React and Angular already under your belt, Vue is best understood by where it lands between them. Like React, it's component-based, flexible, and unopinionated about much of your app's structure. Like Angular, it uses an HTML template with directives (v-if, v-for) rather than JSX, and ships official solutions for routing and state. Vue's own pitch is being approachable and incrementally adoptable — and in practice it feels like Angular's template ergonomics with React's lightness.

The Single-File Component (SFC)

<!-- Greeting.vue -->
<script setup>
const name = 'Philip';
</script>

<template>
  <h1>Hello, {{ name }}!</h1>
</template>

<style scoped>
  h1 { color: #42b883; }
</style>

A Vue component lives in a .vue file — a Single-File Component — with three blocks: <script> for logic, <template> for markup, and an optional <style> for CSS, all in one file. This is a genuine middle ground: React puts markup and logic together in JSX but CSS elsewhere; Angular splits all three into separate files; Vue keeps all three together but cleanly separated by block. {{ name }} is text interpolation — identical syntax to Angular, and the same role as React's {name}.

<script setup> and the Composition API

The setup attribute on <script> enables the Composition API — the modern way to write Vue, where everything declared in the script block (variables, functions, imports) is automatically available to the template. There's no return statement, no boilerplate wiring: declare const name = 'Philip' and the template can use {{ name }} directly. This course uses <script setup> throughout.

You'll also see the Options API in older code

Older Vue tutorials (and Vue 2 code) use the Options API — a component defined as an object with data(), methods, computed, etc. as separate named sections. It's still fully supported in Vue 3, but <script setup> with the Composition API is the recommended modern default — the same kind of "modern vs legacy" choice as standalone components over NgModules in Angular, or hooks over class components in React. Recognize the Options API when you meet it; this course teaches only the Composition API.

Style Scoping — Built In

The scoped attribute on <style> confines those styles to this component only — the same automatic style encapsulation Angular gives every component, and what React needs CSS Modules or a library to achieve. Two components can both style h1 differently with zero collision, just by adding scoped.

Creating a Project with Vite

# scaffold a new Vue project
npm create vue@latest my-app

cd my-app
npm install
npm run dev

npm create vue@latest runs Vue's official scaffolding tool (built on Vite — the same build tool used throughout the React course), asking a few setup questions (TypeScript, router, Pinia — all optional and addable later). npm run dev starts the dev server with live reload, exactly as it did for React. The key generated files:

src/main.js — the entry point; mounts the root App component onto the page.
src/App.vue — the root SFC, the first component you'll edit.
index.html — the single real HTML page everything mounts into, just like React's.

Mounting the Root Component

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

createApp(App).mount('#app') is Vue's bootstrap — it takes the root component and attaches it to the <div id="app"> in index.html, the direct equivalent of React's createRoot(...).render(<App />) or Angular's bootstrapApplication(AppComponent). Everything else renders inside that root.

Concept	React	Angular	Vue
Markup style	JSX	HTML template + directives	HTML template + directives
Component file	`.jsx`	`.ts`+`.html`+`.css`	`.vue` (all three blocks)
Interpolation	`{value}`	`{{ value }}`	`{{ value }}`
Scoped styles	CSS Modules / lib	Automatic	`<style scoped>`

Coding Challenges

Challenge 1

Create a new Vue project, and edit App.vue so its template shows "Welcome, [your name]!" by interpolating a constant declared in <script setup>.

📄 View solution

Challenge 2

Build a Greeting.vue SFC with all three blocks — a name constant in script, an interpolated heading in the template, and a scoped style coloring that heading.

📄 View solution

Challenge 3

Build a second component (e.g. Footer.vue) and use it inside App.vue by importing it in <script setup> and placing its tag in the template — confirming a child component renders inside a parent.

📄 View solution

Chapter 1 Quick Reference

Vue — component-based and flexible like React, template+directive-driven like Angular
SFC (.vue file) — <script>, <template>, <style> blocks together in one file
<script setup> — the Composition API; everything declared is auto-available to the template
{{ value }} — text interpolation, identical to Angular
<style scoped> — automatic per-component style encapsulation
npm create vue@latest / npm run dev — scaffold and run (Vite-based)
createApp(App).mount('#app') — bootstraps the root component
The older Options API appears in legacy code; this course uses <script setup> throughout
Next chapter: the template, interpolation, and ref reactivity basics