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?

Astro Cheat Sheet

SolidJS Cheat Sheet

Explore Topics

#NuxtJs#NuxtJsCheatSheet#WebDevelopment#Intermediate#FileBasedPage#DataFetching#CoreComposables#NuxtConfigTs#DataStructures#APIs#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services