Course objectives
- The course is devoted to Vue 3 development: from using it as a small library to creating a modern SPA application;
- From the first lesson we will develop a project, on the example of which we will gradually learn the capabilities of Vue.js, the main libraries of its ecosystem and their application to solve practical problems.
Course Program
BLOCK 1
Introduction to Vue and components
At the beginning of the course we will get acquainted with Vue.js as a small library used without build systems. We will learn basic Vue and component development.
Basic concepts in Vue development.
Creating a Vue application.
Options API.
Template syntax.
Reactivity, computed properties, tracking.
Working with DOM events, attributes, form elements.
Life cycle hooks.
Component approach and describing components in Vue.
Input parameters and component events.
Slots and named component slots.
BLOCK 2
Vue in Frontend development
After learning the basics, let’s move on to the modern approach to developing JavaScript applications in Frontend development. Let’s familiarize ourselves with the different development tools in Frontend and Vue. We will understand the concept of single page applications and learn how to create them in Vue with Vue Router.
Development tools in Frontend: transpilers, linter, assemblers and others.
Single File Components in Vue (SFC).
Creating and developing Vue applications with Vue CLI.
Creating and developing Vue applications with Vite.
Single Page Applications (SPA).
Developing SPAs in Vue with Vue Router.
BLOCK 3
Getting Deeper into Vue
After getting acquainted with the tooling part, we will return to Vue component development, learn how to create wrapper components and deal with unidirectional data flow in components. In the middle of the course we’ll dive into the workings of Vue: we’ll learn more about how reactivity works and how the Options API is used outside of Options, and we’ll delve into rendering.
Wrapper components, dynamic component.
Data editing components and unidirectional data flow.
Deepening into reactivity: implementation, limitations, use outside of Vue components.
Delving into rendering: Virtual DOM, render function, JSX, key, KeepAlive component.
BLOCK 4.
Component interaction, Composition API and shared state
Let’s look at other Vue component interaction options and their applicability in different tasks. Then we’ll move on to options for reusing component code in the Options API and move to the Composition API, a new approach to component development in Vue 3. With the transition to Composition, we’ll look at options for working with the shared state of components and get to know Vuex and Pinia’s central repositories.
BLOCK 5
Course wrap-up
When Vue and the use of Vue components have been studied, let’s learn how to test their use with Jest and Vue Test Utils. At the end of the course, we’ll recall SPA problems and look at options for solving them. Finally, we will move on to the tasks of application development beyond Vue components, talk about application architecture and working with HTTP API.