nuxt4

What problem does it solve?

This Skill prevents common Nuxt 4 security and reliability mistakes by enforcing safe patterns for server routes, runtime config, rendering, and data fetching.

Core Features & Use Cases

• Server route safety: Validates request inputs and applies CSRF protection for state-changing endpoints to reduce vulnerability risk.
• Runtime config correctness: Keeps secrets out of runtimeConfig.public while exposing only client-safe values.
• SSR/XSS-safe rendering: Avoids unsafe v-html usage with untrusted SSR content and recommends sanitization when HTML is required.
• Nuxt 4 implementation patterns: Uses useFetch with typing and error handling, follows composables/ conventions, and applies Nuxt 4 directory structure and middleware best practices.
• Use Case: You are implementing authentication-protected endpoints plus SSR pages in a Nuxt 4 app and want consistent validation, secure config handling, and robust fetching behavior without brittle ad-hoc code.

Quick Start

Ask your AI to generate Nuxt 4 server routes and page code that validate every input with Zod, keep secrets out of runtimeConfig.public, protect state-changing operations with CSRF, and fetch data using typed useFetch with proper loading and error handling.