Vue Introduction

What is Vue?#

Vue (pronounced "view") is a progressive JavaScript framework for building user interfaces. "Progressive" is Vue's own word for its core design goal: you can adopt as much or as little of it as you need. Drop a single <script> tag into an existing page to sprinkle in some interactivity, or scale all the way up to a full single-page application with routing, centralized state management, and a build pipeline — the core API stays the same across that whole range.

Three ideas define Vue in practice:

• Approachable — templates look like the HTML you already know, extended with a small set of directives, rather than requiring you to learn an entirely new syntax up front.
• Reactive — you declare data, and the parts of the UI that depend on it update automatically when it changes. You don't manually push updates to the DOM.
• Incrementally adoptable — Vue scales from a plain script tag to a full framework-backed application without a rewrite in between.

Reactivity, in one example#

import { ref } from "vue";

const count = ref(0);

console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

ref() wraps a value in a reactive container. Anywhere that value is used inside a Vue template, Vue automatically tracks that usage as a dependency — so when count.value changes, every part of the UI that displayed it re-renders on its own, with no manual DOM update code anywhere. This is the mechanism behind everything else in Vue; the rest of this track is largely about how to use it well.

Installing Vue with Vite#

The official way to start a new Vue project is the create-vue scaffolding tool, which is itself built on Vite:

npm create vue@latest

This launches an interactive prompt asking whether you want TypeScript, Vue Router, Pinia (state management), testing setup, and more — answer based on what your project needs, or accept the defaults for a minimal start. Then:

cd my-vue-app
npm install
npm run dev

Vite's dev server gives you instant hot module reloading, the same as it does for React — save a .vue file and see the change immediately in the browser.

A minimal Single File Component#

Vue components are typically written as Single File Components (.vue files) — a single file combining a component's template, logic, and styles in one place:

<script setup>
import { ref } from "vue";

const message = ref("Hello, NOA Labs!");
</script>

<template>
  <div class="welcome-card">
    <h2>{{ message }}</h2>
  </div>
</template>

<style scoped>
.welcome-card {
  padding: 1rem;
  border-radius: 8px;
  background: #f5f5f5;
}
</style>

Three sections, each optional but conventionally in this order:

• <script setup> — a compile-time shorthand for the Composition API. Anything declared at the top level (variables, functions, imports) is automatically available to the template — no manual return statement needed, unlike the older Options API.
• <template> — the component's markup, using Vue's template syntax (covered in depth on the next page).
• <style scoped> — CSS that's automatically scoped to just this component, so .welcome-card here won't leak out and affect unrelated elements elsewhere in the app.

This project uses <script setup> — the modern, recommended way to write Vue 3 components — throughout.

Common mistakes#

• Forgetting .value when reading or writing a ref() in plain <script setup> JavaScript code — inside the <template>, Vue automatically unwraps refs, so you write {{ message }}, not {{ message.value }}, but in the script block itself .value is required.
• Assuming Vue requires a build step — it doesn't; Vue can be used directly via a <script> tag with no compilation for small pages, though .vue Single File Components (used throughout this app) do require a build tool like Vite.
• Treating Vue as "just a templating library" — reactivity, not templates, is Vue's core feature; the templates are simply the most common way to consume it.