Nuxt
The Vue meta-framework for routing, rendering, and data fetching — everything a production Vue app needs beyond components and reactivity.
18 节课
Nuxt
开始课程Getting Started
- What is Nuxt?What Nuxt adds on top of Vue — routing, rendering, and structure — and why most production Vue apps reach for it.
- Project Structure & ConventionsThe directories Nuxt treats specially, and why putting a file in the right folder is most of the configuration you need.
- File-Based RoutingHow the pages/ directory turns file paths into routes, with no router configuration to maintain by hand.
Layouts & Navigation
Data Fetching & Rendering
- useFetch and useAsyncDataNuxt's data-fetching composables, and why they behave differently from calling fetch() inside onMounted.
- Rendering Modes — SSR, SSG, and CSRThe difference between rendering on every request, pre-rendering at build time, and rendering only in the browser — and how to choose per route.
- Handling Loading & Error StatesUsing the pending, error, and status fields from useFetch to build interfaces that don't just freeze while data loads.
Auto-Imports & Composables
- Auto-Imports ExplainedWhy ref, useFetch, and your own components and composables all work in Nuxt with no import statement.
- useState for SSR-Safe Shared StateWhy a plain module-level ref leaks data between users under SSR, and how useState avoids it.
- Writing Custom ComposablesPutting your own reusable logic in composables/ so it's auto-imported everywhere, the same way Nuxt's built-ins are.
Server & Configuration
- Server API Routes with NitroWriting backend endpoints inside the same project with the server/ directory, powered by Nuxt's Nitro engine.
- nuxt.config.ts BasicsThe one file that configures modules, CSS, route rules, and every top-level setting in a Nuxt project.
- Runtime Config & Environment VariablesExposing environment variables to your app safely, with a clear line between server-only secrets and public values.
- Route MiddlewareRunning logic before a page renders — the pattern behind auth guards, redirects, and access checks.
Plugins, SEO & Deployment
- Plugins in NuxtRunning setup code once when the app starts — registering a library, injecting a helper, or hooking into Vue's app instance.
- SEO with useHead and useSeoMetaSetting per-page titles, descriptions, and social preview tags so every page — not just the homepage — is search- and share-ready.
- Deployment & Best PracticesHow Nitro's presets adapt one Nuxt build to different hosts, and a closing checklist before shipping.