Courses

Vue

Vue turns HTML templates and a little JavaScript into web apps that update by themselves. You will build an ordering app for a café, with a menu, an order and its total.

Begin

Lessons

  1. Lesson 1

    Introduction to Vue

    Find your way around a Vue app's files and the parts of a .vue file, show data, and fix errors.

    Worth 75 XP

    1. What Is Vue
    2. The Files of a Vue App
    3. The Parts of a .vue File
    4. Showing Data
    5. Quiz: The Café's Name
    6. A Button That Counts
    7. Where Mistakes Show
    8. Summary

  2. Lesson 2

    Template Syntax

    Put expressions into templates with curly braces, and set attributes, classes and styles from data.

    Worth 95 XP

    1. Expressions in Braces
    2. The Conditional Operator
    3. Attributes from Data
    4. Quiz: The Missing Logo
    5. Classes from Data
    6. Styles from Data
    7. Several Elements and Comments
    8. Summary

  3. Lesson 3

    State and Events

    Make the page change with ref() and .value, handle clicks, typing and keys, and update arrays and objects.

    Worth 120 XP

    1. State
    2. .value in the Script
    3. Quiz: A Stuck Tip Jar
    4. Click Handlers
    5. Arguments and the Event Object
    6. Typing, Keys and the Mouse
    7. Arrays in Refs
    8. Quiz: An Empty Page
    9. Objects in Refs
    10. Summary

  4. Lesson 4

    Conditions and Lists

    Choose what shows with v-if and v-show, and turn arrays into lists with v-for, filtered and sorted.

    Worth 100 XP

    1. v-if and v-else
    2. Quiz: Two Messages
    3. v-show
    4. Lists with v-for
    5. Positions and Numbers
    6. Grouping with <template>
    7. An Empty List
    8. Filtering and Sorting
    9. Summary

  5. Checkpoint

    Packing List

    Build a packing list that packs items, counts them, hides the packed ones, and removes what you don't need.

    Worth 35 XP

    What you'll build
    index.html
    The packing list for a weekend in the mountains with 3 of 7 items packed: the packed ones crossed out, each item with Pack or Unpack and Remove, and Hide packed.
    1. What to Pack
    2. How Much Is Packed
    3. Hiding and Removing

  6. Lesson 6

    Forms

    Bind text fields, drop-down lists and checkboxes with v-model, send forms, and show error messages.

    Worth 100 XP

    1. Text Fields and v-model
    2. Drop-Down Lists and Radio Buttons
    3. Checkboxes
    4. Spaces and Numbers
    5. Sending the Form
    6. Quiz: The Order Disappears
    7. Error Messages
    8. A Button That Waits
    9. Summary

  7. Lesson 7

    Computed Values and Watchers

    Compute totals and filtered lists with computed(), and run code when data changes with watch().

    Worth 80 XP

    1. Computed Values
    2. Quiz: Paying
    3. A Filtered Menu
    4. Computed or Function?
    5. Watching for Changes
    6. Changes Inside an Array
    7. Watching from the Start
    8. Summary

  8. Checkpoint

    Budget Tracker

    Build a budget tracker that checks new expenses, totals them by category, and saves the month.

    Worth 35 XP

    What you'll build
    index.html
    The Budget Tracker with its form and three expenses, groceries, a train ticket and a concert, and under them €133 spent and €267 left.
    1. Adding Expenses
    2. Totals
    3. Saving the Month

  9. Lesson 9

    Components

    Split a page into .vue components, connect them with import and export, and send them data with props.

    Worth 85 XP

    1. Your First Component
    2. Import and Export
    3. Component Names
    4. Props
    5. Props Are Read-Only
    6. A List of Components
    7. Quiz: An Empty Menu
    8. Summary

  10. Lesson 10

    Component Events

    Send events up from components with emit, keep one source of truth, and use v-model on your own components.

    Worth 70 XP

    1. Events from a Component
    2. One Source of Truth
    3. Several Events
    4. Quiz: The Plus Button
    5. v-model on a Component
    6. A Note Field
    7. Summary

  11. Lesson 11

    Slots

    Pass content into components with slots, give them fallback content, and fill named slots.

    Worth 60 XP

    1. A Component with a Slot
    2. The Parent's Data
    3. Fallback Content
    4. Named Slots
    5. Quiz: The Missing Button
    6. Summary

  12. Checkpoint

    Photo Gallery

    Build a photo gallery with tiles, a big photo in a lightbox, and buttons for the next and previous photo.

    Worth 35 XP

    What you'll build
    index.html
    The photo gallery with a photo open in the lightbox over the dimmed tiles: a fir tree, its caption and place, a close button and arrows to the previous and next photo.
    1. Photo Tiles
    2. The Big Photo
    3. Next and Previous

  13. Lesson 13

    Lifecycle and Data

    Load data in onMounted, say when loading fails, stop timers, and keep favorites when the page reloads.

    Worth 85 XP

    1. A Component's Life
    2. Loading the Menu
    3. When Loading Fails
    4. Stopping a Timer
    5. Template Refs
    6. Quiz: Too Early
    7. Favorites That Stay
    8. Summary

  14. Lesson 14

    Composables

    Move logic into composables you can reuse, such as a ref that saves itself and one that loads data.

    Worth 65 XP

    1. Your First Composable
    2. A Ref That Saves Itself
    3. A Composable for Loading
    4. Shared State
    5. Quiz: An Order of Its Own
    6. Summary

  15. Lesson 15

    Final Project

    Build a habit tracker that loads habits, shows your progress, saves what you check off, and counts days in a row.

    Worth 75 XP

    What you'll build
    index.html
    The habit tracker with 2 of 5 habits done today: a progress bar, a filter set to All, and the habits with checkboxes, the done ones crossed out.
    1. Habit Tracker
    2. Habits from a File
    3. Progress
    4. Your Own Habits
    5. Removing and Filtering
    6. Saving Habits
    7. Days in a Row
    8. Congratulations!

About the course

Vue is a popular framework for building web apps, known for being easy to start with. The course covers templates, reactive state and events, lists and conditions, forms with v-model, computed values and watchers, components with props, events and slots, loading data, and composables.

It's meant for those who know HTML, CSS and JavaScript. You build an ordering app for a café step by step, a packing list, a budget tracker and a photo gallery, and the final project is a habit tracker that remembers your progress.