CodemodのNuxt 4のコマンドとは？
CodemodのNuxt 4のコマンドとは、Nuxt 3で作られたプロジェクトのコードやファイル構造を、Nuxt 4の新しい仕様に合わせて自動で変換するためのコマンドラインツールです。
Nuxt 3からNuxt 4へのメジャーアップデートでは、以下のような構造の変更が行われました。
Nuxt 3：ルート直下に pages/ や components/ を配置
↓
Nuxt 4：app/pages/ や app/components/ のように app/ ディレクトリ配下に集約
これらを手動で移動・修正するのは手間がかかるため、公式やコミュニティによって提供されたのが npx @nuxt/codemod などの変換コマンドです。
nuxt/4/migration-recipeを実行しても反映されない
2026年8月現在はNuxt 4向けのCodemodは更新が止まっており、バグなどが修正されないため、nuxt/4/file-structure以外は実行しても反映されません。
pnpmの場合
pnpm dlx codemod@latest nuxt/4/migration-recipenpmの場合
npx codemod@latest nuxt/4/migration-recipe ◉ nuxt/4/absolute-watch-path
◉ nuxt/4/default-data-error-value
◉ nuxt/4/deprecated-dedupe-value
❯◉ nuxt/4/file-structure ← 実行して反映されるのはこれだけ
◉ nuxt/4/shallow-function-reactivity
◉ nuxt/4/template-compilation-changes例えばapp.vueが以下のようなコードになっている場合、「nuxt/4/default-data-error-value」を実行した場合はnullがundefinedに、「nuxt/4/shallow-function-reactivity」を実行した場合は { deep: true } が自動で追加されるはずですが、現在は反映されません。
app.vue
<script setup>
const { data, error, pending } = await useFetch('https://jsonplaceholder.typicode.com/posts/1')
if (data.value === null) {
console.log('No Data')
} else {
console.log(data.value)
}
</script>
<template>
<div>
<h1>useFetch Sample</h1>
<div v-if="pending">読み込み中...</div>
<div v-else-if="error">エラーが発生しました</div>
<div v-else-if="data === null">データが存在しません</div>
<div v-else>
<pre>{{ data }}</pre>
</div>
</div>
</template>
<style scoped>
h1 { font-size: 1rem;}
</style>Nuxtの公式ドキュメントのUpgrade GuideにはCodemodの各コマンドで移行できると記載されていますが、実際に使えるのは「nuxt/4/file-structure」だけなのでNuxt 4に移行する際は注意が必要です。
Upgrade Guide · Get Started with Nuxt v4
