The Nuxt 3 Bootcamp - The Complete Developer Guide

Populate the page with components by integrating a nav bar, creating a car sidebar and car card components, and rendering one card via templates before adding more.

Learn to implement a dynamic path for car details in Nuxt 3 by composing a static /car segment with a dynamic name and a dynamic id, forming routes like /car/[name]-[id].

Define a default layout in Nuxt to render a consistent nav bar on every page, using the layouts directory and a slot to inject page content.

Extract the id from the route parameters, find the matching car with a computed value from the cars composable, and render the details with selective props, including features and description.

Learn how to implement a Nuxt error boundary to catch and display client side errors, wrap components, render a custom error view, and provide retry or reset options.

Connect your Nuxt app to a Supabase project by installing the Nuxt Supabase module, configuring environment variables for the project URL and API key, and refreshing the app.

Move from inline to named middleware in a middleware directory using auth.js; define a Nuxt root middleware to redirect protected pages like /profile and /listing, delivering a cleaner DRY solution.

Learn to extract query parameters with get query, then filter car data by make, min price, and max price, and apply the results to the page request.

Create a use fetch car composable to fetch data from the api car endpoint using the id parameter, handle errors, and return the data for the page.

Fix the error handling by using the API's error status code and status message to correctly display 404 for missing IDs and avoid generic 500 errors.

Learn how to enforce HTTP verbs in Nuxt 3 by naming endpoint files (post or get), preventing unauthorized methods and surfacing 405 errors for disallowed requests.

Refactor the last endpoint to use prisma instead of a json file for fetching a car by id with findUnique and a where clause, test, and prepare a client-side refactor.

Fetch listings on the client with the use fetch composable, querying /api/cars/listing/user/userID and mapping the data to listings using the base user composable for the user id.

Fix the get endpoints in the Nuxt 3 app by aligning data structures, updating car cards and detail components to use image, and renaming seats to number of seats.

Create a reactive contact form bound by v-model for name, email, phone, and message, validating before posting to /{listingId}/message and handling success or errors.

Store and retrieve images in a Nuxt 3 app using a Supabase images bucket with public access, and upload via the Supabase client to render the image path.