Vue.js 3: The Composition API

An advanced course on Vue.js 3, the Composition API and Testing.

What is this?

This is a course on Vue.js 3, focused on the Composition API and TypeScript.

Although no Vue.js knowledge is assumed, we move fast, building out a blogging application like Reddit. Check out the final app here.

Testing is a first class citizen; you'll learn the latest version of Vue Test Utils from its author, and writing tests for everything.

We use the follow technologies:

Who is this for?

How do I get it?

You can buy it on Udemy.

Is there a preview?

You can preview the content on Udemy or get the source code here.

I have more questions!

Send me an email.

Section 1: Composition API and Testing Basics

  • Prerequesite Knowledge and Housekeeping
  • Creating the Timeline Component
  • Our First Test
  • Reactive Updates using ref
  • Synchronous Tests, Asynchronous Vue
  • Getting Started with TDD
  • Filtering Posts with Computed
  • Refactoring with Confidence

Section 2: Suspense and Building a Flux Store

  • Load States with Suspense
  • Data Structures and Designing Flux Store
  • Loading Posts with Axios
  • The useStore hook
  • Mocking the Backend
  • Routing with Vue Router
  • Updating the tests

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

  • The New Post Route and Page
  • Defining the Post Writer
  • Template Refs and Content Editable
  • Rendering Markdown
  • Markdown to HTML with Marked
  • Syntax Highlighting and Performance Improvements
  • Emitting a Submit Event
  • Testing the Post Writer

Section 4: User Sign Up, Validation and Reuseble Components

  • Adding a Post to the Store
  • The useModal Composable
  • Custom Form Input with v-model
  • Framework Agnostic Validation
  • Creating the Signup Form
  • Form Validation and Submission
  • Better Plugins with Provide and Inject
  • Mocking Modules with Jest

Section 5: Edit Posts, Authentication and Authorization

  • Intro to Authentication and Authorization
  • Adding Users to the Store
  • Dynamic Components
  • Optimizing with markRaw
  • Vue Router Navigation Guards
  • Accessing the Route with useParams
  • Setting up the Edit Post Page
  • Fixing Two Subtle Bugs
  • Conditional Edit Button
  • Testing the Post Authentication and Authorization

Section 6: Edit Posts, Authentication and Authorization

  • Styling the Show Post Page
  • Editing Posts
  • Testing in Isolation
  • Tests and Stub Components
  • Deploying to Production and Next Steps

About the author

Hi there! I'm Lachlan, Vue.js team member and quality software enthusiast.

I have taught tens of thousands of developers how to write testable JavaScript applications through my courses, books and YouTube channel. I hope you will be next!

Find me on GitHub and Twitter or by just sending me a good old fashioned email.