nuxtjs-mastery-skill_skill

Overview

This skill captures a senior lead developer’s 20-year playbook for building production-ready Vue 3 + Nuxt 3 applications with TanStack Query. It distills architecture decisions, composable patterns, TypeScript rules, and operational checklists to ship reliable, maintainable apps. Use it as a hands-on guide for setup, debugging, review, and performance hardening.

How this skill works

The skill inspects project setup, folder layout, data-fetching patterns, caching strategies, and type safety across the codebase. It recommends concrete composable patterns, TanStack Query usage (queries, mutations, optimistic updates), and error boundary placement. It also provides a preflight checklist and remediation steps for common reactivity bugs, performance regressions, and security gaps.

When to use it

• Bootstrapping a new Nuxt 3 project with production-ready defaults
• Integrating TanStack Query for robust data fetching and caching
• Debugging tricky Vue/Nuxt reactivity, lifecycle, or SSR issues
• Performing architecture or code reviews for clean code compliance
• Optimizing performance, bundle size, and lazy loading strategy
• Designing a scalable, feature-based folder structure and composables

Best practices

• Prefer composables for logic extraction; keep components thin and declarative
• Enforce TypeScript strict mode and type every API contract
• Wrap routes and critical UI sections with error boundaries
• Use TanStack Query for cache-first reads, background refetching, and optimistic updates
• Adopt feature-based folder structure and single-responsibility modules
• Validate inputs with Zod and keep environment secrets out of source

Example use cases

• Scaffold a Nuxt 3 app with @tanstack/vue-query, Pinia, VueUse, and form validation
• Refactor a component that mixes fetching, state, and UI into a composable + clean component
• Tune caching and stale times for product listing to reduce API costs
• Diagnose lost reactivity caused by plain value extraction from query results
• Run a production checklist: strict TS, CSP headers, bundle analysis, and rate limiting