Vue.js Introduction and Setup

Vue.js is a progressive JavaScript framework for building user interfaces. Unlike monolithic frameworks, Vue is designed to be incrementally adoptable: you can sprinkle it onto a single page to add interactivity, or use it to power a full single-page application with routing, state management, and a build pipeline. Vue 3, the current major version, is fast, small (around 34 KB min+gzip), and built around a reactivity system that automatically keeps your UI in sync with your data.

Why Choose Vue?

Gentle learning curve. If you know HTML, CSS, and basic JavaScript, you can be productive in a day.
Reactivity built in. Change a piece of data and every part of the page that uses it updates automatically.
Single File Components. Templates, logic, and styles live together in one .vue file.
A complete ecosystem. Vue Router for navigation, Pinia for state, and Vite for lightning-fast builds are all officially maintained.

Two Ways to Use Vue

1. The CDN approach (no build step)

Perfect for experiments or enhancing an existing page. Drop a script tag into any HTML file:

html

<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp, ref } = Vue
  createApp({
    setup() {
      const message = ref('Hello Vue 3!')
      return { message }
    }
  }).mount('#app')
</script>

Open the file in a browser and you will see Hello Vue 3! rendered. The double curly braces are Vue's text interpolation syntax, and ref() creates a reactive value.

2. A real project with Vite

For anything beyond a demo, scaffold a project with the official tooling. You need Node.js 18 or newer installed:

bash

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

The scaffolding wizard asks whether you want TypeScript, Vue Router, Pinia, and testing tools -- you can say no to everything for now. npm run dev starts a dev server (usually at http://localhost:5173) with hot module replacement, so edits appear in the browser instantly without a full reload.

Anatomy of a Single File Component

Open src/App.vue and you will find the three building blocks of every Vue component:

vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button { font-weight: bold; }
</style>

<script setup> is the modern Composition API syntax. Anything you declare here is automatically available in the template.
<template> holds your HTML with Vue's extensions such as {{ count }} and @click.
<style scoped> keeps CSS local to this component so styles never leak.

How the App Boots

src/main.js is the entry point. It creates the application instance and mounts it onto the #app element in index.html:

import { createApp } from 'vue'
import App from './App.vue'

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

Every Vue app starts exactly like this: one root component, one mount call. Plugins such as the router or Pinia are registered on the app instance before mount() is called.

Recommended Tooling

Install the Vue - Official extension for VS Code (formerly Volar). It provides syntax highlighting, IntelliSense, and error checking inside .vue files. In the browser, add the Vue Devtools extension to inspect component trees, props, and reactive state while you develop.

Key Takeaways

Vue 3 is a progressive framework: start small with a CDN script or go all-in with a Vite project.
npm create vue@latest scaffolds a modern project with a dev server and hot reload.
Single File Components combine template, logic, and scoped styles in one .vue file.
createApp(App).mount('#app') is how every Vue application boots.
<script setup> with the Composition API is the recommended way to write components today.

Next up: in Template Syntax and Reactivity we will dig into interpolation, expressions, and how Vue's reactivity system tracks and updates your data.