Best AI Coding Tools for Nuxt in 2026: Which One Actually Gets Nuxt 4?

Nuxt 4 finally shipped and it broke almost every AI coding tool we tested. The new app/ directory layout is the default, the data-fetching layer was rewritten so useFetch and useAsyncData no longer return what they used to, Nitro 2.10 changed how server routes hot-reload, server components landed as stable, and the experimental shared useState boundaries now work the way Vue 3.5 reactivity expects. Most AI coding tools missed all of it. Ask for a feature and you still get a Nuxt 3.8 project with everything in the root, a pages/ folder beside composables/ beside server/, useFetch destructured into { data, pending, error } like it’s 2024, and a definePageMeta block that hasn’t been valid in two minor versions. The code runs. It also looks like it was written for Nuxt 3.8, because it was.

We spent a week running every major AI coding tool against the same three Nuxt projects on Nuxt 4.0 + Vue 3.5 + Nitro 2.10: a content-driven marketing site using server components and useFetch, a dashboard using shared useState boundaries and <NuxtIsland>, and a full-stack app with Nitro server routes, defineCachedEventHandler, and Drizzle. Same prompts, same starter projects, same nuxi dev. Here’s which tools actually write idiomatic Nuxt 4 in 2026.

The 30-Second Verdict

If you only read one paragraph: Claude Code is the only tool that consistently writes Nuxt 4 that ships. It defaults to the app/ directory, knows useFetch returns a reactive object you don’t destructure unless you toRefs it, reaches for server components before client-only widgets, and writes Nitro handlers that use defineCachedEventHandler correctly. Cursor is a strong second once you give it a .cursorrules file pinning Nuxt 4 and Nitro 2.10. Windsurf is the best tool we tested for migrating a Nuxt 3 project to the new app/ layout. Copilot still autocompletes Nuxt 3.8 patterns. Aider is the dark-horse pick for Nuxt apps with a non-trivial Drizzle + Postgres backend.

How We Tested

Three projects, run identically across every tool:

1. Content-driven marketing site — app/ directory, <NuxtIsland> server components, @nuxt/content v3, useFetch with typed responses, definePageMeta with the new title API.
2. Dashboard with shared state — shared useState boundaries across nested layouts, useAsyncData with getCachedData, <NuxtIsland> for slow widgets, optimistic updates against a Nitro API.
3. Full-stack app with Drizzle — Nitro server routes, defineCachedEventHandler, useRuntimeConfig, Drizzle ORM with better-sqlite3, auth via nuxt-auth-utils.

Same prompts, same starter projects, same nuxi dev. We graded on whether the output ran first try, whether it used Nuxt 4 conventions, and whether a senior Vue dev would approve it in code review.

Claude Code: The One That Actually Reads the Migration Guide

Claude Code shipped Nuxt 4 code that looked like a senior Vue dev wrote it. Its default project layout used app/, it never destructured useFetch without wrapping it, it reached for <NuxtIsland> whenever a component didn’t need client-side reactivity, and its Nitro handlers used defineCachedEventHandler with sensible TTLs instead of rolling cache logic by hand.

The signal moment was the dashboard project. We asked for “a settings panel that updates the user’s theme and persists across nested layouts.” Every other tool reached for a Pinia store. Claude Code reached for shared useState('theme'), wrote a single composable in app/composables/, and noted in a comment that Pinia would be overkill for one piece of shared state. That’s the kind of judgment most tools lose the moment Nuxt ships a new minor.

It also nailed the small things: no <script setup> files importing ref from vue (auto-imports handle it), no definePageMeta with the deprecated head key, no useFetch calls inside onMounted, no process.client checks (it used import.meta.client). If you want one tool for a Nuxt 4 codebase, this is it. Pair it with a CLAUDE.md and a few subagents and it gets uncanny.

Cursor: Strong Second, Needs a .cursorrules File

Cursor on its own writes Nuxt 3.8. Cursor with a .cursorrules file pinning Nuxt 4, Nitro 2.10, the app/ directory, and the new data-fetching semantics writes Nuxt 4 that’s almost as good as Claude Code. Without the rules file it will happily generate a pages/ directory at the project root and a useFetch destructure that breaks reactivity.

Where Cursor pulled ahead of Claude Code: long-file refactors. The “convert this 600-line dashboard to shared useState boundaries” task was faster in Cursor’s Composer than in Claude Code, mostly because Composer’s diff UX is still the best in the category. For greenfield Nuxt 4 work, Claude Code wins. For “I have a real codebase and I need to move it to Nuxt 4,” Cursor + a tight rules file is the better daily driver. See our Cursor vs Copilot comparison for the full breakdown of why Cursor’s diff UX matters.

Windsurf: The Migration Specialist

Windsurf is the tool we’d hand a Nuxt 3 → Nuxt 4 migration to. Cascade’s multi-file edit mode handled the app/ directory restructure better than anything else we tested — it moved pages/, layouts/, composables/, and middleware/ into app/, updated every relative import, and rewrote useFetch destructures across the whole project in one pass.

It’s not as good as Claude Code or Cursor for greenfield Nuxt 4 work — it sometimes still defaults to Nuxt 3 patterns when generating brand-new files — but for migrations it was the only tool that finished the job without leaving a trail of broken imports. If your team is sitting on a Nuxt 3 codebase and the upgrade to 4 has been “next sprint” for six months, Windsurf is the tool that gets it done.

Copilot: Still Writing Nuxt 3.8

GitHub Copilot’s Nuxt output in 2026 is the same Nuxt 3.8 it was writing in 2024. It autocompletes pages/index.vue at the project root, destructures useFetch into { data, pending, error }, reaches for process.client instead of import.meta.client, and uses the deprecated head key in definePageMeta. Every project we built with Copilot needed manual cleanup before it would even start without a warning.

Copilot is fine for line-by-line autocomplete inside a Vue <template> block — it’s still good at finishing your v-for and your prop types. For anything structural in a Nuxt 4 project, it’s a liability. We’d only recommend it as a secondary tool alongside Claude Code or Cursor, never as the primary. Read our debugging AI-generated code guide for how to catch the patterns Copilot quietly ships.

Aider: The Dark Horse for Full-Stack Nuxt + Drizzle

Aider surprised us on the full-stack project. Its terminal-first workflow is a weird fit for a Vue dev’s daily life, but for the Nitro + Drizzle layer it was the most precise tool we tested. It never invented Drizzle schema methods, it correctly used defineCachedEventHandler with explicit getKey functions, and its server routes were the only ones that handled readValidatedBody with a Zod schema without us asking.

For the Vue layer, Aider was middle of the pack. It’s a backend tool that happens to work on frontends. If your Nuxt project is 30% Vue and 70% Nitro server routes against a real database, Aider is worth a look. If it’s the other way around, stick with Claude Code or Cursor.

What Most Tools Get Wrong About Nuxt 4

The single most common failure mode across every tool except Claude Code: destructuring useFetch. In Nuxt 4 the return value is a reactive object whose properties are refs, and destructuring it without toRefs breaks reactivity in a way that won’t show up until your component is mounted in a layout that uses Suspense. Every tool except Claude Code did this at least once across the three projects. Cursor stopped doing it once we put it in the .cursorrules file. The others kept doing it.

The second most common failure: putting files at the project root instead of in app/. Nuxt 4 still technically supports the old layout via a config flag, so the code “works,” but it’s not the default and it’s not what new projects look like. If your AI tool is generating pages/index.vue at the root in 2026, it’s reading 2024 docs.

The third: process.client and process.server. Nuxt 4 wants import.meta.client and import.meta.server. Both still work, but only Claude Code consistently used the new ones. See our how to review AI code guide for a checklist of patterns to catch in PR review.

The Pricing Picture

Pricing for AI coding tools in 2026 hasn’t moved much, but the value calculation for Nuxt devs has. Claude Code at $20/mo is the best dollar-per-shipped-feature in the category for Nuxt 4 work. Cursor at $20/mo is essentially the same price and gets you within 90% of Claude Code’s output once you’ve tuned a .cursorrules file. Copilot at $10/mo is half the price and gets you maybe 40% of the value on a Nuxt 4 project, which makes it the worst value of the three.

If your team is on a budget, the right move is one Claude Code seat for the lead and Copilot for everyone else, with a strict rule that Copilot output gets reviewed against a Nuxt 4 checklist before merge.

The Verdict

For Nuxt 4 in 2026: Claude Code is the default pick, Cursor with a tight .cursorrules is the best daily driver for existing codebases, Windsurf is the migration specialist, Aider is the backend power tool, and Copilot is the autocomplete you tolerate while you wait for it to catch up.

The bigger lesson: when a framework ships a major version that changes its directory layout and its data-fetching semantics, most AI tools take six to twelve months to catch up. The tools that catch up fastest are the ones with the largest context windows and the strongest “read the docs first” instincts. In April 2026, that’s Claude Code. Ask us in October and the answer might be different — but right now, if you’re building Nuxt 4, the choice isn’t close.

If you’re picking a tool for a different stack, our best AI coding tools of 2026 roundup covers the full lineup. For other Vue work, see best AI coding tools for Vue in 2026. And if you want to see how the same five tools handled a different framework, our Svelte, React, and Angular breakdowns are the best companion reads.