Nuxt Cheatsheet

Auto-imports

composables/     → useXxx() auto-imported
utils/           → helper functions auto-imported
components/      → components auto-imported (PascalCase or kebab-case)
server/api/      → /api/* endpoints
server/routes/   → catch-all server routes
middleware/      → route middleware
plugins/         → Vue plugins

Data Fetching

// useFetch — SSR-friendly, component-level
const { data, status, error, refresh } = await useFetch('/api/items')

// useAsyncData — custom async logic
const { data } = await useAsyncData('key', () => $fetch('/api/items'))

// $fetch — imperative, no caching (in event handlers)
const result = await $fetch('/api/items', { method: 'POST', body: payload })

Server API Route

// server/api/items.get.ts
export default defineEventHandler(async (event) => {
  const query = getQuery(event)
  return { items: [] }
})

Route Middleware

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to) => {
  const { loggedIn } = useAuth()
  if (!loggedIn.value) return navigateTo('/login')
})

Runtime Config

// nuxt.config.ts
runtimeConfig: {
  apiSecret: '',          // server-only
  public: {
    apiBase: '/api',      // exposed to client
  }
}

// usage
const config = useRuntimeConfig()
config.public.apiBase

Key nuxt.config.ts Options

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@pinia/nuxt'],
  ssr: true,
  routeRules: {
    '/admin/**': { ssr: false },
    '/api/**': { cors: true },
  },
  experimental: {
    typedPages: true,
  },
})