Vue.js 3 Masterclass: Build 7 Real-World Apps

Build a simple quiz game in Vue 3 using reactive data for questions, current index, and score. Use an interval to verify answers and display the final score.

Build a reactive Vue 3 quiz by using refs for score, current question, and answer, with computed properties and a timed check that validates answers and advances to finish.

Build an image gallery app in Vue 3, practicing templates, attribute binding, event handling, form submission, conditional rendering, and list rendering to display images in a grid and manage favorites.

Master event handling in Vue by using the v-on directive and its shorthand, wiring click and form submit actions, and applying the prevent modifier.

Master Vue event modifiers by using the prevent modifier to stop a form's default submit behavior, and learn why handling submit on the form rather than the button improves accessibility.

Render lists in Vue using the v4 directive to repeat elements for each item in an array or object, then bind attributes and prepare a key for efficiently rendering photos.

Master attribute binding in Vue by binding dynamic values to HTML attributes with the colon syntax, and apply the v4 directive with a unique key for a dynamic image gallery.

Render a task list in Vue 3 using v-for and v-if, bind task completion with v-model, and apply dynamic CSS classes for priority levels high, medium, and low.

Learn to save and load tasks in the browser using local storage across browsers by JSON.stringify and JSON.parse, storing with setItem and getItem under the tasks key for persistent tasks.

Remove a todo by index with splice and wire a remove task handler to the button, filter tasks with a computed list driven by a filter text ref via v-model.

Learn to build a real-world event registration app in Vue 3 using Vhit, single-file components, props and events, tailwind styling, fetch with a mock json-server, and optimistic UI.

Pass title, date, and description to reusable event cards with defineProps, using object syntax and TypeScript types, while applying PascalCase components, camelCase prop names, and kebab-case attributes.

Learn how a child component emits events to the parent via $emit and how the parent handles them with v-on or @ shorthand, with data passed through props and defineEmits.

Learn how component slots work by turning a button into a multi-word round button, updating imports, and passing content between opening and closing tags with a slot.

Create a reusable rounded card component that uses slots, then reuse it in the event card and a new multiword booking item to render dummy data.

Learn how named slots extend Vue's slots by passing header, content, and footer into reusable section cards using templates and v-slot syntax, with conditional rendering for missing parts.

Apply conditional named slots in Vue 3 to build a reusable section card with header, default, and footer. Use v-if and $slots to render slots and borders only when provided.

Fetch data from a mock server with the fetch API, store it in a ref, and render events in Vue while showing a loading state.

Create reusable loading placeholder cards for a Vue 3 grid, using a separate loading event card component, template-based conditional rendering, and Tailwind styles to mimic final content until data loads.

Load bookings from localhost 3001 slash bookings and display a loading placeholder with a dedicated loading state component, building on the events fetching pattern.

Implement optimistic UI updates and robust error handling for basic data integrity. Extract the event list to manage loading, empty, and error states, and enable booking cancellation with optimistic UI.

Implement optimistic UI for booking cancellations by emitting a cancel event, removing the booking from the list immediately, then sending a delete request and restoring on failure.

Extract the event fetching and display logic from the app into a dedicated event list component, handling loading, empty, and error states with retry, for an isolated, resilient user interface.

Learn to implement error handling in a Vue 3 event list, display a recoverable error with a retry button, and re-fetch events after resetting the error to recover without refreshing.

Learn to render dynamic icons in Vue 3 by status, switching between pending and confirmed icons with dynamic components, using script setup props and computed properties in the lucid library.

Explore sharing state across components with Vue composables, a function that encapsulates reactive state. Build a use bookings composable to centralize bookings data, fetch logic, and loading state for components.

This lecture guides refactoring to create self-sufficient booking list component, moving templates, imports, and booking fetch logic from app.vue, and enabling cancel and register actions via the use bookings composable.

Introduce a settings page with general, notifications, and privacy tabs, using TypeScript, inputs including radius checkboxes, selects, and text areas, and a save action; learn teleport, composables, keepalive, and transition.

Render tab content for a settings app by wiring three components: general, notifications, and privacy settings, to a tabbed Vue interface using dynamic components and a computed current tab.

Add markup for privacy and notifications forms, typing settings with interfaces in a use settings composable, and bind booleans for email, text, and visibility.

Create a useNotifications composable to manage a notifications ref, define id and message, add notifications with a numeric id from the current time, and auto remove after five seconds.