Vue 3 in Action- 6 Projects to Master the Framework

Vue 3 in Action: 6 Projects to Master the Framework, available at $54.99, has an average rating of 4.61, with 118 lectures, based on 46 reviews, and has 453 subscribers.

You will learn about Master Vue 3 with Composition API and TypeScript Build 6 real-world projects from scratch Create reusable and scalable components Implement robust state management with Pinia Develop dynamic single-page applications using Vue Router Learn to create and use custom composables for code reuse Apply Vue best practices and design patterns Gain hands-on experience with modern Vue development This course is ideal for individuals who are Anyone who wants to learn Vue quickly! It is particularly useful for Anyone who wants to learn Vue quickly!.

Enroll now: Vue 3 in Action: 6 Projects to Master the Framework

Summary

Title: Vue 3 in Action: 6 Projects to Master the Framework

Price: $54.99

Average Rating: 4.61

Number of Lectures: 118

Number of Published Lectures: 118

Number of Curriculum Items: 118

Number of Published Curriculum Objects: 118

Original Price: $94.99

Quality Status: approved

Status: Live

What You Will Learn

Master Vue 3 with Composition API and TypeScript

Build 6 real-world projects from scratch

Create reusable and scalable components

Implement robust state management with Pinia

Develop dynamic single-page applications using Vue Router

Learn to create and use custom composables for code reuse

Apply Vue best practices and design patterns

Gain hands-on experience with modern Vue development

Who Should Attend

Anyone who wants to learn Vue quickly!

Target Audiences

Anyone who wants to learn Vue quickly!

In this comprehensive and up-to-date Vue 3 course, you’ll create six projects (plus one as an exercise) to master all the essentials of the Vue framework, enabling you to build your own projects or secure a job.

We will cover:

– Vue templates and directives

– Components, including props, events, and slots

– Transitions

– TypeScript

– Composition API, including building your own composables

– Vue Router (for building SPAs)

– Pinia (shared state management)

Projects you’ll build:

1. Can You Drive?

2. Simple Quiz (exercise project)

3. Image Gallery

4. Task List

5. Event Registration Mini-App

6. User Settings App

7. Recipe Book App

Join this course to gain hands-on experience with Vue 3, using Vite for project setup, and dive into practical applications of Vue’s Composition API and Pinia for state management. Learn how to create dynamic single-page applications (SPAs) with Vue Router, enhance your apps with smooth transitions, and leverage TypeScript for type-safe code. Whether you’re a beginner or looking to upgrade your skills, this course will equip you with the knowledge to succeed in the world of modern web development.

Throughout the course, you’ll build real-world projects that showcase the power of Vue 3, from creating a simple quiz application to managing state with Pinia in a user settings app. By the end of this course, you will have a solid understanding of how to use Vue 3’s Composition API to build scalable and maintainable applications. You’ll also learn best practices for structuring your Vue applications and working efficiently with TypeScript to catch errors early and improve your development workflow.

This course is designed to be practical and project-based, ensuring you not only learn the theory but also apply your knowledge in building functional applications. Whether you’re looking to break into the industry or enhance your existing skills, this Vue 3 course is your gateway to becoming a proficient Vue developer.

Course Curriculum

Chapter 1: Course Introduction

Lecture 1: What is Vue.js and Why You Should Learn It?

Lecture 2: The Essence of Vue.js – How Vue.js Works in 3 Minutes

Lecture 3: Course Overview: What Youll Learn and the Projects Youll Build

Lecture 4: Why Choose Vue 3: Benefits and Advantages

Lecture 5: Maximizing Your Learning: How to Make the Most Out of This Course

Lecture 6: Accessing the Source Code: Where to Find It

Lecture 7: VSCode Setup: Essential Shortcuts, Extensions, and Tips

Lecture 8: Need a Reminder on HTML, JavaScript, or CSS? Heres Some Help

Lecture 9: Join Discord!

Chapter 2: 1st Mini Project – Can you Drive?

Lecture 1: Intro: Project 1

Lecture 2: Making the Vue App Alive!

Lecture 3: Reactivity in Vue – Using ref()

Lecture 4: Computed Properties – Using computed()

Lecture 5: Conditional CSS Classes

Lecture 6: Input Bindings

Lecture 7: Exercise 1 – Build a Simple Quiz Game

Lecture 8: Exercise 1 – Solution

Chapter 3: 2nd Mini Project – Image Gallery with Favorites

Lecture 1: Intro: 2nd Mini Project

Lecture 2: Event Handling (v-on)

Lecture 3: Event Handling Modifiers

Lecture 4: Conditional Rendering (v-if)

Lecture 5: Rendering Lists (v-for)

Lecture 6: Attribute Binding

Lecture 7: Exercise 2 – Favorite Toggling/Image Removing

Lecture 8: Exercise 2 – Solution to Task 1

Lecture 9: Exercise 2 – Solution to Task 2

Chapter 4: 3rd Mini Project – Task Manager

Lecture 1: Intro: 3rd Mini Project

Lecture 2: Lifecycle Hooks

Lecture 3: Template Refs (Accessing DOM Elements)

Lecture 4: Displaying Task List

Lecture 5: Adding New Tasks

Lecture 6: Watchers and Side Effects

Lecture 7: Comparing watch with watchEffect

Lecture 8: Using Local Storage

Lecture 9: Exercise 3 – Remove Button & Filtering Tasks

Lecture 10: Exercise 3 – Solution

Chapter 5: 4th Medium Project – Event Registration (Components)

Lecture 1: Intro: 4th Medium Project

Lecture 2: Creating Vue Project using Vite

Lecture 3: Understanding the Project Structure and Files

Lecture 4: Installing and Using TailwindCSS

Lecture 5: Creating and Using Components

Lecture 6: Rendering a List of Components

Lecture 7: Passing Props

Lecture 8: Component Events

Lecture 9: Fall through Attributes

Lecture 10: Basic Component Slots

Lecture 11: Exercise 4 – Create a Reusable Card Component

Lecture 12: Exercise 4 – Solution

Lecture 13: Named Slots

Lecture 14: Conditional Named Slots

Lecture 15: Component Variants

Chapter 6: 4th Medium Project – Event Registration (Data Fetching)

Lecture 1: Intro: 4th Medium Project – Checkpoint #1

Lecture 2: Setting Up the Mock API Server

Lecture 3: Fetching Data

Lecture 4: Loading State

Lecture 5: Preventing Layout Shifts (Placeholders)

Lecture 6: Posting Data to the Server

Lecture 7: Exercise 5 – Loading Bookings

Lecture 8: Exercise 5 – Solution

Chapter 7: 4th Medium Project (Optimistic UI, Error Handling)

Lecture 1: Intro: 4th Medium Project – Checkpoint #2

Lecture 2: Optimistic UI Explained with Event Booking Example

Lecture 3: Implementing Event Booking Optimistic UI

Lecture 4: Cancelling Bookings with Optimistic UI

Lecture 5: Extracting EventList: Why?

Lecture 6: Extracting EventList: Lets Go!

Lecture 7: Extracting EventList: Handling Empty States

Lecture 8: Extracting EventList: Error Handling and Error Recovery

Lecture 9: Responsive Design

Lecture 10: Dynamic Components & Icons

Chapter 8: 4th Medium Project (Composables & Sharing State)

Lecture 1: Intro: Composables and State Sharing

Lecture 2: Creating and Using Composables

Lecture 3: Using Composable and Eliminating Events

Lecture 4: The BookingList Component

Lecture 5: Error Handling Component & Exercise 6

Lecture 6: Exercise 6 Solution

Chapter 9: 5th Medium Project (TypeScript, Transitions, Tabs)

Lecture 1: Intro: 5th Medium Project Introduction

Lecture 2: Create a Vue TypeScript Project & Add Tailwind

Lecture 3: Define Props and Events with TypeScript Types

Lecture 4: Narrowing Down the Types of refs and Other Data

Lecture 5: Rendering Tabs – How to Display the Tab Active State?

Lecture 6: Rendering Tab Content using Dynamic Components

Lecture 7: Transitions – How to Add CSS Transitions on Tab Content

Lecture 8: Custom Transition Components – How to Reuse Transitions?

Chapter 10: 5th Medium Project (TypeScript, Teleport, KeepAlive, Shared State)

Lecture 1: Intro: 5th Medium Project Checkpoint #2

Lecture 2: General Form Markup & Transition Gotcha

Lecture 3: How is the reactive Function Different from ref in Vue 3?

Lecture 4: KeepAlive Component – How to Not Lose the State of Dynamic Components?

Lecture 5: Creating Privacy & Notifications Forms: Adding Markup and Maintaining User Data

Lecture 6: Syncing Local Storage: How to Store and Retrieve Settings

Lecture 7: TypeScript Safety: Generics and Keyof – Mindblowing Type Safety!

Instructors

Piotr Jura | 57,000+ Students
Best Selling and Highest Rated Web Development Instructor

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 5 votes

4 stars: 11 votes

5 stars: 31 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!