Course content

The adaptation of the original course is an ongoing process, the material is subject to change. To keep the integrity of the initial curriculum, the base structure remains largely the same, only selected subtopics might change to better fit the Vue ecosystem.

Part 0 - Fundamentals of web apps

In this part, we will familiarize ourselves with the practicalities of taking the course. After that we will have an overview of the basics of web development, and also talk about the advances in web application development during the last few decades.

Part 1 - Introduction to Vue

In this part, we will get to know the Vue-library, which we will be using to write the code that runs in the browser. We will also look at some features of JavaScript that are important for understanding Vue.

Part 2 - Communicating with servers

Let's continue our introduction to Vue. First, we will take a look at how to render a data collection, like a list of names, to the screen. After that, we will inspect how a user can submit data to a Vue application using HTML forms. Next, our focus shifts towards looking at how JavaScript code in the browser can fetch and handle data stored in a remote backend server. Lastly, we will take a quick look at a few simple ways of adding CSS styles to our Vue applications.

Part 3 - Programming a server with Node.JS and Express

In this part our focus shifts towards the backend, that is, towards implementing functionality on the server side of the stack. We will implement a simple REST API in Node.js by using the Express library, and the application's data will be stored in a MongoDB database. At the end of this part, we will deploy our application to the internet.

Part 4 - Testing Express servers, user administration

In this part, we will continue our work on the backend. Our first major theme will be writing unit and integration tests for the backend. After we have covered testing, we will take a look at implementing user authentication and authorization.

Part 5 - Testing Vue apps

In this part we return to the frontend, first looking at different possibilities for testing the Vue code. We will also implement token based authentication which will enable users to log in to our application.

Part 6 - State management with Vuex

So far, we have placed the application's state and state logic directly inside Vue-components. When applications grow larger, state management should be moved outside Vue-components. In this part, we will introduce the Vuex-library, which is currently the most popular solution for managing the state of Vue-applications.

Part 7 - Vue Router, Composition API, styling apps with CSS and webpack

The seventh part of the course touches on several different themes. First, we'll get familiar with Vue Router. Vue router helps us divide the application into different views that are shown based on the URL in the browser's address bar. In Version 3 Vue introduced the Composition API, which offers an alternative way to develop and structure components. We will take a closer look how to use it and show the differences to the Option API we used until this point. After this, we'll look at a few more ways to add CSS-Styles to Vue applications. During the entire course we've used the Vue CLI to generate the body of our applications. This time we'll take a look under the hood: We will learn how Webpack works and how we can use it to configure the application ourselves. We shall also have a look on lifecycle hooks.

Part 8 - GraphQL

This part of the course is about GraphQL, Facebook's alternative to REST for communication between browser and a server.

Part 9 - TypeScript

This part is all about TypeScript: An open-source typed superset of JavaScript developed by Microsoft that compiles to plain JavaScript.

In this part we will be using the tools previously introduced to build end-to-end features to an existing ecosystem with linters predefined and an existing codebase writing TypeScript. After doing this part you should be able to understand, develop and configure projects using TypeScript.