How I Upgraded My Nuxt 3 Project to Nuxt 4 in Under 5 Minutes (Step-by-Step)

Upgrading a Nuxt project might sound intimidating, but with Nuxt 4 it’s surprisingly fast. In this blog, I’ll show how I upgraded my Nuxt 3 boilerplate to Nuxt 4 in under 5 minutes, step-by-step. If you’ve been thinking about moving to Nuxt 4 for its faster dev server, improved hot reloads, and modern features, this guide is for you.

Step 1: Upgrade Nuxt via Your Package Manager

Start by updating Nuxt to the latest v4 version using your package manager:

npm install nuxt@^4.0.0
# or
yarn add nuxt@^4.0.0
# or
pnpm add nuxt@^4.0.0
# or
bun add nuxt@^4.0.0

This ensures your project is using the official Nuxt 4 release.

Step 2: Run the Official Nuxt Migration Codemod

Nuxt provides a codemod tool to handle automatic migrations

codemod@latest nuxt/4/migration-recipe

• When prompted, toggle all codemods unless you have a specific reason not to.
• Hit Enter and let the codemod make changes automatically.

Step 3: File Structure Changes

If you select the nuxt/4/file-structure codemod, it will reorganize your project into Nuxt 4’s recommended structure:

app/
├─ assets/
├─ components/
├─ composables/
├─ layouts/
├─ middleware/
├─ pages/
├─ plugins/
├─ utils/
├─ app.vue
├─ app.config.ts
└─ error.vue

• This structure makes it easier to manage a growing project.
• All main files are now inside the app/ folder.

Step 4: Update Custom Folders and Configs

• If you have custom folders like locales/ or third-party configs, move them into app/ or shared/.
• Update any import paths accordingly to prevent runtime errors.

Step 5: Verify and Run

That’s it! Your project should now be fully upgraded to Nuxt 4. Run your dev server:

npm run dev
# or yarn dev / pnpm dev / bun dev

• Check that everything works as expected.
• Dev server feels snappier, and hot reloads are noticeably faster.

Results and Tips

• The upgrade process is super smooth with minimal manual adjustments.
• Most dependencies work out-of-the-box, but check for any third-party modules that may require Nuxt 4 compatibility.
• Your project is now ready to take advantage of Nuxt 4’s new features and performance improvements.

For more details or troubleshooting, see the official Nuxt 4 upgrade guide

Conclusion

Upgrading from Nuxt 3 to Nuxt 4 doesn’t have to be scary or time-consuming. With the official migration codemods and a few simple steps, you can modernize your project in under 5 minutes. Faster dev server, improved hot reloads, and a cleaner project structure mean you can focus on building features, not boilerplate.