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
  • Typesafe 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 is one of the maintainers of Vue Test Utils, the official testing library for Vue.js, and the author of the Vue Testing Handbook. Reach him via GitHub.

Course Content

Section 1
  1. 1.1 Getting Setup
  2. 1.2 Creating the TopNav component
  3. 1.3 Using the Composition API
  4. 1.4 Adding Bulma
  5. 1.5 Rendering the Timeline component and Tabs with Vue Router
  6. 1.6 Creating reactive tabs with `ref`
  7. 1.7 Intro to Vue Test Utils - Testing the Timeline component
  8. 1.8 Improving the test with data attributes and await nextTick
Section 2
  1. 2.0 Typesafe Vuex with `vuex-smart-module`
  2. 2.1 Creating the Posts Store
  3. 2.2 Testing the Posts Mutation
  4. 2.3 Writing a Type Safe Action
  5. 2.4 Consuming a Vuex store with the Composition API
  6. 2.5 Calling an Action and Access the Posts with `computed`
  7. 2.6 `ref` vs `computed`
  8. 2.7 Accessing Vuex State using Getters
  9. 2.8 Mocking a Vuex store using `jest.mock`
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!