100 Nuxt resources for developers

Utilize @nuxt/bridge to access Nuxt 3 features in Nuxt 2 projects, including the Composition API and Nitro server engine, without a full rewrite.

Create custom runtime logic by adding scripts to the /server/plugins directory to hook into Nitro's lifecycle events like 'render:html'.

Configure the 'routeRules' key in nuxt.config.ts to define per-route caching strategies, including ISR, SWR, and SPA-only rendering.

Define 'runtimeConfig' in your configuration and use 'useRuntimeConfig()' to access environment variables safely on both server and client.

Extract shared components, composables, and server logic into a base layer that can be extended by multiple Nuxt applications using the 'extends' property.

Use 'app.config.ts' for public, reactive UI configuration and 'runtimeConfig' for sensitive, environment-specific variables like API keys.

Implement 'defineNuxtRouteMiddleware' in the /middleware directory to handle authentication and redirection logic before a page renders.

Develop local modules in the /modules directory to automate repetitive tasks like injecting global CSS or registering third-party plugins.

Enable Nuxt DevTools in development to inspect component hierarchies, check state hydration, and analyze bundle sizes in real-time.

Use 'clearError' and 'showError' composables to manage application-level errors and prevent full-page crashes during SSR failures.

Integrate Drizzle ORM within /server/api routes for type-safe SQL queries against PostgreSQL or MySQL databases using drivers like 'postgres' or 'mysql2'.

Synchronize Pinia state between server and client by utilizing the Nuxt-specific Pinia plugin to prevent hydration mismatch errors.

Instantiate the Prisma client in a server utility file (/server/utils) to ensure a single connection pool across Nitro server routes.

Leverage the @nuxtjs/supabase module to manage user sessions and protect server routes using the 'serverSupabaseUser' helper.

Use Zod to schema-validate 'readBody(event)' data in server routes to ensure incoming POST requests meet strict type requirements.

Implement @nuxt/content to manage Markdown, YAML, or CSV files as a Git-based CMS with built-in search and query capabilities.

Utilize the built-in 'unstorage' layer in Nitro to implement multi-driver caching (Redis, FS, memory) for expensive API calls.

Use 'useFetch' with the 'key' parameter to implement stale-while-revalidate patterns, reducing perceived latency for dynamic data.

Create a raw server route in /server/api/webhooks to process Stripe events using 'readRawBody' for signature verification.

Implement manual state updates in Pinia stores before server confirmation to create instantaneous feedback for user actions.

Implement streaming responses from OpenAI or Anthropic in Nuxt server routes using the 'StreamingTextResponse' utility for real-time AI chat.

Utilize @nuxt/ui for accessible, Tailwind-based components that are specifically optimized for Nuxt 3's auto-import system.

Configure @nuxt/image with providers like Cloudinary or Vercel to automatically resize and serve WebP/AVIF formats based on client headers.

Apply the '@tailwindcss/typography' plugin to style raw Markdown output generated by LLMs within Nuxt pages.

Use 'puppeteer-core' within a Nitro server route to generate dynamic PDFs from Nuxt components for invoices or reports.

Automate sitemap generation, robots.txt, and JSON-LD schema using the 'nuxt-seo' module collection to improve search rankings.

Optimize Nuxt for Vercel Edge Functions by ensuring server routes do not use Node.js-specific APIs like 'fs' or 'path'.

Integrate @vueuse/nuxt to access 200+ composition utilities like 'useIntersectionObserver' or 'useDark' without manual configuration.

Use the 'nuxt-icon' module to load any icon from the Iconify set on-demand, preventing large SVG bundles in the client build.

Run 'nuxi analyze' to visualize the client and server bundles, identifying large dependencies like 'moment' or 'lodash' for removal.