Nuxt implementation checklist

Verify that 'experimental.payloadExtraction' is set to true in nuxt.config.ts to reduce the size of the initial HTML response.

Replace standard <img> tags with <NuxtImg> to enable automatic resizing, WebP conversion, and lazy loading.

Run 'npx nuxi analyze' to identify large third-party dependencies and replace them with smaller alternatives or move them to server-only modules.

Define SWR (Stale-While-Revalidate) or ISR (Incremental Static Regeneration) rules in nuxt.config.ts for high-traffic dynamic pages.

Use @nuxtjs/google-fonts with 'download: true' to host fonts locally and prevent layout shifts (CLS).

Use a validation schema (e.g., Zod) within a nitro plugin to ensure all NUXT_PUBLIC_* and NUXT_PRIVATE_* variables are present at runtime.

Configure 'nuxt-security' to automatically apply CSP headers, CORS policies, and Rate Limiting to server routes.

Verify that all /server/api routes use readBody() or getQuery() with input validation to prevent injection attacks.

Ensure 'devtools: { enabled: false }' is explicitly set or conditionally disabled for production builds.

Audit the /public folder to ensure no sensitive configuration files, .env backups, or private keys are exposed.

Ensure every manually keyed useFetch or useAsyncData call has a unique string key to prevent hydration mismatches during SSR.

Verify that Pinia stores are initialized within the setup function to prevent state cross-contamination between different user requests.

Implement 'fatal: true' in createError calls within fetch blocks to force a redirect to the error page when critical data fails.

Use useLazyFetch for non-critical UI components to prevent blocking the initial page navigation.

Use Nitro's 'useStorage' or 'defineCachedEventHandler' to cache expensive database queries or external API calls.

Use useSeoMeta() in every page component to define unique titles, descriptions, and Open Graph images.

Configure @nuxtjs/sitemap to automatically crawl routes and include dynamic slugs from your CMS or database.

Add @nuxtjs/robots to prevent indexing of staging environments and private admin routes.

Verify that useHead() includes a canonical link tag to prevent duplicate content penalties from search engines.

Inject JSON-LD scripts using useHead for product, article, or organization schemas to improve rich snippet visibility.

Create a custom error.vue in the root directory to handle 404 and 500 errors with a user-friendly UI.

Configure Sentry or a similar observability tool to capture both client-side Vue errors and server-side Nitro errors.

Run the build in a staging environment and check the browser console for hydration mismatches that could break interactivity.

Ensure Nitro server logs are outputting in JSON format for easier ingestion by log management platforms like Datadog or Logtail.

Verify that auth middleware correctly redirects unauthenticated users before the page component begins mounting.

Explicitly set the 'NITRO_PRESET' environment variable (e.g., vercel, netlify, or node-server) to match your hosting provider.

Include a database migration step in your CI/CD pipeline before the 'nuxt build' command executes.

Create a /server/api/health.ts route that returns a 200 status to allow load balancers to monitor instance readiness.

Ensure the hosting provider or reverse proxy (Nginx) is configured to serve .mjs and .css files with Brotli compression.

Disable production source maps in nuxt.config.ts unless they are specifically required for your error reporting service.