What is upgrade-nuxt?

A guided process for upgrading a Nuxt application from version 3 to 4, including automated code changes and manual fixes for changed behavior.

Use it to update Nuxt and its modules, run the official migration codemods, fix remaining compatibility issues, and check builds, tests, and key pages.

It identifies application code, modules, and deployment settings that may stop working after the framework upgrade.

upgrade-nuxt — Skill for Claude Code and Codex by Phaedra-Solutions

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add Phaedra-Solutions/cursor-rules --skill upgrade-nuxt

Clone the repo

git clone --depth 1 https://github.com/Phaedra-Solutions/cursor-rules

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/phaedra-solutions/cursor-rules/upgrade-nuxt/github.svg)](https://agentmods.dev/skills/phaedra-solutions/cursor-rules/upgrade-nuxt)

Your own site

<a href="https://agentmods.dev/skills/phaedra-solutions/cursor-rules/upgrade-nuxt"><img src="https://agentmods.dev/badge/skills/phaedra-solutions/cursor-rules/upgrade-nuxt/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/phaedra-solutions/cursor-rules/upgrade-nuxt"><img src="https://agentmods.dev/badge/skills/phaedra-solutions/cursor-rules/upgrade-nuxt.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 153 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 1,361 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00153	$0.01361
Opus 5.5	$0.00061	$0.00544
Sonnet 5.5	$0.00031	$0.00272
Haiku 4.5	$0.00015	$0.00136

Measured 3d ago against content hash 14bb3ca0c5f4, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

upgrade-nuxt scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/upgrade-nuxt/SKILL.md · 71 lines

How it starts

The opening of the file, as written. The whole thing — 71 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Upgrade Nuxt 3 → 4

When to use

The app runs Nuxt 3 (EOL 31 Jul 2026) or an unpatched Nuxt 4.
For Nuxt 2, see the migration path in legacy/vue2-nuxt2 first (Nuxt Bridge or a rebuild).

For a patch within Nuxt 4, run npx nuxt upgrade and Verify.

Before you start

Read nuxt, Vue, every Nuxt module (@nuxtjs/i18n, @nuxt/content, @pinia/nuxt, nuxt-security, UI kits) and layers (extends) from the lockfile and nuxt.config.*, and check each module supports Nuxt 4.
Working tree clean; new branch (chore/nuxt-4); tests and an E2E smoke test for key pages.
Ask the user:
- whether codemods may edit files (run them on a clean tree and review);
- deployment target (Node server, static, edge preset) to smoke-test the right build;
- whether network installs are approved (core/supply-chain cooldown applies).

Steps

Baseline: install, nuxi typecheck, lint, tests, nuxi build and a preview run. Record failures.
Patch Nuxt 3 to the last release (3.21.11) and fix warnings.
Upgrade the package: npx nuxt upgrade (choose the latest 4.x). Update modules to their Nuxt 4 versions.
Run the codemods (the docs pin this codemod CLI version) and review the diff:
```
npx [email protected] nuxt/4/migration-recipe
```
Fix the breaking changes the codemods don't fully cover:
- Directory structure: the default srcDir is app/; move assets/, components/, composables/, layouts/, middleware/, pages/, plugins/, utils/, app.vue and error.vue into app/. Keep server/, public/, nuxt.config.* at the root. (Or set srcDir explicitly to keep the old layout, only if the user prefers.)
- Data fetching: data from useAsyncData/useFetch is a shallowRef and defaults to undefined (not null); update === null checks and deep mutations, and give shared or dynamic calls explicit unique keys.
- Layers: modules from extended layers now load before project modules; check plugins that depended on the old order.
- Server imports: import server helpers from the documented nuxt/server path instead of relying on h3 auto-imports where the guide says so.
- Check the upgrade guide for the remaining items (head handling, useHead types, generated TypeScript config) that apply to this app.
Patch to the minimum safe release (≥ 4.6.3) and upgrade @nuxt/devtools (≥ 3.3.1); set devtools: { enabled: false } outside development.
Optional: preview Nuxt 5 changes with future: { compatibilityVersion: 5 } on a separate branch, only if the user asks (Nuxt 5 is scheduled for Q4 2026).
Verify (next section). Show the diff and results; commit only when asked (git-commit skill). Then switch to frontend/nuxt.

Read the full file on GitHub · 71 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

3d ago First seen · 71 lines · 153 tokens per session scan A 14bb3ca0c5f4

Subscribe to this mod's changes

upgrade-nuxt is a skill published in the GitHub repository Phaedra-Solutions/cursor-rules (4 stars, last pushed 2d ago), licensed MIT. It adds 153 tokens to every session and 1,361 once invoked, about $0.0006 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-11-01.

Claude Code Frontend Vue and Svelte agent-skills agents-md ai-coding ai-coding-agents application-security

frontend-ux-engineer

Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.

DominikTobureto/awesome-grok-build · 42 tokens

nuxt4-patterns

Nuxt 4 app patterns for hydration safety, performance, route rules, lazy loading, and SSR-safe data fetching with useFetch and useAsyncData.

sjarmak/coding-agent-workflows · 37 tokens

grok-cli

Delegate bounded tasks to Grok Build from a supervising agent such as Codex. Use when the user asks Grok to investigate, review, implement, or provide another perspective, or when a distinct coding agent would materially help. Includes a background ACP client for progress, follow-up prompts, permissions, and…

scarletkc/agents · 66 tokens

agent-svelte-expert

Specialist subagent: Svelte 5 runes, SvelteKit routing, form actions, and compile-time reactivity specialist. Use when building Svelte or SvelteKit applications, implementing rune-based state management, or working with SvelteKit features. Trigger phrases: Svelte, SvelteKit, runes, $state, $derived, $effect, $props…

travisjneuman/.claude · 101 tokens

vue-idioms

Vue 3 Composition API patterns: syntax, reactive state with Pinia stores, reusable composables, and Vitest component testing. Use when developing or refactoring Vue 3 frontend applications.

irahardianto/awesome-agv · 47 tokens

talk-like-scarletkc

A writing guide that makes text sound like the developer scarletkc, including posts, comments, technical opinions, project documents, and translations.

scarletkc/agents · 118 tokens