Nuxt.js Cheat Sheet
A reference for Nuxt 3's file-based routing, useFetch and useAsyncData composables, and server API routes for full-stack Vue apps.
2 PagesIntermediateMar 18, 2026
File-Based Page
Pages are auto-routed from the pages/ directory; params come from useRoute().
vue
<!-- pages/posts/[id].vue --><script setup>const route = useRoute();const { data: post } = await useFetch(`/api/posts/${route.params.id}`);</script><template> <h1>{{ post.title }}</h1></template>
Data Fetching
SSR-aware composables for fetching and sharing async data.
javascript
<script setup>// useFetch: SSR-friendly fetch that caches and dedupes requestsconst { data, pending, error, refresh } = await useFetch('/api/products');// useAsyncData: for custom async logic or combining multiple sourcesconst { data: user } = await useAsyncData('user', () => $fetch('/api/user'));</script>
Core Composables
The building blocks of a typical Nuxt 3 application.
- useFetch- SSR-aware wrapper around $fetch that caches and dedupes requests
- useAsyncData- resolves any async logic and shares its state between server and client render
- $fetch- Nuxt's built-in fetch utility (from ofetch), usable anywhere including server API routes
- useState- creates SSR-safe, shared reactive state keyed by name, like a lightweight store
- useRoute / useRouter- access the current route and perform programmatic navigation
- definePageMeta- sets per-page metadata such as layout, middleware, or transition
- server/api/- directory for defining server (Nitro) API routes that are auto-registered
nuxt.config.ts
Central configuration for modules and runtime config.
typescript
export default defineNuxtConfig({ modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'], runtimeConfig: { apiSecret: process.env.API_SECRET, public: { apiBase: '/api' }, }, devtools: { enabled: true },});
Pro Tip
Use useFetch or useAsyncData instead of onMounted + fetch for anything that should render on the server -- otherwise you lose SSR and get a content flash, because the component has no data during the server render pass.
Was this cheat sheet helpful?
Explore Topics
#NuxtJs#NuxtJsCheatSheet#WebDevelopment#Intermediate#FileBasedPage#DataFetching#CoreComposables#NuxtConfigTs#DataStructures#APIs#CheatSheet#SkillVeris
