Vue Masterclass (Covers Vue 2 and 3)

Vue Masterclass (Covers Vue 2 and 3), available at $84.99, has an average rating of 4.5, with 498 lectures, based on 944 reviews, and has 6188 subscribers.

You will learn about Build a complete, real-world Vue application using Vue, Pinia, Vue Router, and more Master modern front end technologies like TailwindCSS, TypeScript, and Prettier Use Vitest and Vue Testing Libary to write unit tests for all elements of the Vue ecosystem Learn best practices for Vue component design Covers both Vue 2s Options API and Vue 3s Composition API This course is ideal for individuals who are Frontend developers eager to learn a modern library for building reactive interfaces or React/Angular developers curious to try an alternative view library or Students who learn best by doing rather than watching It is particularly useful for Frontend developers eager to learn a modern library for building reactive interfaces or React/Angular developers curious to try an alternative view library or Students who learn best by doing rather than watching.

Enroll now: Vue Masterclass (Covers Vue 2 and 3)

Summary

Title: Vue Masterclass (Covers Vue 2 and 3)

Price: $84.99

Average Rating: 4.5

Number of Lectures: 498

Number of Published Lectures: 498

Number of Curriculum Items: 498

Number of Published Curriculum Objects: 498

Original Price: $19.99

Quality Status: approved

Status: Live

What You Will Learn

Build a complete, real-world Vue application using Vue, Pinia, Vue Router, and more

Master modern front end technologies like TailwindCSS, TypeScript, and Prettier

Use Vitest and Vue Testing Libary to write unit tests for all elements of the Vue ecosystem

Learn best practices for Vue component design

Covers both Vue 2s Options API and Vue 3s Composition API

Who Should Attend

Frontend developers eager to learn a modern library for building reactive interfaces

React/Angular developers curious to try an alternative view library

Students who learn best by doing rather than watching

Target Audiences

Frontend developers eager to learn a modern library for building reactive interfaces

React/Angular developers curious to try an alternative view library

Students who learn best by doing rather than watching

Welcome to the most comprehensive Vue course on Udemy!

The Vue Masterclass introduces you to the powerful VueJS library for building dynamic, reactive front end interfaces.

VueJS has taken the web development community by storm and is a fantastic technology to learn in 2023:

Vue has been used to built over 1,000,000 websites

Vue has over 200,000 stars on GitHub

Vue downloads on NPM have doubled year-over-year

Vue is used by leading tech companies like Netflix, Apple, GitLab, and Nintendo.

The best way to learn a technology is to create something with it. That’s why the Vue Masterclass consists of a complete real-world project that we’ll build together from scratch. I’ll be coding alongside you from the very first line of code.

I believe this course is the closest I’ve come to capturing what it feels like to be a Vue developer on the job. We’ll introduce and complete user stories, discuss tradeoffs of different technical approaches, summarize what we’ve learned at the end of each section, and more.

No prior experience with Vue (or any other front end library) is needed. Beginners are welcome!

The course starts with Vue basics and progresses to advanced Vue concepts including:

Creating Vue components

Styling Vue components

Using Vue directives to compose dynamic interfaces

Passing props between components

Emitting events

Routing our user from page to page

Testing Vue components

and more!

Throughout 50+ hours of video content, we’ll cover numerous aspects of the Vue ecosystem including:

Vue (including both the Options API from Vue 2 and the new Composition API in Vue 3)

Pinia for global state management

Vue Router for navigating the user across pages in our application

Testing with Vue Testing Library and Vitest

Scaffolding Vue applications with Create Vue

Styling components with Tailwind CSS

Adding type checking with TypeScript

Linting our code with ESLint

Formatting our code with Prettier

and more!

Another aspect that makes the course special is its emphasis on testing. We’ll discuss how to unit test our Vue applications using the Vitest and Vue Testing Library packages. We’ll also walk through various testing methodologies, including test-driven development (TDD).

Vue Masterclass offers you an incredible, comprehensive introduction to the powerful Vue library. I’m super excited to build this project together with you and I can’t wait to see you in the course!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Course Overview

Lecture 2: Introducing our Project (Careers Site)

Lecture 3: BONUS: Vue 2 vs. Vue 3

Lecture 4: BONUS: Vue vs. React vs. Angular

Lecture 5: Technical Requirements

Lecture 6: Install Google Chrome

Lecture 7: Install Git

Lecture 8: Node Setup for macOS Users

Lecture 9: Install Node

Lecture 10: Install VSCode

Lecture 11: Install VSCode Extensions

Lecture 12: Asking Good Questions

Chapter 2: Intro to Vue

Lecture 1: Use Create Vue to Initialize Vue Project

Lecture 2: Configuring the App: VSCode

Lecture 3: Configuring the App: ESLint

Lecture 4: Hot Reloading

Lecture 5: Project Structure

Lecture 6: Mounting the Vue App

Lecture 7: The @ Symbol for src Directory

Lecture 8: The Parts of a Vue File

Lecture 9: Cleanup, Cleanup

Lecture 10: More on Components

Lecture 11: Install Dev Tools

Lecture 12: Section Review [SLIDES]

Lecture 13: Code at End of Section 2

Chapter 3: Intro to CSS in Vue

Lecture 1: Targeting by HTML Element or CSS Class

Lecture 2: The scoped Attribute

Lecture 3: A Little Housekeeping

Lecture 4: Section Review [SLIDES]

Lecture 5: Code at End of Section 3

Chapter 4: Intro to Tailwind CSS

Lecture 1: Introduction to Tailwind CSS

Lecture 2: Add Tailwind CSS to Project

Lecture 3: BONUS: ES6 Spread Syntax for Arrays

Lecture 4: Add Open Sans Font to Project

Lecture 5: Try Out Tailwind Styles in App.vue

Lecture 6: Install Tailwind CSS IntelliSense Extension

Lecture 7: Install Prettier Plugin for Tailwind

Lecture 8: Section Review [SLIDES]

Lecture 9: Code at End of Section 4

Chapter 5: Rendering Data to View

Lecture 1: User Story

Lecture 2: Creating the MainNav Component

Lecture 3: Rendering Child Component with the components Property

Lecture 4: Different Ways to Render a Component

Lecture 5: Update Tailwind Styles

Lecture 6: CSS: Styling the MainNav Component

Lecture 7: BONUS: JavaScript Objects, Properties, and Methods

Lecture 8: Rendering Data to View I

Lecture 9: Rendering Data to View II: Multiple Data Properties

Lecture 10: Section Review [SLIDES]

Lecture 11: Code at End of Section 5

Chapter 6: Intro to Vitest

Lecture 1: Intro to Testing

Lecture 2: Quick Fix for Testing Issues

Lecture 3: The Basics of Vitest Syntax

Lecture 4: Multiple Describe Blocks

Lecture 5: Intro to Test-Driven Development (TDD)

Lecture 6: Test-Driven Development In Action

Lecture 7: Adding the —coverage Flag

Lecture 8: Setup Vitest Globals

Lecture 9: Quick Cleanup

Lecture 10: Section Review [SLIDES]

Lecture 11: Code at End of Section 6

Chapter 7: First Vue Tests

Lecture 1: Cleaning up App.vue

Lecture 2: Fixes for Next Lesson

Lecture 3: Setup Vue Testing Library

Lecture 4: The render Function and screen Object

Lecture 5: Our First Component Assertion

Lecture 6: The Second Argument to render Function

Lecture 7: Section Review [SLIDES]

Lecture 8: Code at End of Section 7

Chapter 8: Directives I

Lecture 1: The v-bind Directive I

Lecture 2: The v-bind Directive II: Shortcut

Lecture 3: CSS: Styling Navigation Items

Lecture 4: The v-for Directive

Lecture 5: The :key Attribute

Lecture 6: Using Tailwinds First Child Utility Class

Lecture 7: Review: The ES6 map Method on an Array

Lecture 8: ARIA Roles [SLIDES]

Lecture 9: Testing the v-for Directive

Lecture 10: Install Testing Playground Extension

Lecture 11: Section Review [SLIDES]

Lecture 12: Code at End of Section 8

Chapter 9: Directives II

Lecture 1: User Story

Lecture 2: Create ActionButton Component

Lecture 3: CSS: Styling ActionButton

Lecture 4: Add Custom Box Shadow to ActionButton

Lecture 5: Create ProfileImage Component

Lecture 6: Conditional Rendering with the v-if Directive

Lecture 7: The v-else Directive

Lecture 8: Adding Methods to Vue Component

Lecture 9: The v-on Directive I: HTML Element

Lecture 10: The v-on Directive II: Shortcut

Instructors

Boris Paskhaver
Software Engineer | Consultant | Author

Rating Distribution

1 stars: 5 votes

2 stars: 7 votes

3 stars: 41 votes

4 stars: 215 votes

5 stars: 676 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!