Skip to content

perf: Installing only 3 modules makes Nuxt cold page load 13x (!) times slower than a fresh Nuxt app #35390

Description

@martinszeltins

Environment

╭── Nuxt project info (copied to clipboard) ───────────────────────────────────╮
│                                                                              │
│  Operating system      Ubuntu 20.04 Linux 5.15.0-179-generic                 │
│  CPU                   Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz (8 cores)   │
│  Node.js version       v24.11.0                                              │
│  nuxt/cli version      3.35.2                                                │
│  Package manager       pnpm 10.31.0                                          │
│  Nuxt version          4.4.8                                                 │
│  Nitro version         2.13.4                                                │
│  Builder               vite 7.3.5                                            │
│  Config                app, compatibilityDate, devtools, modules             │
│  Modules               -                                                     │
╰──────────────────────────────────────────────────────────────────────────────╯

Reproduction

https://github.com/martinszeltins/fresh-nuxt-app-fast

Describe the bug

I noticed that if I add just 3 modules to my Nuxt app it makes cold page load 13x times slower than a fresh Nuxt app. 13x times slower! That feels wrong. How can adding just 3 simple modules cause such dramatic degradation in performance? I added only NuxtUI, i18n and tailwind.

Fresh Nuxt app: 350ms cold page load
Nuxt with 3 modules: 4.5 seconds cold page load

This affects only initial page load after dev server has been started / restarted. Each next page refresh is fast. Also, it seems strange that if I stop the dev server and then start it again and open the page in browser - it again takes a long time to load. But nothing changed.

How to test this:

4.5 seconds!! My goodness, the app is empty, there is almost nothing there and it takes 13x times more to load? 😲 😱 🤯

I am obviously being overly dramatic 😅 I love Nuxt. But I am genuinely wondering if this can be optimized somehow. An empty app should not take that long to load.

  1. Why adding 3 modules makes it 13x slower?
  2. Why after restarting the dev server it has to compile everything AGAIN even when nothing changed??

What can we do to optimize this? Any ideas?

A few words from AI:

Bottom line: An empty app should not feel this slow; the reproduction is solid, but the root cause is almost certainly the first-request dev compilation waterfall from @nuxt/ui (and its Tailwind/Reka UI graph), not Nuxt SSR itself — and the fix likely spans both Nuxt dev warmup and Nuxt UI’s “load everything” dev architecture.

Image

The patch is found in the reproduction patch.diff:

diff --git a/layers/common/nuxt.config.ts b/layers/common/nuxt.config.ts
index 66c3ac30..5c10a792 100644
--- a/layers/common/nuxt.config.ts
+++ b/layers/common/nuxt.config.ts
@@ -1,3 +1,19 @@
 export default defineNuxtConfig({
+    modules: [
+        '@vueuse/nuxt',
+        '@nuxt/ui',
+        '@nuxtjs/i18n',
+    ],
+
+    css: [
+        '#layers/common/app/assets/css/app.css',
+    ],
+
+    i18n: {
+        defaultLocale: 'en',
+        strategy: 'no_prefix',
+        locales: [{ code: 'en', name: 'English' }],
+    },
+
     compatibilityDate: '2026-06-18',
 })
diff --git a/layers/my-app/app/app.vue b/layers/my-app/app/app.vue
index d0c36918..1eca8922 100644
--- a/layers/my-app/app/app.vue
+++ b/layers/my-app/app/app.vue
@@ -1,3 +1,7 @@
 <template>
-    <div>Nuxt app</div>
+    <UApp>
+        <div class="p-56 m-6 rounded-xl bg-emerald-700 text-white text-center">
+            Nuxt App
+        </div>
+    </UApp>
 </template>
diff --git a/package.json b/package.json
index 788e3ca2..86be8c75 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/ui": "4.8.2",
+    "@nuxtjs/i18n": "10.4.0",
+    "@vueuse/nuxt": "14.3.0",
     "nuxt": "^4.4.8",
+    "tailwindcss": "4.3.0",
     "vue": "^3.5.35",
     "vue-router": "^5.1.0"
   }
diff --git a/layers/common/app/assets/css/app.css b/layers/common/app/assets/css/app.css
new file mode 100644
--- /dev/null
+++ b/layers/common/app/assets/css/app.css
+++ b/layers/common/app/assets/css/app.css
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

Additional context

No response

Logs

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions