Vue.js 3 Online Course

Vue.js 3 Online Course

This course is designed for developers who want to quickly master Vue.js. You’ll learn both the traditional Options API and the modern Composition API, along with how to combine them effectively. The course covers core concepts such as state management with Vuex and routing with Vue Router, then applies them through real-world projects. You’ll also explore application architecture, component communication, and data flow within apps. The program concludes with a capstone project using Vue, Vuex, and Vue Router. By the end, you’ll have a strong foundation in Vue.js and the skills to build and architect scalable web applications.

Who should take this Course?

The Vue.js 3 Online Course is perfect for front-end developers, web designers, and JavaScript programmers who want to build modern, interactive, and high-performing web applications. It is also ideal for students, beginners in web development, and professionals aiming to enhance their skills in component-based frameworks and stay ahead in the fast-evolving front-end ecosystem.

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

Course Outline 

Course Introduction

• Introduction
• Setting Up
• Your First Vue.js App
• Adding a Template Property
• User Interactions with Methods
• Control Flow with v-if and v-else
• Loops with v-for
• Computed Properties
• Class Bindings
• Input Validation
• The Amazing v-model
• Your First Component
• Component Props
• Child-Parent Communication with Events

Project 1: User Sign-up Form with Validation

• Project 1: User Sign-up Form w/ Validation Introduction
• Single File Components
• A Custom Button Component
• Custom Input Foundations
• Dynamic Validation
• Rethinking the Form State
• Validating the Form
• Submitting the Form and Finishing Up

Project 2: Pokémon Evolutions

• Project 2: Pokémon Evolutions Introduction
• Creating the Card Foundations
• Loading Remote Data with Fetch
• Fetching Multiple Data Sources
• Lifecycle Hooks
• Rendering Content
• Modular Components with Slots
• Reusing Code to Fetch Evolutions
• Better Styles with Class Bindings
• Separating Business Logic and Presentation Components

Composition Fundamentals

• Composition Fundamentals Introduction
• Hello, Composition API!
• Reactivity with ref
• Reactive for Complex Values
• Composing Computed Properties
• Watch and Watch Effect
• Before and After with Watch
• The useNumbers Composable
• Open-Source Library: Vue Use

Project 3: Composing a Microblog

• Project 3: Microblog (with the Composition API)
• Creating the Microblog Store
• Render Posts with the Card Component
• The Hashtag Component
• Emitting Events with the Composition API
• Filtering Posts with Computed
• Refactoring with the Posts Store
• Liking a Post
• Searching for Hashtags
• Mind Blowing Refactor and Exercises

Vue Router Fundamentals

• Introduction
• Hello Vue Router
• The Router Link component
• Children and Nested Routes
• Route Params with the Composition API
• New Post Route
• New Post Form
• usePosts Composable
• Redirects with Vue Router
• Options API Refactor

Vuex Fundamentals

• Introduction to Vuex
• Create a Vuex Store and State
• Updating State with Mutations
• More on Mutations
• Dispatching Actions
• Mocking the Server and Fetching Posts
• Showing the Current Post
• Vuex Getters
• Scaling Vuex with Modules
• Options API Refactor

Project 4: Capstone Project

• Introduction to the Capstone Project
• Setting Up Vuex
• Reusable Layouts
• Fetching Albums with Fetch
• Data Fetching Workflow with Vuex
• Creating the Album Component
• Fetching Thousands of Photos
• Adding Routing
• Improved Routing
• Routing with Router Link
• watchEffect and Routing Params
• Vuex Level Caching for Better Performance
• Parting Words and Recommendations