The Complete Production SOP: How to Deploy and Run Nuxt 3 Auto-Imports, useAsyncData & useFetch in Autonomous AI Agents
Production SOP to install and run Nuxt 3 Auto-Imports, useAsyncData & useFetch in Codex, Claude Code, and Cursor. Avoid hydration traps and redundant imports.
Technical Overview & Architectural Context
Autonomous coding agents frequently fail when generating Nuxt 3 code due to deep-seated training habits derived from standard Vue 3 and Nuxt 2. Agents instinctually emit manual imports such as `import { ref, computed } from 'vue'` or `import { useFetch } from '#app'`, which violates Nuxt 3 auto-import patterns and introduces circular bundle bloat. More critically, LLMs regularly treat `useFetch` like standard client-side `fetch` or Axios, calling it inside event handlers, neglecting deterministic deduplication keys across SSR and hydration boundaries, or causing full-page blocking when asynchronous lazy rendering is required. The `nuxt-3-composables-auto-import` skill enforces deterministic SOP boundaries on autonomous coding agents (Codex, Claude Code, Cursor, Windsurf). It mandates proper use of Nuxt 3 composables: binding unique static or derived cache keys for `useAsyncData`, using `useLazyFetch` with immediate route rendering, leveraging the `transform` and `pick` options to minimize payload transfer across the SSR wire, and enforcing the strict separation between setup-level SSR data fetching and client-triggered mutations executed via `$fetch`.
Prerequisites & Environment Requirements
Verified Search Intents & Long-Tail Queries Solved
This operational tutorial is engineered to provide deterministic solutions for these developer search queries:
Step-by-Step Execution Playbook
Local Environment Setup & SKILL.md Mounting
Mount the skill manifest into your agent runtime's global or project configuration directory.
To inject deterministic SSR and composable rules into your autonomous coding environment, install the SKILL.md manifest into the standard agent skill directory. For workspace-level adherence across Cursor and Windsurf, mount it into `.agents/skills/`. For Claude Code or Codex, register it in your local skill path so the runtime parses frontmatter triggers during intent matching.
mkdir -p .agents/skills/nuxt-3-composables-auto-import && curl -fsSL https://askills.dev/api/skills/nuxt-3-composables-auto-import/raw -o .agents/skills/nuxt-3-composables-auto-import/SKILL.md---
name: "nuxt-3-composables-auto-import"
description: "Eliminate boilerplate imports and handle SSR data fetching with useAsyncData and useFetch."
metadata:
author: "Nuxt"
version: "1.0.0"
runtime_compatibility:
- "codex"
- "claude-code"
- "cursor"
- "windsurf"
triggers:
- "usefetch in nuxt 3"
- "ssr data fetching useasyncdata"
- "refresh nuxt usefetch data"
permissions:
fs_read: true
fs_write: "workspace"
shell_exec: false
net_access: false
---
# Nuxt 3 Auto-Imports, useAsyncData & useFetch Rules
1. Omit explicit imports for Vue core APIs (ref, computed, watch, onMounted) and Nuxt composables (useFetch, useAsyncData, useRoute, useRouter, useState).
2. Never execute `useFetch` or `useAsyncData` inside client-side event handlers or lifecycle callbacks; use `$fetch` for event-driven network calls.
3. Always specify a deterministic cache key when `useFetch` or `useAsyncData` utilizes dynamic route parameters or variable endpoints.
4. Apply the `transform` or `pick` option to prune server payloads before transferring state to the browser payload bundle.Setting `fs_write: workspace` and `shell_exec: false` ensures the agent stays strictly within project boundaries and prevents arbitrary script execution during data fetching scaffolding.
Do not rename the filename from `SKILL.md`. Claude Code and Cursor look specifically for `SKILL.md` or `.cursorrules` to dynamically match agent triggers.
Nuxt Type Generation & Auto-Import Verification
Ensure Nuxt has generated its internal manifest so TypeScript and agent linters recognize auto-imports without false errors.
Because Nuxt 3 auto-generates declaration files in `.nuxt/imports.d.ts` and `.nuxt/nuxt.d.ts`, the agent must verify the presence of these definitions before analyzing code. If not prepared, agents may incorrectly assume missing symbols and re-introduce boilerplate import statements.
npx nuxi prepareInstruct your agent to check `.nuxt/tsconfig.json` before altering `tsconfig.json` to prevent overwriting critical Nuxt compiler paths.
If running in a Dockerized or CI sandbox, ensure `.nuxt` directory has write permissions; otherwise `npx nuxi prepare` will exit with an EACCES failure.
Intent Matching & Trigger Invocation
Invoke the agent using targeted trigger phrases to guarantee activation of Nuxt 3 composable guardrails.
When dispatching prompts to Claude Code, Codex, or Cursor Composer, explicitly include one of the predefined trigger phrases (e.g., 'ssr data fetching useasyncdata' or 'usefetch in nuxt 3'). This forces the agent's LLM context compiler to prioritize the SKILL.md SOP over generic Vue 2/3 patterns.
claude 'Implement ssr data fetching useasyncdata for the user profile page with key deduplication and payload picking'Structure prompts to request payload pruning via `pick` or `transform`; this cuts the serialized SSR `__NUXT__` inline JSON size by up to 70%, saving client parse time and agent context budget.
Avoid mixing `$fetch` and `useFetch` without purpose. `useFetch(url)` is an SSR-aware wrapper around `$fetch`; passing `$fetch` inside `useAsyncData` without a key causes SSR hydration mismatches.
Verification, Type-Checking & Hydration Gate
Run automated typecheck and build gates to ensure zero manual imports and error-free Nuxt compilation.
Before completing a task, the agent must execute Nuxt's type-checker and verification suite to ensure that no explicit imports for auto-imported composables were added, and that all data fetch calls are strongly typed.
npx nuxi typecheck && npx vue-tsc --noEmitRun `npx nuxi analyze` in staging to verify that client payload bundles do not contain backend-only model properties pruned by `transform`.
Ensure the agent does not attempt `npx nuxi build` in constrained sandboxes with less than 2GB of memory, as Vite/Rollup compilation may be killed by OOM.
Real-World Scenario: SSR Product Catalog with Dynamic Filtering, Deduping, and Immediate Navigation
“Build a Nuxt 3 product catalog page at `pages/products/[category].vue`. Use SSR data fetching with useAsyncData or useFetch in Nuxt 3. Ensure navigation is non-blocking (lazy), deduplicate cache keys based on route param and query page, prune the response to only return 'id', 'name', 'price', and 'rating', and implement a refresh nuxt usefetch data button. Do not add manual imports for Vue or Nuxt composables.”
Runtime Troubleshooting & Failure Modes
Root Cause: The agent generated a `useFetch` or `useAsyncData` call with a static key inside a dynamic route or failed to pass a reactive getter for the endpoint URL, causing the client hydration pass to evaluate a mismatched cached state from a prior route.
// Replace static string key with dynamic getter function
const route = useRoute()
const { data, refresh } = await useFetch(() => `/api/products/${route.params.category}`, {
key: `products-cat-${route.params.category}`,
watch: [() => route.params.category]
})Root Cause: The agent placed `useFetch` inside a client-side button click handler, form submit method, or `watch` callback instead of invoking Nuxt's unhandled client fetcher `$fetch`.
// Replace useFetch in client-side handlers with $fetch
const submitOrder = async () => {
try {
const res = await $fetch('/api/checkout', {
method: 'POST',
body: { cartId: cart.value.id }
})
await refreshNuxtData('cart-key')
} catch (err) {
console.error('Submission failed', err)
}
}Frequently Asked Questions (Nuxt 3 Auto-Imports, useAsyncData & useFetch SOP)
Q:Can I use Nuxt 3 Auto-Imports, useAsyncData & useFetch across Codex, Claude Code, and Cursor simultaneously?
Yes. The `nuxt-3-composables-auto-import` skill uses the standard SKILL.md format supported across Codex, Claude Code, Cursor, and Windsurf. By placing it in `.agents/skills/` or linking it in `.cursorrules`, any compliant agent runtime will parse the triggers and follow the procedural rules.
Q:How does Nuxt 3 Auto-Imports, useAsyncData & useFetch prevent context window overflow during long agent sessions?
Standard agents often generate dozens of redundant import statements and verbose boilerplate wrappers around standard HTTP clients. By explicitly declaring auto-import rules and enforcing clean `useFetch`/`useAsyncData` usage patterns, file diffs remain concise, reducing tokens used in file writes and review cycles.
Q:Does this skill require escalated root or container permissions?
No. The skill is verified with a Security Score of 98/100 and operates with `shell_exec: false` and `net_access: false` in its core definition. It only requires read and write permissions within the local workspace filesystem to edit Vue components and Nuxt config files.
Ready to equip your autonomous agent with Nuxt 3 Auto-Imports, useAsyncData & useFetch?
Copy the complete audited SKILL.md specification or download the 1-click zip bundle directly from our verified registry.