Nuxt 3 & Supabase Mastery: Build 2 Full-Stack Apps

Explore the essentials of building a Nuxt 3 project, including the next directory structure, pages and routes, layouts, modules, Tailwind CSS, SEO, data fetching, and deployment.

Prepare your project for next four by adopting the app directory structure, moving the four folders and app.vue into app, and noting the shift from next three to next four.

Create a Nuxt app from scratch, install dependencies, and explore core project structure, including pages, components, layouts, composables, and the Nuxt config.

Opt into Nuxt 4 compatibility mode for Nuxt 3 projects, check package.json version, and move files into the app folder for future-proofing.

Create pages and set up routing in Nuxt by building a pages folder with index and about views, and navigate with nuxt-link for seamless client-side routing.

Explore dynamic routing in Nuxt by creating parameterized pages using square-bracket folders, access the route with useRoute, display the id parameter, and prepare to fetch blog posts.

Learn to create and apply layouts in nuxt 3 using a layouts directory, next layout in app.vue, and a default view with a single root element and a slot.

Explore creating and switching multiple layouts in Nuxt 3, globally or on a per page basis, using define page meta and dynamic layout changes.

Install a module with npm or yarn, then enable it in the next config to unlock functionality for your app. Tailwind CSS is demonstrated: install, enable, and run dev.

Apply Tailwind CSS utilities to style the portfolio, using container, max width 2xl, and a flex header with logo and navigation; read the Tailwind CSS docs for class references.

Master Nuxt 3 components by creating reusable view components, organizing a components directory, and using automatic imports to build layouts with header and footer and scoped styling.

Master Nuxt 3 seo by configuring meta tags, dynamic titles, and open graph across pages with global and composable approaches, plus add Google fonts.

Fetch external data for a portfolio projects page using dollar fetch, use fetch, and use async data, compare their loading and error states when displaying GitHub repositories.

Learn to fetch GitHub projects in a Nuxt 3 app, render a grid of repositories with names, stargazers, and descriptions, and filter and sort by stars.

Explore implementing dark mode with Tailwind CSS, configure next color mode to switch between light and dark based on system or user preference, and persist choices in local storage.

Build a reusable color mode selector in a Nuxt 3 app to toggle system, light, and dark modes using a color mode composable and tailwind classes.

Learn how Nuxt content provides a static file–based CMS by reading a content directory of markdown, yaml, csv, and json, using catch-all routes and prose components to power blog posts.

Learn to scaffold a blog inside a portfolio using Nuxt Content, create a catch-all slug route, and render markdown via the content doc component with a content folder structure.

Transform markdown into styled HTML by enabling Tailwind's typography plugin and applying the prose class to render headings, lists, tables, and links with typographic defaults, including dark mode tweaks.

Render markdown pages with front matter to provide meta seo tags. Learn to use open graph, og titles, twitter meta, and yaml frontmatter in next content to optimize metadata.

Render markdown content as pages, such as an about page, using a content component with a relative path. Tailwind prose provides typography styling and front matter enables SEO metadata.

Learn to add images to markdown content and enable code syntax highlighting with Shiki in Nuxt Content, including configuring themes and integrating images in the public folder.

Add a header blog link and query blog posts from the content folder, retrieving only the title and path with use async data to render a linked list of posts.

Mix markdown with Vue components using MDC syntax, install the MDC extension, place components in the content directory, and render a blog post list with targeted queries and typography controls.

Learn to redesign a blog post list in Nuxt 3 by building a two-column UI with date and title, using Tailwind, dark mode, and hover effects.

Redesign the blog post list adds publish dates from frontmatter, sorts posts by published at newest first, and displays the year only for the first post of each year.

Unify the page creation workflow by moving the projects page to markdown, reusing a single components-based project list, and leveraging markdown content with the typography plugin for consistent styling.

Discover how to build an auto-generated table of contents for blog posts using slots in Nuxt 3, rendering h2 and h3 headers with a sticky side panel.

Create and render a table of contents in a Nuxt 3 blog by adding a toc property to markdown, using tailwind grid layout and a recursive links component for headings.

Enable smooth scrolling for hash navigation by configuring the view router with a router options file, handling saved positions and defaults for a polished table of contents.

Show how to use the browser's Intersection Observer API to highlight the active table of contents section by observing H2 and H3 headers and updating the active link.

Learn to handle 404 not found errors in nuxt by using a not found named slot to customize messages, and build a universal error page with error dot view.

Explore page transitions in Master Nuxt 3 using the Vue transition component, configure a page transition, and customize enter and leave animations with css such as opacity, blur, and grayscale.

Move the portfolio page to markdown, reuse the blog posts component with different markdown, and pass props via slots to customize rendering, including a latest posts view with a limit.

Fix a Nuxt 3 page transition bug that fails to highlight the active blog section by delaying DOM readiness with a setTimeout and restructuring the unmounted hook.

Fix dark mode across the app by applying dark hover styles and gray 800 backgrounds, and implement group hover in Tailwind for consistent visibility.