Nuxt 3 Cheatsheet

1. Project Structure

/
├── .nuxt/          # Auto-generated build directory
├── app.vue         # Main app template
├── assets/         # Uncompiled assets (scss, images)
├── components/     # Vue components (auto-imported)
├── composables/    # Composable functions (auto-imported)
├── content/        # Content files for Nuxt Content
├── layouts/        # Layout components
├── middleware/     # Navigation middleware
├── pages/          # Application pages (auto-routed)
├── plugins/        # Vue plugins
├── public/         # Static files (directly served)
├── server/         # Server routes and middleware
└── nuxt.config.ts  # Nuxt configuration file

2. Key Features

• Auto-imports for components and composables
• File-based routing
• Server-side rendering (SSR)
• Static site generation (SSG)
• Hybrid rendering modes
• Vue 3 and Composition API
• TypeScript support
• Hot module replacement

3. Common Patterns

// Composable
const { data } = await useFetch('/api/users')

// Component
const { data: posts } = await useLazyFetch('/api/posts')

// Server route
export default defineEventHandler(async (event) => {
  return { message: 'Hello from API' }
})

// Dont Initial HTML , Dont Fetch On Initial Client Load
const {data, execute} = await useAsyncData(()=>{/*...*/} , {immediate: false})
//later on
execute()

//Dont Initial HTML , But Fetch On Initial Client Load (Block Client Side Nav)
const {data } = await useAsyncData(()=> /*...*/ , {server: false})

// Initial on HTML , Don't Block During Client Navigation
const {data,pending} = await useAsyncData(()=>/*...*/ , {lazy:true})

//Initial on HTML ,Block During Client Navigation (Block Client Side Nav)
const {data} = await useAsyncData (() => /*...*/, {//Other Options})

// composables/useState.ts
export const useCounter = () => useState('counter', () => 0)

// Component usage
const counter = useCounter()
counter.value++

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useUser()
  if (!user.value) return navigateTo('/login')
})

4. Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  // App config
  app: {
    head: {
      title: 'My Nuxt App'
    }
  },
  
  // Modules
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt'
  ],
  
  // Runtime config
  runtimeConfig: {
    apiSecret: '', // server-only
    public: {
      apiBase: '' // client & server
    }
  },
  
  // Build options
  build: {
    transpile: []
  }
})

5. Deployment Commands

# Development
npm run dev

# Production build
npm run build

# Static site generation
npm run generate

# Preview production build
npm run preview