Learning Path

Nuxt Roadmap

A progressive path to learn Nuxt properly, from framework structure and rendering modes to content, server routes, and production deployment.

Foundations

What Nuxt Is

  • Understand Nuxt as the meta-framework for Vue
  • SSR, SSG, SPA, and hybrid rendering mental model
  • When Nuxt is a better choice than plain Vue

Coming soon

Setup

Project Setup and Tooling

  • Install Node.js and package manager
  • Create a Nuxt app
  • Understand dev server, build, and preview commands

Coming soon

Architecture

Nuxt Directory Structure

  • pages, components, layouts, composables
  • server, middleware, plugins, content
  • How conventions reduce boilerplate

Coming soon

Routing

File-Based Routing

  • Static routes
  • Dynamic params and catch-all pages
  • Nested pages and route organization

Coming soon

UI

Layouts and Shared UI

  • Default and named layouts
  • Global navigation and footer patterns
  • Build reusable page shells

Coming soon

Reactivity

Vue in Nuxt

  • Use refs, computed, and watchers correctly
  • script setup inside Nuxt pages and components
  • Keep state predictable across navigation

Coming soon

Data

Data Fetching with useFetch and useAsyncData

  • Server-side vs client-side fetching
  • Caching and deduplication basics
  • Handle loading and error states cleanly

Coming soon

Content

Nuxt Content and File-Based CMS

  • Write Markdown-driven pages
  • Model collections and frontmatter
  • Build blogs, docs, and roadmaps from files

Coming soon

Server

Server Routes and API Endpoints

  • Create Nitro server endpoints
  • Use runtime config securely
  • Separate frontend concerns from server logic

Coming soon

State

Composables and Shared State

  • Extract reusable logic
  • Use useState responsibly
  • Avoid over-centralizing simple local state

Coming soon

Navigation

Middleware and Navigation Control

  • Route middleware basics
  • Auth and permission checks
  • Redirect patterns without breaking UX

Coming soon

SEO

SEO and Meta Management

  • useSeoMeta and head management
  • Open Graph and social cards
  • Sitemaps, RSS, and robots basics

Coming soon

Styling

Styling and UI Systems

  • Tailwind with Nuxt
  • UI libraries and component layers
  • Keep design tokens and spacing consistent

Coming soon

Modules

Working with Nuxt Modules

  • Official modules mental model
  • When to add a module vs custom code
  • Avoid dependency sprawl

Coming soon

Performance

Rendering and Performance

  • Choose SSR, SSG, or hybrid intentionally
  • Optimize images, payloads, and hydration
  • Understand route pre-rendering trade-offs

Coming soon

Quality

Type Safety and Testing

  • TypeScript-first patterns
  • Basic component and integration tests
  • Protect critical flows with lightweight tests

Coming soon

Delivery

Deployment and Runtime Environments

  • Node server vs static hosting
  • Environment variable strategy
  • Plan local, staging, and production clearly

Coming soon

Production

Observability and Maintenance

  • Log useful events
  • Track errors and uptime
  • Evolve modules, content, and routes safely over time

Coming soon