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].

Build in-app navigation in a Nuxt 3 app by wiring the nav bar to the Nux link component for page transitions, including dynamic routes like /city/[name], and return home.

Change page titles in Nuxt 3 with useHead, creating dynamic titles like cars in Ottawa from route parameters and title-case logic.

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.

Define a custom layout and apply it to specific pages by overriding the default layout. Use page meta to set layout: custom and render via a slot.

Learn to dynamically render car cards in nuxt 3 by loading cars.json from a data directory via a use cars composable, binding car properties, and enabling navigation to car pages.

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.

Throw a custom server error in Nuxt when a car ID from the JSON data does not exist, returning a 404 via the error view.

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.

Learn how to persist data in the browser by using the VueUse local storage composable in a Nuxt app, storing favorites as an object and toggling entries.

Add a car price filter with min and max inputs and query parameters in Nuxt. Read min and max from the route, show a range, and push updates with validation.

This feature introduces OAuth authentication with Google, enabling users to log in, list cars, view messages, manage listings, and access protected profile routes only when authenticated.

Learn to set up a Supabase account to enable authentication, a database, and storage for a Nuxt 3 project, including signing in with GitHub and creating a new project.

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.

Implement Google OAuth in a Nuxt 3 app with a login page and Google login button, use the super base client to manage authentication and access user data.

Conditionally render the nav bar based on auth status, showing profile and logout when logged in, or a login link when not, using the user from use super base user.

protect profile pages with inline route middleware to block access for unauthenticated users. redirect to login and apply the middleware across profile routes.

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.

Explore moving data from a JSON file to a Supabase postgres database, build tables for listings and messages, and define columns like id, name, email, phone, and message.

Learn how Prisma, a Node ORM, lets you define models and manage database tables programmatically in your Nuxt 3 app, using the Prisma directory and schema.prisma.

Create a new post endpoint at /api/car/listings, validate the request with JOI, and persist the car listing with Prisma, including make, model, year, miles, city, seats, features, price, and description.

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.

create a delete endpoint for car listings, parsing the listing id from the route and issuing a prisma delete, then test that the listing is removed.

Add the final two endpoints for listing messages: a post to create messages on /api/car/listing/{listingId}/message and a get to fetch all messages for a listing, using Joi validation and Prisma.

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.