Vue.js: The Composition API

Learn Vue.js 3 and the new Composition API, TypeScript, and Unit Testing by building a social blogging app, complete with code block, syntax highlighting, users and a post timeline.

Demo of what we build • Course overview • Get started for free

Section 1: Composition API and Testing Basics

8 lectures (45min)

Prerequesite Knowledge and Housekeeping

Creating the Timeline Component

Reactive Updates using ref

Synchronous Tests, Asynchronous Vue

6:01

Getting Started with TDD

3:31

Filtering Posts with Computed

6:51

Refactoring with Confidence

6:27

Section 2: Suspense and Building a Flux Store

7 lectures (33min)

Load States with Suspense

6:39

Data Structures and Designing Flux Store

6:19

Loading Posts with Axios

2:41

The useStore hook

4:05

Mocking the Backend

3:32

Routing with Vue Router

3:27

Updating the tests

6:41

Section 3: Vue Router, Creating Posts with Markdown and Syntax Highlighting

8 lectures (36min)

The New Post Route and Page

3:06

Defining the Post Writer

4:33

Template Refs and Content Editable

4:33

Rendering Markdown

3:58

Markdown to HTML with Marked

5:51

Syntax Highlighting and Performance Improvements

6:38

Emitting a Submit Event

4:10

Testing the Post Writer

4:10

Section 4: User Sign Up, Validation and Reuseble Components

8 lectures (51min)

Adding a Post to the Store

6:20

The useModal Composable

6:23

Custom Form Input with v-model

5:24

Framework Agnostic Validation

8:35

Creating the Signup Form

5:07

Form Validation and Submission

5:00

Better Plugins with Provide and Inject

6:50

Mocking Modules with Jest

8:04

Section 5: Edit Posts, Authentication and Authorization

10 lectures (51min)

Intro to Authentication and Authorization

1:53

Adding Users to the Store

5:56

Dynamic Components

4:36

Optimizing with markRaw

3:05

Vue Router Navigation Guards

5:28

Accessing the Route with useParams

7:28

Setting up the Edit Post Page

4:31

Fixing Two Subtle Bugs

5:32

Conditional Edit Button

1:48

Testing the Post Authentication and Authorization

11:12

Section 6: Finishing the Application

5 lectures (22min)

Styling the Show Post Page

4:07

Editing Posts

3:27

Testing in Isolation

5:30

Tests and Stub Components

3:47

Deploying to Production and Next Steps

5:52