Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Complete Vue Developer [Pinia, Vitest]

via Zero To Mastery

Go to class Write review

Overview

The only Vue.js tutorial + projects course you need to learn Vue (including all new Vue 3 features), build large-scale Vue applications from scratch, and get hired as a Vue Developer this year.
  • Build enterprise level Vue applications and deploy to production
  • File Uploads, Testing, PWAs, Internationalization, Authentication with Vue 3
  • Learn to build reactive, performant, large scale applications like a senior developer
  • Learn the latest features with Vue 3 including Composition API, Pinia (updated from Vuex), Vue Router + more
  • Learn to build beautiful applications using TailwindCSS, Sass, CSS Animations and Transitions
  • Master the latest ecosystem of a Vue Developer from scratch
  • Use Pinia (updated from Vuex) for state management in your applications
  • Become a top 10% Vue.js Developer
  • Learn to compare tradeoffs when it comes to performance and scalability
  • Set up authentication and user accounts
  • Use Firebase to build full stack applications
  • Master Vue design patterns
  • Converting apps to Progressive Web Apps
  • Routing with Vue Router
  • Testing your application with Vitest, snapshot testing, and even E2E testing
  • Using the latest ES6/ES7/ES8/ES9/ES10/ES11 JavaScript to write clean code
  • Learn to lead Vue projects by making good architecture decisions and helping others on your team

Syllabus

  •   Introduction
    • Complete Vue JS Developer: Zero to Mastery
    • Course Outline
    • Exercise: Meet Your Classmates and Instructor
    • Vue vs React vs Angular
    • Composition vs. Options API
    • Complete Course Resources + Code
    • Optional: Vue Documentary
    • How-to's: Speed up videos, Downloading videos, Subtitles
  •   Vue Fundamentals
    • Getting Started
    • Vue Dev Tools
    • Working with Data
    • Multiple Vue Instances
    • Accessing the Instance Data
    • Methods
    • Directives
    • Two-way data binding
    • Binding Attributes
    • Outputting Raw HTML
    • Listening to Events
    • Passing on Data with Events
    • Event Modifiers
    • Keyboard Events and Modifiers
    • v-model Modifiers
    • Computed Properties
    • Watchers
    • Binding Classes
    • Binding Styles
    • Conditional Rendering
    • The v-show Directive
    • List Rendering
    • Understanding the role of the key attribute
    • Endorsements On LinkedIn
    • Unlimited Updates
  •   Project 1: Perspective Playground
    • Creating a Perspective Playground
    • Copying to the Clipboard
    • Extra Exercise: Copy Button
  •   Vue: Beyond the Fundamentals
    • Mounting the Vue Instance
    • Understanding Lifecycle Hooks
    • Using Lifecycle Hooks
    • Virtual DOM
    • Understanding Reactivity with Proxies
    • The Vue Compiler
    • Introduction to Components
  •   Vue Developer Environment
    • Overview
    • Optional Videos In Appendix
    • Introduction to Vite
    • Exploring Vite
    • Understanding SASS
    • PostCSS
    • Installing ESLint
    • Configuring ESLint
    • Webpack
    • Conclusion
  •   Advanced Vue Components
    • Scaffolding a Vue Project
    • Sidebar: Understanding Servers
    • Reviewing the Files
    • Creating Components
    • Child Components
    • Component Styles
    • Using SASS in Components
    • Communicating Between Components
    • Props
    • The Limitations of Props
    • Emitting Events
    • Validating Props
    • Callback Functions
    • Inserting Content with Slots
    • Named Slots
    • Dynamic Components
  •   Transitions & Animations
    • Animating with CSS Transitions
    • Fine-tuning Transitions
    • Animating with CSS Animations
    • Animating with JavaScript
    • JavaScript Zoom Animation
    • CSS and JavaScript Transitions
    • Animating a List
    • Fixing the Animation
    • Transition CSS Class Names
  •   Project 2: Vue Quiz App
    • Setting up the Quiz Application
    • Rendering the Questions
    • Moving between Questions
    • Finishing Touches
  •   Master Project: Introduction to Pinia
    • The Next Step
    • Creating a New Project
    • Reviewing the Files
    • Formatting with ESLint and Prettier
    • Adding the Template
    • What is Tailwind?
    • Installing Tailwind
    • Practicing with Tailwind
    • Loading Assets
    • Understanding State
    • Reviewing the Pinia Configuration
    • Splitting the Template into Components
    • Disabling Vue’s Rules
    • Working with State
    • Alternative Mapping Functions
    • Understanding Getters
    • Using Getters
    • Closing the Modal
    • Aliases
    • Adding Tabs
    • Exercise: Imposter Syndrome
  •   Master Project: Form Validation
    • Setting up Form Validation
    • Registering a Plugin
    • Validation Components
    • Defining Rules
    • Applying Rules
    • Additional Rules
    • Validating Emails
    • Validating Numbers
    • Validating Passwords
    • Dropdown and Checkbox Fields
    • Validating the Form
    • Sidebar: Slot Properties
    • Rendering Multiple Error Messages
    • Default Values
    • Custom Error Messages
    • Validation Triggers
    • Showing Alerts
    • Setting up the Login Form
  •   Master Project: Authentication
    • Understanding Authentication
    • Reviewing the Rules
    • Setting up the Firebase SDK
    • User Registration
    • Handling the Response
    • Exporting Services
    • Storing the User Form Data
    • Extra Exercise: Add Another Field
    • Understanding Authentication
    • Logging the user in after Signup
    • Understanding Actions
    • Using Actions
    • Connecting the User with their Data
    • Initializing Firebase First
    • Persisting the User Authentication
    • Setting up the Login
    • Signing Out
    • Sidebar: JSON Web Tokens
  •   Master Project: Routing
    • Understanding Routing
    • Reviewing the Router Configuration
    • Creating Routes
    • History Mode
    • Navigating with Links
    • Custom Links
    • Tailwind Styles for Active Links
    • Naming Routes
    • Setting up “Catch-All” and Redirect Routes
    • Route Alias
    • Guarding Routes
    • Route Specific Guards
    • Guarding Authentication Only Routes
    • Redirecting after Logging Out
    • Route Meta Fields
  •   Master Project: Uploading Files
    • Preparing the Upload Component
    • Handling Drag and Drop Events
    • Handling the File
    • Enabling Firebase’s Storage Service
    • Uploading Files with Firebase
    • Firebase Rules and Validation
    • Adding the Progress Bar
    • Making the Progress Bar Dynamic
    • Improving the Progress Bar
    • Handling Errors and Successful Uploads
    • Storing the File Data in the Database
    • Firebase References and Snapshots
    • Fallback Upload
    • Canceling Uploads
    • Cancelling Uploads with Refs
    • One more thing about References
    • Querying the Database
    • Storing the List of Songs
    • Displaying the List of Songs
    • Prop Validation
    • Toggling the Form
    • Validating the Song Form
    • Editing a Song
    • Deleting a Song from the Storage/Database
    • Updating the list of songs after an Upload
    • Router Leave Guards
  •   Master Project: Playing Music
    • Creating the Home Page
    • Checking the Scroll Position
    • Infinite Scrolling
    • Path Parameters
    • Creating the Song Template
    • Validating the Comment
    • Prepping the Form
    • Finalizing the Comment Form
    • Displaying the Comments
    • Updating the Comments List
    • Query Parameters
    • Detecting Query Parameters
    • Updating the Comment Count
    • Storing the song in the State
    • Playing Audio
    • Toggling Audio
    • Duration and Current Position
    • Formatting the Time
    • Player Progress Bar
    • Changing the Audio Position
    • Extra Exercise: Update the "play" Button
    • Creating links with Hash Fragments
    • Route Transitions
  •   Master Project: Directives
    • Introduction to Directives
    • Writing our First Directive
    • Passing Values to Directives
    • Directive Modifiers
    • Registering a Directive Locally
  •   Master Project: Internationalization
    • Introduction to i18n
    • Our First Translation
    • Formatting and Pluralization
    • Number Localizations
    • Translating HTML with Component Interpolation
    • Changing Locales
    • Exercise: Translating the Rest of the App
  •   Master Project: PWA (Progressive Web App)
    • What are Progressive Web Apps?
    • The Manifest File
    • Generating the Manifest File
    • Configuring the Manifest File
    • Offline Support with Service Workers
    • Understanding Caching
    • Workbox
    • Firebase Data Persistence
    • Handling Offline Uploads
  •   Master Project: Performance Optimizations
    • Overview
    • Auto-Registering Global Components
    • Perceived Performance
    • Dynamic Route Imports
    • Progress Bar
    • Code Coverage
    • Rollup Visualizer
  •   Master Project: Deployment + Production
    • Deploying an App with Vercel
    • Sharing Your Project
  •   Master Project: Testing Your Vue App
    • Introduction to Testing
    • Introduction to Vitest
    • Adding the Vitest UI
    • Writing Our First Test
    • Mounting with Vue Test Utils
    • Testing the Inner Content
    • Passing Data to Components
    • Stubbing Components
    • Avoid Boolean Assertions
    • Testing Children Components
    • Mocking Methods
    • Testing Attributes
    • Testing Attributes
    • Testing Pinia Actions
    • Mocking Promises
    • Testing Router Components
    • Snapshot Testing
    • E2E Testing Overview
    • Writing an E2E Test
  •   Composition API
    • The Composition API
    • Mixins
    • Reactive References
    • The Reactive Function
    • Watchers and Computed Properties
    • Lifecycle Functions
    • Props
    • Template Refs
    • Emitting Events
    • Advantages of the Composition API
    • Router Hooks
    • Pinia Hooks
    • Verifying Reactivity
    • The Setup Attribute
  •   Component Design Patterns
    • Section Overview
    • Controlled Components
    • Separation of Concerns
    • Third-Party Libraries as Controlled Components
    • Moving Beyond Vue’s Event System
    • Encapsulating Scrolling
    • The Teleport Component
  •   Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • Coding Challenges
    • Endorsements On LinkedIn
    • Become a ZTM Ambassador ➡ Refer new students. Earn cash.
  •   Appendix: Extra Bits
    • Quick Note: Upcoming Videos
    • For WINDOWS Users ONLY
    • Using The Terminal/Command Prompt
    • Running script.js In Node
    • Modules In Node
    • ES6 Modules??
    • ES6 Modules In Node
    • Types of Modules

Taught by

Luis Ramirez Jr and Andrei Neagoie

Reviews

Start your review of Complete Vue Developer [Pinia, Vitest]

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.