DGMD E-28 Single-Page Applications & Interfaces with Vue.js

Single-Page Applications & Interfaces with Vue.js

DGMD E-28   Instructor: Susan Buck (susanbuck@fas.harvard.edu)

Upcoming Registration

The next offering of this course is Spring 2020.

For a list of topics this course covers, check out the Spring 2020 Schedule.

For general course details/logistics, continue reading the information below and then browse the topics in the menu.

View this course in the Harvard Extension School course catalog (CRN 25694)


In this course, students will learn how to build reactive, single-page applications and interfaces for the web using Vue.js, an open-source JavaScript framework.

What is a single page application (SPA)?

In a traditional website, much of the processing is done on the server, where content is loaded and then delivered to the browser for rendering. For example, imagine a site like Wikipedia.org - you click a link and you're led to a page where all the content is loaded and displayed. If you click on another link, the same process happens again, reloading all the content you see in the browser. We can categorize this approach as a multiple-page application as new content is delivered via a new page request for every action.

Now compare this experience to using a more robust web applications like Gmail where the actions we take (e.g., applying a label to a message) create an almost immediate response in the browser, changing just the content relevant to the action we took. This latter approach falls under the umbrella of a single-page application because the majority of the experience happens within a single page, without the need to entirely reload the page from the server.

Single-page applications are built with HTML/CSS and powered by JavaScript-based SPA frameworks such React, Angular, Ember, or Vue.js. In this course, we'll learn about SPA development via the lens of Vue.js but we'll also take a broad look at SPA frameworks and understand the aspects common to each such as data-binding, components, templates, routing, and more. By comparing/contrasting the various framework options, students can make informed decisions about which tool/framework is most appropriate for their next project or area of study.

Note: This course pairs well with CSCI E-15 Web Server Frameworks with Laravel/PHP where you can learn how to build a web service to act as a data source for your single-page applications.


This course is available online and delivered asynchronously.

Every Thursday by 8pm Eastern, materials for that week will be posted via a link on the schedule and will include the following content:


Go here to read about this course’s prerequisites...

Other courses by Susan Buck

I teach three courses at the Extension School: In the following “mini-class” I explain what each of these courses cover and how they relate to one another: