Claude Code Setup for Nuxt
Rules file: CLAUDE.md
Nuxt 3 and later rebuilt the framework on Vue 3, Vite, and Nitro, which means Nuxt 2 answers are not partially correct, they are entirely wrong. An agent needs to know that composables, components, and utils are auto-imported, that the server directory runs on Nitro with h3 helpers rather than Express, and that data fetching has to be SSR aware or the same request fires twice. Config lives in defineNuxtConfig and runtime values come from useRuntimeConfig, not from process.env at the point of use.
Configuring Claude Code for Nuxt
- → Put the Nuxt major version on line one, then a short list of the Nuxt 2 APIs that are banned outright.
- → Document your auto-import directories in CLAUDE.md so the agent knows composables/ and utils/ are implicit before it writes an import.
- → Add a nested CLAUDE.md in server/ covering h3 handler conventions, since those edits have nothing in common with the Vue side.
Building CLAUDE.md
There is no ready-made Nuxt template yet. The generator produces one from your project type, with the commands an agent may run and the files it must not touch.
Open the generatorRule these out for Nuxt
These are the failures that repeat across sessions, so each one belongs in CLAUDE.md.
Calling $fetch directly in setup
Agents write a plain $fetch in a component setup block, which runs once during server render and then again on the client after hydration, doubling the load and often flashing different data. The composables exist specifically to dedupe that. Add to your rules file: 'Data fetched during setup uses useFetch or useAsyncData so the payload transfers from server to client. $fetch is only for event handlers and server routes.'
Emitting Nuxt 2 config and lifecycle code
asyncData, the component level fetch hook, the buildModules array, and @nuxtjs/axios all show up constantly because Nuxt 2 dominates older training data, and none of them work now. The failure is usually a silently ignored option rather than an error. State the version and add: 'Nuxt 3 or later. Config is defineNuxtConfig in nuxt.config.ts. Never use asyncData, the fetch hook, buildModules, or the Options API.'
Adding manual imports for auto-imported symbols
Agents import ref, computed, useRoute, or a project composable from a path they guessed at, because explicit imports feel safer. Nuxt already auto-imports from composables/, utils/, and Vue itself, so the guessed path is frequently wrong and the import is always redundant. Write: 'Do not import ref, computed, watch, Nuxt composables, or anything under composables/ and utils/. They are auto-imported. If a symbol appears unresolved, check the directory name rather than adding an import.'
Reading process.env inside components
An agent needing an API base URL reaches for process.env.API_URL in a component, which is undefined on the client and not tree-shaken safely on the server. Nuxt exposes configuration through runtimeConfig with a public section for browser-safe values and everything else server-only. Add: 'Runtime values come from useRuntimeConfig(). Anything the browser needs goes under runtimeConfig.public. Never read process.env outside nuxt.config.'
Writing Express style handlers in server/api
Nitro route files export a defineEventHandler and use h3 helpers like readBody, getQuery, and createError, but agents write (req, res) handlers with res.json and res.status because that is what a decade of Node training data looks like. State it directly: 'Every file in server/ exports defineEventHandler. Read input with readBody or getQuery, throw errors with createError, and return a plain object rather than calling res.'
Module level refs used as global state
For shared state an agent will export a const user = ref(null) from a composable file. On the client that is fine, but on the server that module is shared across requests, so one visitor's data can leak into another's render. Nuxt provides useState precisely for SSR-safe shared state. Add: 'Cross-component state uses useState with a stable key, or a Pinia store. Never export a module level ref or reactive object as shared state.'
Skills that pair with this setup
Webapp Testing
Tests local web applications using Playwright for verifying frontend functionality, debugging UI behavior, and capturing screenshots.
docx
Create, edit, analyze Word docs with tracked changes, comments, formatting.
Master Claude for Legal
Skill pack for legal teams. NDA triage, multi-party version diff, citation verifier, meeting brief, and the Friday-newsletter status synthesis pattern. Includes 10 reference docs (privilege, verification, long documents, practice areas) and 3 firm templates. Built from the public Anthropic Claude for Legal Teams webinar dataset.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).