Enforce secure Nuxt 4 server routes, rendering, and configuration practices.
npx skills add https://github.com/Probably-Group/Dev-AID --skill nuxt4
Please help me install this Agent Skill. Skill: nuxt4 Source: https://github.com/Probably-Group/Dev-AID/tree/main/.dev-aid/skills/expert/nuxt4 Command: npx skills add https://github.com/Probably-Group/Dev-AID --skill nuxt4
This Skill prevents common Nuxt 4 security and reliability mistakes by enforcing safe patterns for server routes, runtime config, rendering, and data fetching.
runtimeConfig.public while exposing only client-safe values.v-html usage with untrusted SSR content and recommends sanitization when HTML is required.useFetch with typing and error handling, follows composables/ conventions, and applies Nuxt 4 directory structure and middleware best practices.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.
High-intent search queries and answers about installing and using this skill.
Nuxt 4 server route validation uses Zod schemas to parse and verify request data before processing endpoints. This enforces safe server route handling by rejecting invalid payloads and reducing vulnerability risk across your SSR pages and API routes.
Nuxt 4 runtime config correctness requires placing secrets in the private runtimeConfig object rather than runtimeConfig.public. This restricts sensitive values to the server while exposing only client-safe configuration to the browser environment.
CSRF protection for Nuxt 4 server routes requires applying CSRF checks to state-changing endpoints like POST or PUT requests. This server route safety measure validates request origins to prevent cross-site request forgery vulnerabilities on mutating operations.
Nuxt 4 SSR requires XSS-safe rendering by avoiding unsafe v-html usage with untrusted server-side rendered content. To prevent XSS vulnerabilities, you must sanitize HTML inputs before rendering them or avoid injecting untrusted data into the DOM.
Typed useFetch data fetching in Nuxt 4 follows composables conventions with TypeScript typing and proper error handling. This pattern ensures robust fetching behavior across SSR pages and hybrid rendering setups without relying on brittle ad-hoc code.
robert-hoffmannGuide Nuxt 3+ projects to modern app/ directory structure and conventions.
klu-devOptimize Nuxt 4 SSR data fetching with useFetch and useAsyncData.
sudarshan-krishnanImplement Nuxt 3 authentication patterns with @clerk/nuxt for route protection and SSR-safe state.
RepairYourTechCreate full-stack Vue.js applications with Nuxt.js file-based routing and Nitro server routes.