Vue.js Online Course

Vue.js Online Course

About the Course

Vue is a powerful JavaScript framework used to create dynamic user interfaces and single-page applications. This course focuses on Vue 3—the latest version—highlighting its key features while guiding you through four hands-on projects to put your knowledge into practice:

• Personal portfolio/blog
• Countdown timer app
• An interactive dashboard
• A creative cards showcase

By the end of the course, you'll have built four complete projects and gained a strong grasp of essential Vue skills, including the latest Vue 3 syntax and features.

Who should take this Course?

The Vue.js Online Course is ideal for front-end developers, web designers, and JavaScript programmers who want to build interactive and modern web applications using the Vue.js framework. It’s also suitable for beginners transitioning from HTML/CSS to JavaScript frameworks, as well as professionals looking to enhance their skills in client-side development. A basic understanding of HTML, CSS, and JavaScript is recommended for the best learning experience.

Course Table of Contents

Introduction

• What You will Need for this Course
• What is Vue.js and What can it Do?
• Overview of Vue 3 Changes
• Project Source Code

First Look at Vue.js

• Section Introduction
• The Vue Instance
• Data and Lists
• Looping with Objects
• List Indexes and Keys
• Binding Attributes
• Mini Challenge-Dynamic Links
• Mini Challenge-Dynamic Links-Solution
• JavaScript Expressions
• Event Handling
• Methods
• Raw HTML
• The Vue Life Cycle

Component Basics

• Section Introduction
• What are Components?
• First Look at Components
• Props and Reusing Components
• Local Components

Build Tools and Single-Page Applications

• Section Introduction
• Single-Page Applications
• The Vue CLI
• Project Structure
• The vetur Extension

Countdown Project

• Section Introduction
• Starter Project Download
• Single File Components
• Making Our Components Dynamic
• Calculating Days Left
• Conditional Rendering
• More on Conditional Rendering
• Computed Properties
• Watchers
• Computed or Watchers
• Ordering and Toggling Past Events
• Teleport

Forms, Events, and Modifiers

• Section Introduction
• Our Form Component
• Styling and Positioning the Form Modal
• Emit Custom Events
• Binding Form Inputs
• Emit Data with a Custom Event
• Emit Multiple Events
• Modifiers
• Validating Our Form
• Updating Events
• Removing Events

Section Introduction

• Prop Validation
• Non-Prop Attributes
• More on Non-Prop Attributes

Slots and Dynamic Components

• Section Introduction
• What We will be Building
• Project Pages and Components
• Introduction to Slots
• Overview Page Structure
• Slots in Practice
• Passing Dynamic Data and Scope
• Fallback Content
• Named Slots
• Scoped Slots
• Orders Page
• Bestsellers Page
• Dynamic Components

Provide/Inject

• Section Introduction
• What is provide-inject
• Setting Up a Provider
• Injecting Data
• Mini Challenge - Update Orders - Bestsellers Pages
• Update Orders and Bestsellers Pages to Use Provide
• Updating the Provider from a Child Component

Introduction to Routing

• Section Introduction
• What We will be Building and Project Starter
• Setting Up the Vue Router
• Router Link and Router View
• Params and Queries
• Matching Dynamic Routes
• Nested Routes
• Active Classes
• Fallback Pages
• Setting Up Our Project Components and Routes
• Programmatic Navigation
• Different Router Modes

Composition API

• Section Introduction
• What is the Composition API
• Composition Setup
• Primitive Versus Reference Types
• Quick Introduction to Proxies
• Using Reactive and isReactive
• Adding Reactivity with Ref
• Destructuring and toRefs
• Readonly
• Computed
• Standalone Composition Functions
• Mini Challenge-Moving Over the Cards by Category
• Moving Over the Cards by Category
• Accessing the Router
• Watch and WatchEffect
• Using Alongside the Options API

Pushing On with Our Project

• Section Introduction
• Linking to Selected Card and Category Styling
• The Create View
• Retrieving the Selected Card
• Selecting the Current Page
• Switching Card Pages
• The Card Preview Component
• Text Output Component
• Card Edit Component
• Text Input Component and Hover Menu
• Adding Menu Options
• Menu Options Continued
• Menu Styling
• Updating the Card
• Adding New Sections
• Removing Sections
• Rearranging the Order of Sections
• Changing the Section Height
• Additional Styling
• Provide and Inject with Composition

Navigation Guards and Lazy Loading

• Section Introduction
• Navigation Guards
• Lazy Loading Routes
• Grouping Routes into Chunks

Uploading Images

• Section Introduction
• Image Upload Component
• Setting Up Cloudinary
• Reading File Objects and Previewing
• Uploading the Image File
• Saving the Image URL to Our Card
• Repositioning the Image
• Removing Images

Deployment

• Deployment to Netlify