The Nuxt 3 Bootcamp - The Complete Developer Guide

Introduce file-based routing in the Knox application by adding a pages directory with index.view for the home route and a Knox page to render routes.

Learn how auto importing components works in Nuxt 3 by creating a components directory, building a nav bar and car hero, and extracting the search bar into its own component.

Learn to implement dynamic and optional routing in Nuxt 3 by building a city and car path where city is required and car make is optional.

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.

Implement programmatic navigation in a Nuxt 3 search bar by wiring a city input, using navigateTo function for routing, and validating non‑empty input with a red Tailwind border for feedback.

Implement nested routing in nuxt 3 by turning the car view into a nested city route, enabling dynamic city, car, and make segments.

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.

Store reusable functionality in composables to centralize utilities like title case, enabling auto-import and clean reuse across multiple pages and components in a Nuxt 3 project.

master error handling in nuxt 3 by building a custom 404 page with error.vue in the root directory, and adding a back home button for users.

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.

Explore how Nuxt 3 combines server-side rendering, client-side rendering, and hydration into universal rendering, boosting initial load, navigation speed, and search engine optimization.

Explore handling a client-side location modal in a Nuxt 3 app by toggling state, updating the route to /city/{city}/car, and validating city input to prevent errors.

In the Nuxt 3 bootcamp, learn to throw a client-side 400 error when city input is not a number by parsing city.value, detecting NaN, and signaling an invalid city format.

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.

Understand why data fails to persist due to universal rendering and hydration, and learn to render a card component only on the client with a client-only component and loading state.

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.

Assemble Nuxt 3 listing pages by creating a listings index, view, and create page, build reusable components, and wire props, emits, and two-way data binding.

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.

Enable Google authentication in Supabase, create a Google Cloud project, configure OAuth consent screen, generate a client ID and client secret, then paste them into 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 how to extract path parameters in a Nuxt 3 app by pulling city from the route context and filtering a cars dataset loaded from JSON, returning city-matched results.

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.

Discover how to fetch cars data from a client endpoint using the use fetch cars composable, with route parameters and query filters, and render them in car cards.

Watch query parameters and call the useFetch refresh function to refetch data when they change, then apply a hacky page reload as a workaround for a Nuxt bug.

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.

Use Prisma to build dynamic car filters with a where clause for city, optional make, and min/max price. Construct a filters object and fetch the filtered data from the database.

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.

Learn to post a new car listing from the client via dollar fetch to /api/car/listing, transform fields (features to array, numeric fields) and validate the form before submission.

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.

Fetch and display all messages for a listing in Nuxt 3 bootcamp using a get endpoint, wiring the listing id from root and passing each message to a message component.

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.