Complete Vue.js 3

A fast paced, project based course on Vue.js 3.

What is this?

A fast paced course on Vue.js 3. I'll teach you everything from scratch. No prior Vue.js knowledge is necessary.

We start off with the Options API, and learn the basics of Vue.js 3. We then build two projects to practise the fundamental skills, before ramping up.

After getting a grasp of the Options API, we explore Vue.js 3's most anticipated feature - the Composition API. We also do a deep dive into Vuex and Vue Router, two of Vue's core libraries for scaling your applications.

We use the follow technologies:

Who is this for?

How do I get it?

Two ways. You can buy it on Udemy, or you can buy it from me directly via Gumroad.

Gumroad will let you download all the content in one shot, in glorious 1080p.

How much does it cost?

It costs $20 from Gumroad. Udemy will vary depending on your location (Gumroad will always be cheaper, since Udemy takes a pretty big cut of sales). I support purchasing power parity to make my content affordable to everyone. If this price is unaffordable for you, send me an email and we will make it work.

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.

Fundamentals #1: Options API

Learn about the Options API and the basics of Vue.js.

  • 1.1: Notes before starting
  • 1.2: Introduction
  • 1.3: Your First Vue.js App
  • 1.4: Adding a Template Property
  • 1.5: User Interactions with Methods
  • 1.6: Control Flow with v-if and v-else
  • 1.7: Loops with v-for
  • 1.8: Computed Properties
  • 1.9: Class Bindings
  • 1.10: Input Validation
  • 1.11: The Amazing v-model
  • 1.12: Your First Component
  • 1.13: Component Props
  • 1.14: Child-Parent Communication with Events

Project #1: Form Validation

See how to use the learnings from the previous section to build a form validation application, complete with reusable inputs, buttons and flexible validation.

  • 2.1: Single File Components
  • 2.2: A Custom Button Component
  • 2.3: Custom Input Foundations
  • 2.4: Dynamic Validation
  • 2.5: Rethinking the Form State
  • 2.6: Validating the Form
  • 2.7: Submitting the Form and Finishing Up

Project #2: Pokemon Evolutions

Create another application. This time, we fetch data from remote resource and use slots to create a reusable card component.

  • 3.1: Creating the Card Foundations
  • 3.2: Loading Remote Data with Fetch
  • 3.3: Fetching Multiple Data Sources
  • 3.4: Lifecycle Hooks
  • 3.5: Rendering Content
  • 3.6: Modular Components with Slots
  • 3.7: Reusing Code to Fetch Evolutions
  • 3.8: Better Styles with Class Bindings
  • 3.9: Separating Business Logic and Presentation Components

Fundamentals #2: Composition API

Learn Vue 3's most anticipated feature, the Composition API.

  • 4.1: Composition Fundamentals Introduction
  • 4.2: Hello, Composition API!
  • 4.3: Reactivity with ref
  • 4.4: Reactive for Complex Values
  • 4.5: Composing Computed Properties
  • 4.6: Watch and Watch Effect
  • 4.7: Before and After with watch
  • 4.8: The useNumbers Composable
  • 4.9: Open Source Library: Vue Use

Project #3: Composing a Microblog

Put your Compisition API learnings to the test and build a simple Twitter-like application, complete with hashtags and likes.

  • 5.1: Creating the Microblog Store
  • 5.2: Render Posts with the Card Component
  • 5.3: The Hashtag Component
  • 5.4: Emitting Events with the Composition API
  • 5.5: Filtering Posts with Computed
  • 5.6: Refactoring with the Posts Store
  • 5.7: Liking a Post
  • 5.8: Searching for Hashtags
  • 5.9: Mind Blowing Fefactor and Exercises

Fundamentals #3: Vue Router

Vue Router is the official router for Vue. You'll learn how to do client side routing. This enables you to build large, complex applications without a single refresh.

  • 6.1: Vue Router Fundamentals
  • 6.2: Hello Vue Router
  • 6.3: The Router Link component
  • 6.4: Children and Nested Routes
  • 6.5: Route Params with the Composition API
  • 6.6: New Post Route
  • 6.7: New Post Form
  • 6.8: usePosts Composable
  • 6.9: Redirects with Vue Router
  • 6.10: Options API Refactor

Fundamentals #4: Vuex

Learn Vuex, Vue's official state management solution.

  • 7.1: Introduction to Vuex
  • 7.2: Create a Vuex Store and State
  • 7.3: Updating State with Mutations
  • 7.4: More on Mutations
  • 7.5: Dispatching Actions
  • 7.6: Mocking the Server and Fetching Posts
  • 7.7: Showing the Current Post
  • 7.8: Vuex Getters
  • 7.9: Scaling Vuex with Modules
  • 7.10: Options API Refactor

Project #4: Capstone Project - Photo Album

Combine all of the skills you've learned to build a large, complex application, complete with routing and state management via Vuex.

  • 8.1: Introduction to the Capstone Project
  • 8.2: Setting Up Vuex
  • 8.3: Scalable Layouts with Slots
  • 8.4: Reusable Layouts
  • 8.5: Fetching Albums with Fetch
  • 8.6: Data Fetching Workflow with Vuex
  • 8.7: Creating the Album Component
  • 8.8: Fetching Thousands of Photos
  • 8.9: Adding Routing
  • 8.10: Improved Routing
  • 8.11: Routing with Router Link
  • 8.12: watchEffect and Routing Params
  • 8.13: Vuex Level Caching for Better Performance
  • 8.14: Conclusion, Exercises and Parting Words

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.