The Complete Production SOP: How to Deploy and Run Nuxt 3 & Vue 3 Composition Architect in Autonomous AI Agents
Step-by-step SOP to install and run cursor-vue-nuxt in Codex, Claude Code, and Cursor. Master Nuxt 3, Nitro, Pinia, and strict Composition API agents.
Technical Overview & Architectural Context
Autonomous coding agents frequently stumble in modern Vue 3 and Nuxt 3 codebases because training corpora mix Options API, deprecated Vuex patterns, and legacy Vue 2 configurations with modern Nuxt 3 idioms. Common agent anti-patterns include manually re-importing auto-imported composables (like `ref`, `computed`, or `useFetch`), breaking SSR hydration boundaries by accessing browser globals (`window`, `localStorage`) outside lifecycle hooks, and misconfiguring Nitro server event handlers with legacy Express patterns. Furthermore, agents often invent non-reactive Pinia patterns by destructing state without `storeToRefs`. The 'Nuxt 3 & Vue 3 Composition Architect' (cursor-vue-nuxt) skill enforces deterministic procedural boundaries across autonomous agents such as Codex, Claude Code, Cursor, and Windsurf. By binding the agent to strict `<script setup lang="ts">` semantics, typed auto-imports, Nitro route typing, and verified Pinia reactive store state, this skill halts destructive hallucinations and enforces continuous type-checking and automated test verification before file modifications are finalized.
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 Skill Manifest Injection & Rule Mounting
Create the local skill manifest directory and inject verified procedural rules into your workspace.
Agent runtimes like Claude Code, Cursor, and Codex automatically parse skill definitions within workspace configuration directories (such as `.cursor/rules/`, `.claude/skills/`, or the unified `.agents/skills/` directory). Installing cursor-vue-nuxt mounts the architectural constraints into agent memory prior to codebase execution.
mkdir -p .agents/skills/cursor-vue-nuxt && curl -fsSL https://askills.dev/api/skills/cursor-vue-nuxt/raw -o .agents/skills/cursor-vue-nuxt/SKILL.md---
name: "cursor-vue-nuxt"
description: "Fullstack Vue 3 apps with Nuxt 3, Nitro server engine, Pinia stores, and Tailwind CSS."
version: "1.0.0"
runtimes: ["codex", "claude-code", "cursor", "windsurf"]
---
# Nuxt 3 & Vue 3 Composition Architect SOP
## Core Execution Directives
1. Always utilize `<script setup lang="ts">` for all Vue single file components.
2. Do NOT manually import Vue/Nuxt core composables (`ref`, `computed`, `watch`, `useRoute`, `useRouter`, `useFetch`, `useAsyncData`). Depend solely on Nuxt 3 auto-imports.
3. Nitro handlers in `server/api/` or `server/routes/` MUST use `defineEventHandler` with typed event responses.
4. When destructing Pinia store state, wrap properties using `storeToRefs(store)` to retain Vue reactivity.
5. Guard SSR hydration by isolating browser-only code in `onMounted()` or `<ClientOnly>` blocks.Place the SKILL.md definition inside `.cursor/rules/cursor-vue-nuxt.mdc` if using Cursor IDE to automatically scope rules to all `.vue`, `.ts`, and `.nitro.ts` files, saving significant context tokens on unrelated markdown or asset edits.
Ensure that your agent runtime has read access to hidden directories; running Claude Code with root restrictions may ignore dotfiles unless explicitly passed via `--add-dir .agents`.
Dependency Validation & Workspace Nuxt Typings
Validate production dependencies and regenerate the local `.nuxt/tsconfig.json` so the agent has accurate symbols.
Autonomous agents often fail Nuxt 3 linting when Nuxt's auto-generated types in `.nuxt/` are missing or outdated. Running post-install preparation generates `.nuxt/imports.d.ts` and `.nuxt/nitro.d.ts`, which prevents the agent from attempting to add redundant explicit imports.
pnpm install nuxt vue pinia @pinia/nuxt && pnpm nuxi prepare{
"scripts": {
"postinstall": "nuxt prepare",
"build": "nuxt build",
"dev": "nuxt dev",
"typecheck": "vue-tsc --noEmit"
},
"dependencies": {
"@pinia/nuxt": "^0.5.1",
"nuxt": "^3.11.2",
"pinia": "^2.1.7",
"vue": "^3.4.21"
},
"devDependencies": {
"vue-tsc": "^2.0.7",
"typescript": "^5.4.3"
}
}Never inject raw runtime secrets into agent prompts. Utilize Nuxt 3's `runtimeConfig` via `.env` and instruct the agent to consume them via `useRuntimeConfig()`.
If `.nuxt` is excluded from IDE indexing, agents operating via TypeScript Language Server protocol (LSP) will hallucinate missing module errors. Keep `.nuxt/` readable.
Trigger Invocation & Deterministic Task Scoping
Invoke the agent using precise Vue 3 / Nuxt 3 Composition syntax triggers.
Triggering the agent with explicit reference to cursor-vue-nuxt boundaries ensures it activates the correct SOP pipeline instead of generating legacy Vue 2 Options API or un-typed standard Vue SFC boilerplate.
# In Claude Code CLI or Cursor Agent Terminal
claude --use-skill cursor-vue-nuxt "Create a dynamic cart drawer composable and Nitro backend checkout endpoint adhering to cursor-vue-nuxt rules."Include the phrase 'Apply cursor-vue-nuxt SOP' in Cursor's Agent Composer to immediately trigger deterministic Composition API checking.
Avoid prompt instructions like 'Write a standard Vue script'; ambiguous terminology may cause the agent to fall back onto Options API with `export default {}`.
Type-Check Gate & Self-Healing Verification
Run automated compiler checks using `vue-tsc` to ensure zero hydration or type regressions.
The cursor-vue-nuxt SOP requires the agent to execute a quality gate check prior to terminating the task. This step forces the agent to read compiler stderr output, repair broken types or invalid unmounted references, and achieve a clean build exit code 0.
pnpm typecheck && pnpm nuxi analyzeInstruct the agent to review `git diff` before closing the task to catch any accidentally imported auto-import globals (e.g., `import { ref } from 'vue'`).
Running `vue-tsc` on massive monorepos can exhaust default node memory allocations. Prepend `NODE_OPTIONS=--max-old-space-size=4096` in resource-constrained environments.
Real-World Scenario: Implement SSR-Safe User Profile Page with Pinia Store and Nitro Endpoint
“Using the cursor-vue-nuxt SOP, build an SSR-safe user profile page at `/pages/profile.vue`. Fetch data from a new Nitro endpoint `/api/user/profile.get.ts`, manage auth state via a typed Pinia store in `/stores/user.ts`, and render user metrics without client hydration mismatches.”
Runtime Troubleshooting & Failure Modes
Root Cause: The agent introduced dynamic client-only state (such as Date.now(), window.innerWidth, or localStorage reads) directly into the template or script execution root during SSR evaluation.
// Wrap browser-specific evaluations inside onMounted or wrap conditional elements with <ClientOnly>
<template>
<ClientOnly>
<p>Client Local Time: {{ formattedTime }}</p>
<template #fallback>
<p>Loading time...</p>
</template>
</ClientOnly>
</template>
<script setup lang="ts">
const formattedTime = ref('')
onMounted(() => {
formattedTime.value = new Date().toLocaleTimeString()
})
</script>Root Cause: Nuxt auto-imports declaration files (.nuxt/imports.d.ts) are desynchronized or missing from the TypeScript language server context.
npx nuxi prepare && npx nuxi cleanupFrequently Asked Questions (Nuxt 3 & Vue 3 Composition Architect SOP)
Q:Can I use Nuxt 3 & Vue 3 Composition Architect across Codex, Claude Code, and Cursor simultaneously?
Yes. cursor-vue-nuxt conforms to the universal SKILL.md specification. You can place the file in `.agents/skills/cursor-vue-nuxt/SKILL.md` or symlink it into runtime-specific locations (e.g., `.cursor/rules/` for Cursor IDE or `.claude/skills/` for Claude Code CLI) for continuous cross-agent synchronization.
Q:How does Nuxt 3 & Vue 3 Composition Architect prevent context window overflow during long agent sessions?
The skill instructs the autonomous agent to rely strictly on Nuxt 3 auto-imports and typed Nitro interfaces rather than pasting long type declarations or repetitive boilerplates. It also sets rigid token boundaries by prescribing targeted file modification over broad workspace rewrites.
Q:Does this skill require escalated root or container permissions?
No. The skill has an audited security score of 98/100 and runs completely unprivileged within standard workspace environments. It only requires read and write access to your project's frontend workspace and standard non-root package execution permissions (`pnpm`, `npm`, or `yarn`).
Ready to equip your autonomous agent with Nuxt 3 & Vue 3 Composition Architect?
Copy the complete audited SKILL.md specification or download the 1-click zip bundle directly from our verified registry.