Module 1: Vue Foundations

The Vue Philosophy

Vue is a JavaScript framework for building user interfaces. It was created by Evan You and first released in 2014, and it is developed as an independent open-source project. Vue is known for being approachable: you can add it to a single page with one script tag, or use it to build a full single-page application. Understanding the ideas behind Vue will make every feature you learn later feel logical rather than magical.

Declarative rendering

Without a framework, updating a page means finding elements and changing them by hand. Imagine a small shop page that shows a cart count. Every time an item is added, you would write code like document.querySelector("#count").textContent = cart.length, and you would need to remember to do the same everywhere the count appears.

Vue is declarative. You describe in a template what the page should show based on your data, and Vue keeps the page up to date when the data changes:

<p>Items in cart: {{ cart.length }}</p>

You never tell Vue how to update that paragraph. When cart changes, Vue notices and re-renders the parts of the page that depend on it. This is the heart of Vue.

Reactivity: data that the page watches

Vue's core feature is reactivity. Data you give to Vue becomes reactive: Vue tracks which parts of the page use each piece of data, and when a value changes, only those parts update. You simply change data with normal JavaScript, such as this.count++ or items.push(item), and the page follows. You will see exactly how this works in the next lesson.

The progressive framework

Vue describes itself as a progressive framework. You can adopt as much or as little as you need:

This course follows the same path: you start with Vue on a single page, move to components, and finish with a full application built with Vite, Vue Router and Pinia.

Templates, components and single-file components

Vue templates are valid HTML enhanced with special syntax, which makes them easy to read for anyone who knows HTML. Pages are built from components: self-contained pieces with their own template, logic and styles. In real projects, each component lives in a .vue file called a single-file component:

<script>
export default {
  data() {
    return { name: "Amina" };
  },
};
</script>

<template>
  <h2>Hello, {{ name }}</h2>
</template>

<style scoped>
h2 { color: #0b6e4f; }
</style>

Logic, markup and styles for one piece of UI sit together, and scoped styles apply only to that component.

Two API styles

Vue 3 offers two ways to write component logic. The Options API organises code into options such as data, methods and computed. It is beginner-friendly and you will see it in many existing projects. The Composition API uses functions such as ref and computed, usually inside <script setup>, and makes complex logic easier to organise and reuse. Both are fully supported and use the same reactivity system underneath. This course starts with the Options API because it makes the concepts clear, then teaches the Composition API so you can read and write both.

A worked example: a tiny counter on any page

Save this as an HTML file and open it in a browser. No installation is needed.

<div id="app">
  <p>Orders today: {{ orders }}</p>
  <button @click="orders++">Add order</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  Vue.createApp({
    data() {
      return { orders: 0 };
    },
  }).mount("#app");
</script>

Click the button and the number updates. You changed data; Vue updated the page. Note that the CDN link above loads the latest Vue 3 development build, which is ideal for learning. For production pages you would pin an exact version and use the production build.

Common mistakes to avoid

• Manipulating the DOM directly with document.querySelector inside a Vue app. Change the data and let Vue update the page.
• Confusing Vue 2 and Vue 3 tutorials. Vue 2 reached end of life at the end of 2023. Make sure examples use createApp, which signals Vue 3.
• Mixing API styles randomly in one component. Pick one per component and be consistent within a project.
• Starting with a full build setup before you understand the basics. The CDN version is fine for learning.