Implements Nuxt 4 applications with SSR, file-based routing, auto-imports, and Nitro deployment.
npx skills add https://github.com/bramanda48/skills --skill nuxt-bramanda48
Please help me install this Agent Skill. Skill: nuxt Source: https://github.com/bramanda48/skills/tree/main/skills/nuxt Command: npx skills add https://github.com/bramanda48/skills --skill nuxt-bramanda48
app/ srcDir and changed path aliases) differ enough from Nuxt 3 that outdated guidance causes real bugs. ## Core Features & Use Cases - Framework Reference: Covers Nuxt 4 directory structure, configuration, CLI commands, file-based routing, and rendering modes including hybrid rendering and route rules. - Data Fetching & SSR Guidance: Documents useFetch, useAsyncData, $fetch, createUseFetch factories, caching strategies, and how to avoid hydration mismatches and SSR context leaks. - Extensibility: Explains modules, layers, lifecycle hooks, and module authoring with Nuxt Kit for building reusable extensions. - Use Case: When building a Nuxt app that fetches data from an API, use this Skill to set up a typed createUseFetch composable with auth interceptors, configure route rules for hybrid rendering, and deploy to Vercel or Cloudflare with the correct Nitro preset. ## Quick Start Use the nuxt skill to create a Nuxt 4 page that fetches posts from an API with useFetch and deploys with the Vercel preset.High-intent search queries and answers about installing and using this skill.
Use useFetch or useAsyncData instead of calling $fetch directly in setup. These composables fetch on the server, serialize the result into the payload, and hydrate it on the client without a second request.
Nuxt 4 moves the default srcDir to app/, so app.vue, components, composables, and pages live under app/ while server/, shared/, and nuxt.config.ts stay at the root. The ~ and @ aliases now point to app/, and ~~ or @@ point to the project root.
Use the createUseFetch factory exported from app/composables to build a typed composable with shared baseURL, headers, and interceptors. Pass a function instead of an object when defaults must override caller options or when you need useNuxtApp.
Hydration mismatches occur when server-rendered HTML differs from the client render, typically from browser APIs like localStorage, random values, or time-based output in setup. Use useCookie, useState, or ClientOnly to keep server and client output consistent.
Yes, Nuxt uses Nitro as its server engine, which supports presets for Cloudflare Pages, Vercel, Netlify, Node.js, and static hosting. Set the preset in nuxt.config.ts or via the NITRO_PRESET environment variable before building.
Use runtimeConfig for secrets and values overridden by environment variables, with public keys exposed to the client. Use app.config for public build-time tokens like theme settings that support hot module replacement but cannot be changed via env vars.
githubInstalls and configures Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, and Nuxt applications.
auldsyababuaGenerate CI/CD pipeline configurations for GitHub Actions, GitLab CI, CircleCI, and Jenkins.
jeje-itImplement type-safe state management stores in Vue applications using Pinia.
jason23452Generates framework-aware HTTP transport clients with token headers and normalized errors for Vite and Nuxt projects.