Skip to content

Vue Framework Textbook

A free, self-paced textbook in 8 chapters. Read a chapter, then drill it with the 50 companion flashcards using spaced repetition.

8 chapters · 50 cards · Updated

Chapters

  1. 1Introduction to Vue and the Reactivity System

    Vue.js is a progressive JavaScript framework designed primarily for building user interfaces. Its progressive nature means it can be adopted incrementally, allowing developers to u...

  2. 2Component API Styles: Options vs Composition

    Vue offers two main API styles for organizing component logic. The traditional Options API organizes code into predefined options such as data() for reactive state, methods for fun...

  3. 3Template Directives

    Vue's template directives are special attributes that add reactive behavior to the rendered DOM. The v-if directive conditionally renders an element, completely destroying and recr...

  4. 4Computed Properties and Watchers

    Computed properties are cached reactive derivations that automatically track the reactive values they read. When any of those dependencies change, the computed value is invalidated...

  5. 5Component Lifecycle, Props, and Emits

    Every Vue component goes through a series of lifecycle stages, and Vue exposes hooks that fire at key moments. In the Composition API these are functions like onBeforeMount, onMoun...

  6. 6Slots, Provide/Inject, and Advanced Features

    Slots are how a parent component passes template content into designated areas of a child component. The child simply renders slot, and any content placed between the child's openi...

  7. 7State Management with Pinia

    For applications whose state spans many components, Vue's official state management library is Pinia, which replaced Vuex as the recommended solution. Pinia is intentionally simple...

  8. 8Routing with Vue Router

    Vue Router is the official routing library for Vue.js, and it enables single-page application navigation by mapping URL paths to components. It supports nested routes for hierarchi...

← Back to the Vue Framework deck