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

Video description

Learn to build large applications with Vue.js, Vuex, and Vue router with this zero to hero course

About This Video

  • Learn Vue.js from scratch and use it to build applications
  • Build multiple projects to put the skills that you will learn into action
  • Explore Vuex and Vue router

In Detail

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.


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.

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