In-Depth Vue 3 For Beginners (Inc. Composition API, Router)

Video description

Vue is a JavaScript framework to build user interfaces and single-page applications. This course is focused on the latest version of Vue 3, its important features, and working on 4 projects to implement the skills learned.

Personal portfolio/blog project:

This project strips away the complexities/build tools and focuses purely on Vue.js.

Taking a simple HTML file, we add the Vue library to not only learn the core features but also to see how easily we can add it to an existing website.

Countdown app:

Once you have a solid grounding, it is time for project 2. This is an event countdown app that introduces you to a more sophisticated setup using the Vue CLI.

While building the project, you will learn so much more, including watchers, computed properties, forms, conditional rendering, and teleport, to name a few.

Dashboard app:

Project 3 is a dashboard application with multiple pages, making use of dynamic components.

We will discover different ways of passing data in Vue.js, including provide/inject and the different types of slots available.

Creative cards app:

The last project is a card editing application. You will begin with a library of greeting cards the user can select, and then once chosen, an edit screen will allow the user to edit the text, images, and overall styling as well.

This project will introduce the new Vue 3 Composition API, how to organize your code into reusable files, routing, lazy loading, cloud functions, image uploading, and using a database.

By the end of this course, you will have already built 4 projects and learned all of the essential Vue skills, along with the new Vue.js 3 features and syntax.

What You Will Learn

  • Basics of Vue and an overview of Vue 3 version
  • Build tools and single-page applications
  • Slots and dynamic components
  • Provide/inject and introduction to routing
  • Composition API (the best feature of this version) and pushing on with our project
  • Uploading images and deployment to Netlify


This course is ideal for web developers with little to zero web development experience. We recommend you learn some basics first. This is also for individuals who are new to Vue.js. This course is not for Vue.js Ninja, probably not unless they want to get up to speed on the latest Vue.js 3 features or just want a course to go through and try out some new projects.

The basic knowledge of HTML, CSS, and JavaScript will be helpful but not mandatory.

About The Author

Chris Dixon: Chris Dixon is a self-employed web developer teaching others through training courses. Chris offers freelance web development and training workshops on various topics, including HTML, CSS, JavaScript, Vue.js, NUXT.js, WordPress (custom theme development), Mongo/Mongoose, PostgreSQL, Express, Firebase, and Supabase. Chris is also involved in building Shopify ecommerce solutions, including custom apps and theme development. Chris has vast experience in GraphQL, Keystone CMS, and many other front-end/full-stack skills. He is additionally a regular Shopify user in creating and managing online stores and editing/creating custom liquid templates.

Table of contents

  1. Chapter 1 : Getting to Know Vue
    1. Introduction
    2. What You will Need for this Course
    3. What is Vue.js and What can it Do?
    4. Overview of Vue 3 Changes
    5. Project Source Code
  2. Chapter 2 : First Look at Vue.js
    1. Section Introduction
    2. The Vue Instance
    3. Data and Lists
    4. Looping with Objects
    5. List Indexes and Keys
    6. Binding Attributes
    7. Mini Challenge-Dynamic Links
    8. Mini Challenge-Dynamic Links-Solution
    9. JavaScript Expressions
    10. Event Handling
    11. Methods
    12. Raw HTML
    13. The Vue Life Cycle
  3. Chapter 3 : Component Basics
    1. Section Introduction
    2. What are Components?
    3. First Look at Components
    4. Props and Reusing Components
    5. Local Components
  4. Chapter 4 : Build Tools and Single-Page Applications
    1. Section Introduction
    2. Single-Page Applications
    3. The Vue CLI
    4. Project Structure
    5. The vetur Extension
  5. Chapter 5 : Countdown Project
    1. Section Introduction
    2. Starter Project Download
    3. Single File Components
    4. Making Our Components Dynamic
    5. Calculating Days Left
    6. Conditional Rendering
    7. More on Conditional Rendering
    8. Computed Properties
    9. Watchers
    10. Computed or Watchers
    11. Ordering and Toggling Past Events
    12. Teleport
  6. Chapter 6 : Forms, Events, and Modifiers
    1. Section Introduction
    2. Our Form Component
    3. Styling and Positioning the Form Modal
    4. Emit Custom Events
    5. Binding Form Inputs
    6. Emit Data with a Custom Event
    7. Emit Multiple Events
    8. Modifiers
    9. Validating Our Form
    10. Updating Events
    11. Removing Events
  7. Chapter 7 : Validation and a Deeper Look at Props
    1. Section Introduction
    2. Prop Validation
    3. Non-Prop Attributes
    4. More on Non-Prop Attributes
  8. Chapter 8 : Slots and Dynamic Components
    1. Section Introduction
    2. What We will be Building
    3. Project Pages and Components
    4. Introduction to Slots
    5. Overview Page Structure
    6. Slots in Practice
    7. Passing Dynamic Data and Scope
    8. Fallback Content
    9. Named Slots
    10. Scoped Slots
    11. Orders Page
    12. Bestsellers Page
    13. Dynamic Components
  9. Chapter 9 : Provide/Inject
    1. Section Introduction
    2. What is provide-inject
    3. Setting Up a Provider
    4. Injecting Data
    5. Mini Challenge - Update Orders - Bestsellers Pages
    6. Update Orders and Bestsellers Pages to Use Provide
    7. Updating the Provider from a Child Component
  10. Chapter 10 : Introduction to Routing
    1. Section Introduction
    2. What We will be Building and Project Starter
    3. Setting Up the Vue Router
    4. Router Link and Router View
    5. Params and Queries
    6. Matching Dynamic Routes
    7. Nested Routes
    8. Active Classes
    9. Fallback Pages
    10. Setting Up Our Project Components and Routes
    11. Programmatic Navigation
    12. Different Router Modes
  11. Chapter 11 : Composition API
    1. Section Introduction
    2. What is the Composition API
    3. Composition Setup
    4. Primitive Versus Reference Types
    5. Quick Introduction to Proxies
    6. Using Reactive and isReactive
    7. Adding Reactivity with Ref
    8. Destructuring and toRefs
    9. Readonly
    10. Computed
    11. Standalone Composition Functions
    12. Mini Challenge-Moving Over the Cards by Category
    13. Moving Over the Cards by Category
    14. Accessing the Router
    15. Watch and WatchEffect
    16. Using Alongside the Options API
  12. Chapter 12 : Pushing On with Our Project
    1. Section Introduction
    2. Linking to Selected Card and Category Styling
    3. The Create View
    4. Retrieving the Selected Card
    5. Selecting the Current Page
    6. Switching Card Pages
    7. The Card Preview Component
    8. Text Output Component
    9. Card Edit Component
    10. Text Input Component and Hover Menu
    11. Adding Menu Options
    12. Menu Options Continued
    13. Menu Styling
    14. Updating the Card
    15. Adding New Sections
    16. Removing Sections
    17. Rearranging the Order of Sections
    18. Changing the Section Height
    19. Additional Styling
    20. Provide and Inject with Composition
  13. Chapter 13 : Navigation Guards and Lazy Loading
    1. Section Introduction
    2. Navigation Guards
    3. Lazy Loading Routes
    4. Grouping Routes into Chunks
  14. Chapter 14 : Uploading Images
    1. Section Introduction
    2. Image Upload Component
    3. Setting Up Cloudinary
    4. Reading File Objects and Previewing
    5. Uploading the Image File
    6. Saving the Image URL to Our Card
    7. Repositioning the Image
    8. Removing Images
  15. Chapter 15 : Deployment
    1. Deployment to Netlify
    2. Thank You

Product information

  • Title: In-Depth Vue 3 For Beginners (Inc. Composition API, Router)
  • Author(s): Chris Dixon
  • Release date: June 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801079112