Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)

Video description

This course is for developers who want to move fast. We cover the traditional way of building Vue apps-the Options API-as well as the new Composition API and even see how you can mix and match them together.

There are 8 modules in this course; 4 introduce fundamental skills (Options API, Composition API, Vuex, and Vue Router). The remaining four modules are projects so that you can see how to apply the fundamental skills in real apps.

After learning both Options and Composition API, we will see how to use them both with Vuex and Vue Router and talk about the different use-cases and trade-offs to consider.

Finally, as we progress through, our focus starts to shift from not only how to build apps with Vue but also to thinking about how we architect things, how components should communicate, where data should be saved (also known as state management), and how it flows through the app.

After covering Vue, we will look at Vuex, Vue’s state management solution, and Vue Router, for front-end routing. The course culminates with a capstone project, using the three core Vue libraries (Vue, Vuex, Vue Router) to build an application.

By the end of this course, you will gain a solid foundation in coding with Vue.js and apply these skills in your future projects.

What You Will Learn

  • Build applications using Vue.js
  • Create reusable components
  • Use Vue router for front-end routing
  • Design patterns
  • Understand Options and Composition API


This course is suitable for beginner- or intermediate-level web developers. Developers looking to try out new Vue.js 3 features can also opt for this course.

Basic knowledge of web technologies (HTML/CSS/JS) and terminal proficiency is required.

About The Author

Lachlan Miller: Lachlan Miller is a full-stack software developer, passionate about open-source, test-driven development and mentoring. He has been contributing to the Vue.js open-source community since 2016 and is the maintainer of Vue Test Utils, the official testing library for Vue.js.

Lachlan has worked with small and large teams, as both a full stack developer as well as a mentor, providing training and guidance on designing greenfield applications, as well as seamlessly and safely transitions existing applications into new, highly dynamic modern web apps.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Course Introduction
    1. Introduction
    2. Setting Up
    3. Your First Vue.js App
    4. Adding a Template Property
    5. User Interactions with Methods
    6. Control Flow with v-if and v-else
    7. Loops with v-for
    8. Computed Properties
    9. Class Bindings
    10. Input Validation
    11. The Amazing v-model
    12. Your First Component
    13. Component Props
    14. Child-Parent Communication with Events
  2. Chapter 2 : Project 1: User Sign-up Form with Validation
    1. Project 1: User Sign-up Form w/ Validation Introduction
    2. Single File Components
    3. A Custom Button Component
    4. Custom Input Foundations
    5. Dynamic Validation
    6. Rethinking the Form State
    7. Validating the Form
    8. Submitting the Form and Finishing Up
  3. Chapter 3 : Project 2: Pokémon Evolutions
    1. Project 2: Pokémon Evolutions Introduction
    2. Creating the Card Foundations
    3. Loading Remote Data with Fetch
    4. Fetching Multiple Data Sources
    5. Lifecycle Hooks
    6. Rendering Content
    7. Modular Components with Slots
    8. Reusing Code to Fetch Evolutions
    9. Better Styles with Class Bindings
    10. Separating Business Logic and Presentation Components
  4. Chapter 4 : Composition Fundamentals
    1. Composition Fundamentals Introduction
    2. Hello, Composition API!
    3. Reactivity with ref
    4. Reactive for Complex Values
    5. Composing Computed Properties
    6. Watch and Watch Effect
    7. Before and After with Watch
    8. The useNumbers Composable
    9. Open-Source Library: Vue Use
  5. Chapter 5 : Project 3: Composing a Microblog
    1. Project 3: Microblog (with the Composition API)
    2. Creating the Microblog Store
    3. Render Posts with the Card Component
    4. The Hashtag Component
    5. Emitting Events with the Composition API
    6. Filtering Posts with Computed
    7. Refactoring with the Posts Store
    8. Liking a Post
    9. Searching for Hashtags
    10. Mind Blowing Refactor and Exercises
  6. Chapter 6 : Vue Router Fundamentals
    1. Vue Router Fundamentals
    2. Hello Vue Router
    3. The Router Link component
    4. Children and Nested Routes
    5. Route Params with the Composition API
    6. New Post Route
    7. New Post Form
    8. usePosts Composable
    9. Redirects with Vue Router
    10. Options API Refactor
  7. Chapter 7 : Vuex Fundamentals
    1. Introduction to Vuex
    2. Create a Vuex Store and State
    3. Updating State with Mutations
    4. More on Mutations
    5. Dispatching Actions
    6. Mocking the Server and Fetching Posts
    7. Showing the Current Post
    8. Vuex Getters
    9. Scaling Vuex with Modules
    10. Options API Refactor
  8. Chapter 8 : Project 4: Capstone Project
    1. Introduction to the Capstone Project
    2. Setting Up Vuex
    3. Reusable Layouts
    4. Fetching Albums with Fetch
    5. Data Fetching Workflow with Vuex
    6. Creating the Album Component
    7. Fetching Thousands of Photos
    8. Adding Routing
    9. Improved Routing
    10. Routing with Router Link
    11. watchEffect and Routing Params
    12. Vuex Level Caching for Better Performance
    13. Parting Words and Recommendations

Product information

  • Title: Complete Vue.js 3 (Inc. Composition API, Vue Router, Vuex)
  • Author(s): Lachlan Miller
  • Release date: October 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781803245287