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

Kick off the Vue 3 course by building your Vue app to master interpolation, ref reactivity, computed values, and binding form inputs to refs with starter code and live server.

Make the Vue 3 app alive by wiring the template to a reactive message defined in the setup method and mounting with createApp, ref, and mount.

Apply conditional css classes in Vue by wrapping the text in a span and using v-bind with an object to toggle red or green classes based on a yes/no value.

Learn how to bind an input to a ref using v-model for two-way binding, so the age input and reactive data update automatically in Vue 3.

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.

Learn to implement a Vue photo favorite toggle by passing the photo to a toggle function, flipping isFavorite, and conditionally applying an active class to color the star yellow.

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.

Wire new task and priority inputs to refs, handle form submit with prevent, validate values, update tasks array with a generated id, then reset inputs and save to local storage.

Explore watchers in Vue 3, compare them with computed properties, and use the watch function for side effects on refs and arrays, including deep and immediate options and local storage.

Explore how watch and watchEffect manage reactivity in Vue 3, using the immediate option to run callbacks on initialization and react to changes in refs with practical examples.

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.

Create a new Vue project with Vite, install dependencies, run the dev server for hot module replacement, and configure prettier, ESLint, and Vue DevTools for a production-ready build.

Explore the Vue 3 project structure built with Vite, covering main.js, App.vue, single-file components, script setup, and the component tree, plus tooling like ESLint, Prettier, jsconfig, and Vue DevTools.

Install tailwind CSS in a Vue Vit project, clean up the starter files, configure tailwind with content paths, and apply basic tailwind classes to style a simple app.

Create your first custom component, the event card, import it with relative or absolute paths in Vue, and explore the component tree and tailwind styling.

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.

Demonstrates fall through attributes in Vue components and how merging and v-on inheritance affect behavior. Learn to build reusable button components with props and emitted events for predictable interactions.

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.

Create a reusable rounded card component and a booking item component, reuse the card in the event card, then render three booking items in a grid with v-for.

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.

Create a reusable round button with a variant prop to support default value and danger styles for cancel actions, using Tailwind classes via array syntax in a booking item.

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.

implement a loading state for fetching events by using an events loading flag, wrapping the fetch in a try/finally block, and showing a loading indicator to prevent layout shifts.

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.

Post data to the server by sending a JSON payload with a post request using fetch, setting content-type to application/json and JSON.stringify to create a booking at the bookings endpoint.

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

Learn to implement a bookings fetch flow in Vue: set up reactive bookings and loading state, fetch from the API, render bookings with a title prop, and display loading placeholders.

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.

Explain how optimistic UI updates the bookings list with a pending status, uses a post request to confirm or mark as failed, and handles errors to preserve data integrity.

Implement optimistic user interface for event bookings by adding the booking immediately with a pending status, then update to confirmed after a successful post, with error handling and duplicate checks.

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.

Master responsive design fundamentals with Tailwind utilities for mobile layouts. Configure breakpoints and grid columns to switch from one column on small screens to two columns on large screens.

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.

Build a reusable error card with a customizable retry button, apply it to event and booking lists, and manage error state with slot-based retries.

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.

Create a reusable fade transition in Vue by building a custom transition component with a slot, CSS classes, and optional global styles, then import and use it.

Copy course form styles into project, apply directive, then build a Vue 3 form with username, email, about, gender, and country, and ensure transitions work with a single root element.

connect the form inputs to a central data store with a use settings composable that holds the form data and types, and compare ref versus reactive in vue 3.

KeepAlive preserves state of dynamic components in a Vue 3 multi-step form by wrapping the dynamic component and binding inputs to a settings composable, preventing data loss on tab switches.

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

Store and retrieve user settings in local storage, initialize refs from saved data or defaults, and watch changes to save updates with JSON.stringify and localStorage.setItem.

Explore TypeScript safety in Vue by building a reusable settings init with generics and keyof, the settings map, and watchers to manage data stored in local storage.

Build a toast notification system in a Vue 3 app with teleported notifications to the body, using useNotifications to manage shared state and auto or manual dismissal.

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.