Performance: Excessive CSS custom properties cause Chrome DevTools to freeze

[Rusinas]

Describe the bug

I'm experiencing severe performance issues with Chrome DevTools when working with PrimeVue. This is more of a help request than a traditional bug report, since the issue stems from a combination of factors.

The Problem

When I open Chrome DevTools Elements tab with the Styles panel visible, the entire DevTools UI freezes for 15+ seconds. Even after it loads, the Styles panel is essentially unusable - scrolling is laggy, selecting elements is slow, and any interaction with CSS properties has significant delay.

Why This Happens

From what I can tell, it's a combination of:

1. PrimeVue generates 1000+ CSS custom properties - this is just how the theming system works with design tokens
2. Chrome DevTools struggles with large amounts of CSS custom properties - it tries to render/compute all of them at once in the Styles panel
3. My hardware setup - I'm using integrated Radeon graphics (Ryzen 9950X3D), no dedicated GPU. Chrome's DevTools UI rendering appears to be GPU-bound in this scenario.

Reproduction

Literally a clean Nuxt + PrimeVue installation is enough:

npx nuxi@latest init test-project
cd test-project
npm install
npm install @primevue/nuxt-module @primeuix/themes

nuxt.config.ts as shown above, then:

1. npm run dev
2. Open the app in Chrome
3. Open DevTools (F12)
4. Go to Elements tab
5. Click on any element in the DOM tree while Styles panel is visible
6. DevTools freezes for 15 seconds
7. After it loads, try scrolling the Styles panel or interacting with properties - everything is extremely laggy

Workarounds I've Found

• Firefox DevTools work fine - same amount of properties, zero performance issues. This confirms it's Chrome-specific.
• Using Computed panel instead of Styles (but this defeats the purpose of DevTools)
• unstyled: true mode (but then I lose all PrimeVue styling)

What I'm Looking For

I'm not sure if this is something that can/should be fixed on PrimeVue's side, or if this is purely a Chrome limitation that I need to work around. I'm opening this issue to:

1. Check if other developers experience this
2. See if there are any PrimeVue configuration options I'm missing that could reduce the number of generated properties
3. Understand if this is a known limitation that just comes with the territory of using PrimeVue's theming system

The current situation makes it nearly impossible to debug styling issues in Chrome DevTools, which significantly impacts development workflow.

Pull Request Link

No response

Reason for not contributing a PR

• [ ] Lack of time
• [x] Unsure how to implement the fix/feature
• [ ] Difficulty understanding the codebase
• [ ] Other

Other Reason

No response

Reproducer

cannot be reproduced?

Environment

Chrome, Brave browser Windows 11 AMD Ryzen 9950x3d, Integrated Radeon Graphics

Vue version

nuxt 4.2.1

PrimeVue version

4.5.1

Node version

24

Browser(s)

chrome, brave

Steps to reproduce the behavior

Just make a clean installation of nuxt, then install @primevue/nuxt-module, @primeuix/themes.

nuxt.config.ts:

import Aura from '@primeuix/themes/aura'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: [
    '@primevue/nuxt-module'
  ],
  primevue: {
    options: {
      theme: {
        preset: Aura,
        options: {
          darkModeSelector: false
        }
      }
    }
  }
})

Expected behavior

devtools work normally..

[benjaminhunkins]

I too have started experiencing this issue.

Chrome's Inspector / Dev Tools "Elements" tab has started freezing and lagging in both dev and production environments. (To the extent that it is unusable.)

It's worth noting this seems to have emerged recently - I did not notice it prior to this week. My repo had not changed, so my initial assumption was this may be on Chrome's end...

Nuxt 4.2.1 with PrimeVue in styled mode, using a preset. Tailwind PrimeVue Utilities is also in use.

[Vendicated]

Hi I found this related chromium issue from last month: https://issues.chromium.org/issues/457696384

I left a comment where I also mentioned this github issue. If you guys have any more useful info to add, it'd be great if you could also add one (I have no clue what primevue is I found this issue via google. But for what it's worth, this is definitely not primevue's fault)

[twoez]

Same here, also can confirm this happens because of Primevue/Chrome. Debugged the full code base and disabled/reenabled step by step which let me to Primevue.

[guillaumeguiral]

I’m running into the same problem: Chrome DevTools (Elements tab) becomes extremely slow and almost unusable when inspecting pages that use PrimeVue.

[vladimir-econom]

I’ve got the same issue. The DevTools Inspect panel has become unusable.

PrimeVue v.3.51.0, Chrome v. 143.0.7499.41 (Official Build) (64-bit) Windows 10 Pro

[veikkosalminen]

Same ... almost impossible to use with Mac too

[LMarcinkowski]

Same here. It is almost impossible to use DevTools with Element tab.

Arc (MacOs) Version 1.124.0 (71787) Chromium Engine Version 143.0.7499.41

"primevue": "^4.4.1", "tailwindcss": "^4.1.17", "tailwindcss-primeui": "^0.6.1", "@primeuix/themes": "^2.0.1",

[dsherley9]

I had created an issue here as well regarding this: https://github.com/primefaces/primeuix/issues/126. In that thread, it was mentioned that an option may be added to replace CSS variables with their actual values.

[wesetaca]

Chrome 143.0.7499.41's DevTool has a regression that causes performance issue - this has been raised in....

• Reddit: https://www.reddit.com/r/chrome/comments/1phaqs8/i_cant_inspect_an_element_without_it_freezing/, which points to
• issues.chromium.org: https://issues.chromium.org/issues/467170764

We just need to update chrome to the latest version using chrome://settings/help and update (I tested version 143.0.7499.110 and its blazing fast - even faster than before all this)

[vladimir-econom]

Chrome 143.0.7499.41's DevTool has a regression that causes performance issue - this has been raised in....

• Reddit: https://www.reddit.com/r/chrome/comments/1phaqs8/i_cant_inspect_an_element_without_it_freezing/, which points to
• issues.chromium.org: https://issues.chromium.org/issues/467170764

We just need to update chrome to the latest version using chrome://settings/help and update (I tested version 143.0.7499.110 and its blazing fast - even faster than before all this)

Confirmed — I’ve just updated Chrome to the latest version: 143.0.7499.110 (Official Build, 64-bit) and checked the Inspect feature in DevTools. Now, when I inspect an element in the DOM, there is a slight delay (around 500–750 ms, as it feels) before the styles are displayed. However, this is acceptable, since DevTools no longer freezes during these moments and styles are downloading in the background.