Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

The ultimate guide to Vue 3 Development. Build large-scale applications and deploy them to production. Go from Zero to Mastery.

Course content

25 sections • 286 lectures • 27h 57m total length

Introduction8 lectures • 28min

  • Course OutlinePreview05:55
  • Join Our Online Classroom!Preview04:01
  • Exercise: Meet Your Classmates and Instructor01:39
  • Vue vs React vs AngularPreview12:07
  • Composition vs. Options APIPreview02:13
  • Complete Course Resources + Code00:53
  • Optional: Vue Documentary00:21
  • Monthly Coding Challenges, Free Resources and Guides00:40

Vue Fundamentals25 lectures • 2hr 22min

  • Getting Started07:37
  • Vue Dev Tools06:01
  • Working with Data08:43
  • Multiple Vue Instances04:06
  • Accessing the Instance Data06:02
  • Methods04:40
  • Directives05:07
  • Two-way data binding07:13
  • Binding Attributes02:38
  • Outputting Raw HTML06:01
  • Listening to Events07:06
  • Passing on Data with Events02:33
  • Event Modifiers02:31
  • Keyboard Events and Modifiers04:54
  • v-model Modifiers05:19
  • Computed Properties09:06
  • Watchers03:12
  • Binding Classes08:09
  • Binding Styles05:13
  • Conditional Rendering10:04
  • The v-show Directive04:24
  • List Rendering12:00
  • Understanding the role of the key attribute08:15
  • Web Developer Monthly00:22
  • Endorsements On LinkedIN00:40

Project 1: Perspective Playground3 lectures • 16min

  • Creating a Perspective Playground11:45
  • Copying to the Clipboard04:06
  • Extra Exercise: Copy Button00:15

Vue: Beyond the Fundamentals7 lectures • 54min

  • Mounting the Vue Instance04:18
  • Understanding Lifecycle Hooks04:40
  • Using Lifecycle Hooks09:21
  • Virtual DOM07:21
  • Understanding Reactivity with Proxies07:33
  • The Vue Compiler13:02
  • Introduction to Components07:42

Vue Developer Environment10 lectures • 50min

  • Overview02:16
  • Optional Videos In Appendix00:24
  • Introduction to Vite05:29
  • Exploring Vite05:46
  • Understanding SASS08:00
  • PostCSS06:37
  • Installing ESLint04:52
  • Configuring ESLint07:27
  • Webpack08:21
  • Conclusion00:46

Advanced Vue Components16 lectures • 1hr 44min

  • Scaffolding a Vue Project09:08
  • Sidebar: Understanding Servers05:25
  • Reviewing the Files09:29
  • Creating Components04:04
  • Child Components08:16
  • Component Styles06:29
  • Using SASS in Components02:04
  • Communicating Between ComponentsPreview02:21
  • PropsPreview06:13
  • The Limitations of Props03:46
  • Emitting Events08:34
  • Validating Props07:35
  • Callback Functions04:58
  • Inserting content with slots08:33
  • Named Slots07:07
  • Dynamic Components09:38

Transitions & Animations9 lectures • 59min

  • Animating with CSS Transitions09:47
  • Fine-tuning Transitions05:11
  • Animating with CSS Animations08:32
  • Animating with JavaScript06:34
  • JavaScript Zoom Animation06:51
  • CSS and JavaScript Transitions03:24
  • Animating a List08:53
  • Fixing the Animation04:18
  • Transition CSS Class Names05:37

Project 2: Vue Quiz App5 lectures • 42min

  • Setting up the Quiz Application05:00
  • Rendering the Questions12:03
  • Moving between Questions10:44
  • Finishing Touches11:27
  • Exercise: Imposter Syndrome02:55

Master Project: Introduction to Pinia20 lectures • 1hr 36min

  • The Next Step01:31
  • Creating a New Project04:39
  • Reviewing the Files06:19
  • Formatting with ESLint and Prettier04:30
  • Adding the Template08:13
  • What is Tailwind?05:36
  • Installing Tailwind07:58
  • Practicing with Tailwind05:15
  • Loading Assets03:59
  • Understanding State05:34
  • Reviewing the Pinia Configuration06:04
  • Splitting the Template into Components05:23
  • Disabling Vue’s Rules04:52
  • Working with State06:40
  • Alternative Mapping Functions03:06
  • Understanding Getters01:31
  • Using Getters04:09
  • Closing the Modal02:05
  • Aliases03:13
  • Adding Tabs05:33

Master Project: Form Validation18 lectures • 1hr 55min

  • Setting up Form Validation04:30
  • Registering a Plugin05:34
  • Validation Components05:31
  • Defining Rules03:48
  • Applying Rules05:35
  • Additional Rules06:31
  • Validating Emails03:40
  • Validating Numbers04:32
  • Validating Passwords05:01
  • Dropdown and Checkbox Fields07:29
  • Validating the Form04:01
  • Sidebar: Slot Properties08:34
  • Rendering Multiple Error Messages06:22
  • Default Values01:53
  • Custom Error Messages10:34
  • Validation Triggers03:58
  • Showing Alerts08:57
  • Setting up the Login Form18:00

Master Project: Authentication18 lectures • 1hr 50min

  • Understanding Authentication06:24
  • Reviewing the Rules04:49
  • Setting up the Firebase SDK07:37
  • User Registration06:30
  • Handling the Response04:48
  • Exporting Services04:54
  • Storing the User Form Data07:56
  • Extra Exercise: Add Another Field00:27
  • Understanding Authentication06:25
  • Logging the user in after Signup06:48
  • Understanding Actions02:22
  • Using Actions07:45
  • Connecting the User with their Data08:25
  • Initializing Firebase First04:39
  • Persisting the User Authentication06:29
  • Setting up the Login06:42
  • Signing Out08:03
  • Sidebar: JSON Web Tokens09:10

Master Project: Routing15 lectures • 1hr 22min

  • Understanding Routing04:45
  • Reviewing the Router Configuration05:06
  • Creating Routes07:09
  • History Mode08:47
  • Navigating with Links05:47
  • Custom Links05:21
  • Tailwind Styles for Active Links05:02
  • Naming Routes04:15
  • Setting up “Catch-All” and Redirect Routes06:23
  • Route Alias02:38
  • Guarding Routes05:13
  • Route Specific Guards04:54
  • Guarding Authentication Only Routes03:20
  • Redirecting after Logging Out04:55
  • Route Meta Fields08:26

Master Project: Uploading Files26 lectures • 2hr 39min

  • Preparing the Upload Component06:18
  • Handling Drag and Drop Events08:12
  • Handling the File06:34
  • Enabling Firebase’s Storage Service01:20
  • Uploading Files with Firebase05:57
  • Firebase Rules and Validation07:01
  • Adding the Progress Bar06:53
  • Making the Progress Bar Dynamic03:13
  • Improving the Progress Bar04:52
  • Handling Errors and Successful Uploads06:42
  • Storing the File Data in the Database10:41
  • Firebase References and Snapshots02:37
  • Fallback Upload04:38
  • Canceling Uploads04:45
  • Cancelling Uploads with Refs07:01
  • One more thing about References04:43
  • Querying the Database06:04
  • Storing the List of Songs04:44
  • Displaying the List of Songs03:02
  • Prop Validation02:52
  • Toggling the Form02:47
  • Validating the Song Form07:00
  • Editing a Song12:53
  • Deleting a Song from the Storage/Database10:06
  • Updating the list of songs after an Upload08:04
  • Router Leave Guards09:43

Master Project: Playing Music23 lectures • 2hr 31min

  • Creating the Home Page09:40
  • Checking the Scroll Position08:12
  • Infinite Scrolling08:23
  • Path Parameters04:47
  • Creating the Song Template09:53
  • Validating the Comment03:58
  • Prepping the Form04:42
  • Finalizing the Comment Form10:23
  • Displaying the Comments06:21
  • Updating the Comments List07:34
  • Query Parameters05:44
  • Detecting Query Parameters06:55
  • Updating the Comment Count04:27
  • Storing the song in the State07:27
  • Playing Audio03:33
  • Toggling Audio10:03
  • Duration and Current Position06:13
  • Formatting the Time04:32
  • Player Progress Bar08:21
  • Changing the Audio Position10:23
  • Extra Exercise: Update the “play” Button00:22
  • Creating links with Hash Fragments04:48
  • Route Transitions04:44

Master Project: Directives5 lectures • 26min

  • Introduction to Directives05:31
  • Writing our First Directive05:47
  • Passing Values to Directives05:22
  • Directive Modifiers05:06
  • Registering a Directive Locally04:39

Master Project: Internationalization7 lectures • 43min

  • Introduction to i18n06:01
  • Our First Translation07:07
  • Formatting and Pluralization06:40
  • Number Localizations08:39
  • Translating HTML with Component Interpolation05:56
  • Changing Locales05:41
  • Exercise: Translating the Rest of the App02:50

Master Project: PWA (Progressive Web App)9 lectures • 43min

  • What are Progressive Web Apps?04:19
  • The Manifest File05:24
  • Generating the Manifest File05:35
  • Configuring the Manifest File03:30
  • Offline Support with Service Workers06:00
  • Understanding Caching03:00
  • Workbox05:16
  • Firebase Data Persistence04:18
  • Handling Offline Uploads05:35

Master Project: Performance Optimizations7 lectures • 40min

  • Overview01:54
  • Auto-Registering Global Components10:38
  • Perceived Performance07:17
  • Dynamic Route Imports05:53
  • Progress Bar05:39
  • Code Coverage04:00
  • Rollup Visualizer05:02

Master Project: Deployment + Production2 lectures • 12min

  • Deploying an App with Vercel11:17
  • Sharing Your Project00:34

Master Project: Testing Your Vue App18 lectures • 1hr 56min

  • Introduction to Testing12:14
  • Introduction to Vitest02:50
  • Adding the Vitest UI02:55
  • Writing Our First Test08:57
  • Mounting with Vue Test Utils06:39
  • Testing the Inner Content04:15
  • Passing Data to Components05:11
  • Stubbing Components04:50
  • Avoid Boolean Assertions01:37
  • Testing Children Components06:30
  • Mocking Methods05:33
  • Testing Attributes06:28
  • Testing Pinia Actions06:07
  • Mocking Promises04:14
  • Testing Router Components06:35
  • Snapshot Testing11:54
  • E2E Testing Overview06:30
  • Writing an E2E Test12:21

Composition API14 lectures • 1hr 23min

  • The Composition API06:00
  • Mixins10:23
  • Reactive References07:09
  • The Reactive Function07:04
  • Watchers and Computed Properties08:03
  • Lifecycle Functions03:07
  • Props06:09
  • Template Refs04:38
  • Emitting Events01:54
  • Advantages of the Composition API11:51
  • Router Hooks07:42
  • Pinia Hooks03:03
  • Verifying Reactivity03:08
  • The setup Attribute02:58

Component Design Patterns7 lectures • 1hr 10min

  • Section Overview01:13
  • Controlled Components17:56
  • Separation of Concerns04:55
  • Third-Party Libraries as Controlled Components14:04
  • Moving Beyond Vue’s Event System11:27
  • Encapsulating Scrolling08:35
  • The Teleport Component11:55

Where To Go From Here?5 lectures • 3min

  • Thank You!01:17
  • Become An Alumni00:37
  • Endorsements On LinkedIn00:39
  • Learning Guideline00:10
  • Coding Challenges00:29
  • Course Review1 question
  • The Final Challenge1 question

Appendix: Extra Bits8 lectures • 33min

  • Quick Note: Upcoming Videos00:10
  • For WINDOWS Users ONLY00:55
  • Using The Terminal/Command Prompt10:05
  • Running script.js In Node03:05
  • Modules In Node04:22
  • ES6 Modules??00:22
  • ES6 Modules In Node08:59
  • Types of Modules05:10

BONUS SECTION1 lecture • 1min

  • Special Bonus Lecture00:16

Requirements

  • Basic HTML, CSS and JavaScript knowledge
  • You do not need any experience with Vue or any other JS framework!

Description

Just updated with all new Vue 3 features for 2023! Join a live online community of over 900,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with Vue.js.

Using the latest version of Vue, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.

We guarantee you this is the most comprehensive online resource on Vue. This project based course will introduce you to all of the modern toolchain of a Vue JS developer in 2023. Along the way, we will build a massive Music Player application similar to Spotify using Vue, Pinia, Vue Router, Composition API, Firebase, Vitest, Sass + more. This is going to be a full stack app, using Firebase.

All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up for the course will have their own project to put on their portfolio right away.

The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional Vue project all the way into production. We will start from the very beginning by teaching you Vue basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future VueJS projects. You’re going to love Vue if you are new to front end frameworks or even if you come from a React or Angular background!



Here is what the course will cover:

1. FUNDAMENTALS – In this section, we will learn about the fundamentals of Vue, such as computed properties, methods, and watchers. With just the fundamentals, we’ll be able to manipulate the document with events, binding, and conditional rendering. We’ll also learn how to debug an application with the official Vue Developer Tools.

2. PROJECT: PERSPECTIVE PLAYGROUND – In this section, we’ll build our first project by creating a CSS perspective playground. This will give us an opportunity to reinforce a lot of the fundamental concepts we learned in the previous section by developing a tool for visualizing how CSS properties can manipulate the perspective of an element.

3. BEYOND THE FUNDAMENTALS – In this section, we’ll dive into the inner workings of the Vue framework. How do JavaScript frameworks add reactivity? How does Vue compile templates into virtual DOM objects? This will give us insight into how Vue is able to deliver a framework for modern applications. We’ll also talk about lifecycle hooks and components.

4. LEARNING ABOUT THE TOOLS – In this section, we’ll take a step back from Vue to talk about some tools for developing applications. Throughout your career, you’ll need to deal with the tooling that helps us develop applications (i.e., Vite, Sass, PostCSS, ESLint). We’ll talk about how these tools are configured and why they’re necessary.

5. ADVANCED COMPONENTS – In this section, we’ll scaffold a Vue project with Vite. The goal of Vue is to make the development experience as smooth and painless as possible. Vue can help us with scaffolding a project, configuring tools, and running a server. This alleviates a lot of the more tedious tasks of web development. We’ll be able to jump straight into components to see how we can architect an application with components by using props, emitting events, slots, and dynamically rendering content.

6. TRANSITIONS & ANIMATIONS – In this section, we’ll learn how to add some pizzaz to an app by adding transitions and animations. Animations can breathe life into any application. They can also improve user experience by giving feedback to the user about their actions. We’ll discuss how animations can be achieved with CSS and JavaScript. Both are supported in Vue. We’ll even talk about the latest Web Animations API.

7. PROJECT: QUIZ APP – In this section, we’re going to take everything we’ve learned thus far to develop a quiz application. Quizzes are a great way to engage users in almost any industry.

8. MASTER PROJECT: INTRODUCTION TO PINIA – In this section, we’ll start working on the master project for this course, which is a music application! Upload, manage and listen to music without interruption. We’ll use TailwindCSS to help us with designing a beautiful modern application. It’s the new kid on the block that’s being embraced by the front-end dev community. Afterward, we’ll learn about state management by using the official state library called PINIA (replaces Vuex in newer codebases).

9. MASTER PROJECT: FORM VALIDATION – In this section, we will perform form validation to prevent invalid data from being submitted. Accidents happen. It’s our job to make sure to check for mistakes. We’ll learn how to enforce rules for various scenarios.

10. MASTER PROJECT: AUTHENTICATION – In this section, we’ll begin authentication and registration. Users will be able to login immediately after registering for an account. We’ll be using Firebase as a backend solution for managing and verifying users.

11. MASTER PROJECT: ROUTING – In this section, we’re going to handle routing with the Vue Router library. Underneath, the router library is using the history API to handle navigation. It allows us to switch between pages without refreshing the assets. We’ll look at how we can use this library to help us guard routes, add meta fields, and customize the appearance of our site based on the current route.

12. MASTER PROJECT: UPLOADING FILES – In this section, we’re going to start uploading files to Firebase. It’s vital we validate files with Firebase. We don’t want users to accidentally download a malicious file when listening to music. We’ll cover how to enforce validation with Firebase rules. After doing so, we’ll store additional information in a database. We’ll even cover how to implement a fallback solution in case drag n drop is not available.

13. MASTER PROJECT: PLAYING MUSIC – In this section, we’re going to start making the audio player functional. We’ll implement basic features such as playing/pausing, scrubbing and displaying the current duration. We’ll make the rest of the site functional by allowing users to submit comments, browse music, and sort data.

14. MASTER PROJECT: DIRECTIVES – In this section, we’ll briefly learn about writing custom directives. Directives are attributes that can extend an element with additional properties and methods. We’ll cover the basics and look at advanced concepts such as modifiers and arguments.

15. MASTER PROJECT: INTERNATIONALIZATION – In this section, we’ll add internationalization to a project for translating a project across multiple languages. There are different ways to translate a message. Some messages need formatting or pluralization. We can also translate numbers (i.e., currencies). We’ll look at how to switch between languages with a few lines of code.

16. MASTER PROJECT: PWA – The web has shifted to a mobile-first approach. In this section, we’ll add PWA (Progressive Web App) features to make our app mobile-friendly by using Workbox to cache files and persist data with Firebase.

17. MASTER PROJECT: OPTIMIZATIONS – In this section, we’ll make some final optimizations before shipping our app to production. There are various techniques and tools we’ll look at to help us fine-tune our app. We can use Vite to chunk files and auto-register components. We’ll add some features for helping the user understand the app is processing a request for a friendly user experience.

18. MASTER PROJECT: DEPLOYMENT – In this section, we’ll deploy our app to Vercel with a single command! Quick and easy.

19. MASTER PROJECT: TESTING – In this section, we’ll discuss how to test a project with Vitest. Unit testing allows us to test a feature in isolation. It’s the most common type of test you’ll write. There are a few problems with testing that can be resolved with mocking. By mocking code, we’ll be able to isolate features and test them. Afterward, we’ll move on to snapshot testing and E2E testing to bring everything together.

20. COMPOSITION API – In this section, we’ll discuss the latest feature introduced in Vue called the composition API. It’s a different way of building components. While Vue provides a simple API for writing components, there are some shortcomings. The composition API resolves these issues. We’ll talk about why you would want to use the composition API and understand why it was introduced.

This course is not about making you just code along without understanding the principles so that when you are done with the course, you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in Vue to someone that is in the top 10% of Vue developers. 

We guarantee you this is the most comprehensive online course on Vue JS! Have a look at the course outline video to see all the topics we are going to cover, all the projects we’re going to build, and all the techniques you’re going to learn to become a top Vue developer!

See you inside!


————

Taught By:

Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc… He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don’t know where to start when learning a complex subject matter, or even worse, most people don’t have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student’s valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei’s courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the courses!

——–

Luis Ramirez Jr
 is a software engineer with a decade of experience in web application development. He has spent his career architecting reliable, battle-tested, secure, scalable, and performant solutions. As an engineer, it’s always a priority to develop applications that provide a fluid user experience.

Most courses will teach you the “how,” but never the “why.” Luis believes that understanding core and critical programming concepts will make you a competitive engineer in today’s market. He’s here to assist you in this journey by demystifying low-level concepts that other instructors may gloss over.

Students will walk away with the knowledge to overcome any task thrown at them with critical thinking skills and being able to effectively communicate with teammates.

Who this course is for:

  • Students who are interested in going beyond a normal “beginner” tutorial
  • Programmers who want to learn the most in-demand skill of a web developer
  • Developers that want to be in the top 10% of Vue Developers
  • Students who want to gain experience working on a scalable large application
  • Bootcamp or online tutorial graduates that want to go beyond the basics

Share Post

Leave a Comment