vuejs-masterclass-2024-Edition

This respository contains the source code for the Vue.js Master Class 2024 Edition course.

About The Masterclass

The Vue.js Master Class is our signature course and THE most popular source online for learning how to build a real world Vue.js application from scratch. This 2024 Edition of the course is a complete re-write with the latest and great official and community Vue.js technologies.

The Vue.js Masterclass 2024 Edition is so comprehensive that we can not cover everything on this page. Thus we’ve created a separate page where you can learn more about it.

During this video course, we focus on learning practical application and strategies for Vue.js by building a feature-rich product management app together. The goal of this course is to teach you Vue.js along with Best Practices, Modern Javascript, and other exciting technologies, by building a Real World application.

We cover the fundamentals, like:

  • Setting up Vue 3 project using Vite
  • Integrating VueDevTools with Vue js 3
  • Routing with Vue Router and File Based Routing with unplugin-vue-router
  • Vue Component and Composable Design with the Composition API
  • State management with Pinia
  • Modern Javascript (ES2023/ESNext)
  • User permissions & Route Guards
  • Data and File Storage, plus Authentication with Supabase
  • Automatic code review with ESLint and Formatting with Prettier
  • Consuming REST APIs
  • Application architecture and best practices
  • Error handling and monitoring
  • Supabase Row Level Security
  • Database migrations and seeding

We also dive into practical real world features and how to implement them quickly:

  • Robust and beautiful components with TailwindCSS and ShadCN Vue
  • SEO, Sitemaps, schema.org and Metadata
  • Transactional emails for dynamic app notifications
  • Data filtering and searching strategies across multiple resources (projects, tasks, etc)
  • Forms and Validation with Formkit
  • Auto saving on edits to inline content
  • Pagination and Infinite scroll support
  • Real time commenting
  • Analytics and events tracking with Google Analytics 4, Google Tag Manager, and Sentry.

By completing the Vue.js Masterclass, you will be able to land any Vue.js related job or optimize/improve your own projects!

Requirements You should be familiar with JavaScript, HTML, basic CSS, and have fundamental knowledge of Vue.js (specifically with the Composition API).

If you are just starting out with Vue.js, we suggest that you watch our free course Vue.js Fundamentals with the Composition API along with the Vue Component Fundamentals with the Composition API course. These courses will help you learn Vue.js fundamentals and prepare for the journey ahead.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

ENV Variables

Make sure to provide the env variables listed in the .env.example file along with their values.