Vue.js 3 and the Composition API is here!

vuejs-3-course-banner

Learn to build Vue.js 3 apps, complete with:

  • Composition API
  • TypeScript
  • Unit Testing from Hello, World
  • The Flux Architecture (Vuex)
  • Vue Router

Register for early access!

Thanks for registering!



Why is this course different?

There are a lot of Vue courses out there. However, few of them cover:

  • Composition API: Vue 3 adds the Composition API, an alternative way to build Vue components. This course focuses on the Composition API and it's benefits.
  • TypeScript: Vue 3 is now written in TypeScript, and so is all of the code in the course.
  • Unit Tests: All professional developers are expected to write tests. All the code we write in this course is paired with tests, to make sure everything behaves as expected.
  • Pacing: We progress quickly, solidifying new concepts by using them multiple times in different contexts, and by writing tests.


lachlan-miller

Teacher Profile

Lachlan has been developing applications using Vue.js since 2015. He maintains Vue Test Utils, the official testing library for Vue.js, and in the author of the the Vue Testing Handbook. Reach him via GitHub.

Testimonials

Thank you Lachlan, you've been a great help in my career.

- Dokiace

Seems like you have a knack for covering all the thingsI'm struggling with most :)

- fultonium

I think these are some of the best Vue 3 tutorials I've seen in a while!

- Rollison9

Course Content

Section 1
  1. 1.0 Prerequesite Knowledge and Housekeeping
  2. 1.1 Creating the Timeline Component
  3. 1.2 Our First Test
  4. 1.3 Reactive Updates using ref
  5. 1.4 Synchronous Tests, Asynchronous Vue
  6. 1.5 Getting Started with TDD
  7. 1.6 Filtering Posts with Computed
  8. 1.7 Refactoring with Confidence
Section 2
  1. 2.1 Load States with Suspense
  2. 2.2 A Suspenseful Test
  3. 2.3 Data Structures and Designin a Flux Store
  4. 2.4 Updating the Store State
  5. 2.5 Asynchronous Data with Axios
  6. 2.6 The Use Store Hook
  7. 2.7 Mocking Modules with Jest
Section 3
  1. 3.0 Improving the Timeline with a TimelineItem component
  2. 3.1 Extracting a TimelineItem component and using Props
  3. 3.2 Improving the TimelineItem with RouterLink
  4. 3.3 Adding a createTestVue method to avoid polluting the global Vue
  5. 3.4 Using `emitted` to test events
  6. 3.5 Using Portals to render a modal, testing with exists
  7. 3.6 Improve the Modal UI
  8. 3.7 Section Summary
Section 4
  1. 4.0 Section Preview
  2. 4.1 Adding a `/posts/edit` route
  3. 4.2 Using v-model and Creating the Layout for the PostWriter
  4. 4.3 Implementing Two way binding manually on contenteditable
  5. 4.4 Introducing `marked` to convert the markdown to HTML
  6. 4.5 Adding a test for the markdown functionality
  7. 4.6 Adding syntax highlighting with highlight.js
  8. 4.7 Dispatching an Action to Insert the New Post into the Posts state
  9. 4.8 Emitting a submitted event and dispatching a create action
  10. 4.9 Using `mocks` to fake a router and fixing the SET_POSTS mutation
Section 5
  1. 5.0 Users Sign Up, Log in and Validation
  2. 5.1 Defining the User interface
  3. 5.2 Creating new NewUser route implementing v-model on a Custom Component
  4. 5.3 Defining the Rule type and test driving the validator.ts
  5. 5.4 Integration the Validation with the ValidatorInput
  6. 5.5 Completing the Signup Component
  7. 5.6 Building the Users Store
  8. 5.7 Programmticaly show/hide Nav buttons based on User State
  9. 5.8 Login/Logout
Section 6
  1. 6.0 Finishing the App with Post Show page, Editing an Existing Post, Various Other Improvements
  2. 6.1 Adding a Show Posts page
  3. 6.2 Displaying the Post Content
  4. 6.3 Creating an isCurrentUser getter to programatically show the edit button
  5. 6.4 Allowing Posts to be Edited
  6. 6.5 Filtering the Posts based on Publication Date
  7. 6.6 Show a Sign Up Form in the Modal
  8. 6.7 Conclusion, Improvements
Conclusion
  1. Review of content, how to continue improving as a Vue.js developer and front-end engineer

Register for early access!

Thanks for registering!