Skip to content
UI library comparison

Scoreboard

Vuetify

vue-vuetifyVue,suite

Within the 180 KB budget: 153.08 KB total.

Passes 18 of 18 criteria.

Delta, gzipped
128.87 KB
Total, against the 180 KB budget
153.08 KB
Criteria passed
18 of 18
Median first render
1741 ms*

Screenshots

vue-vuetify screen at 1440px wide, open the image file
1440px wide viewport, 1440 by 900, above the fold
vue-vuetify screen at 375px wide, open the image file
375px wide viewport, 375 by 812, above the fold

Hand built parts suite

Vuetify is a component suite.

1 of 3 hand built.

  • modalfrom the library
  • selectfrom the library
  • toasthand built

First render

1741 ms median first contentful paint.

First render is the median of 5 Lighthouse runs, taken from one Windows machine against this deployed site on 2026-09-16. The figures are relative: Lighthouse throttles to a simulated mid-tier phone, and other hardware or networks would move the milliseconds.

The result file

Every field in results/vue-vuetify.json
FieldValue
Build
build		vue-vuetify
Library
library		Vuetify
Framework
framework		vue
Kind
kind		suite
Bundle size
Total, gzipped
bundle.totalGzipKb		153.08 KB
Framework baseline, gzipped
bundle.baselineGzipKb		24.21 KB
Delta, gzipped
bundle.deltaGzipKb		128.87 KB
Over budget
bundle.overBudget		no
Accessibility defaults
axe-core violations before fixes
accessibility.axeViolationsBeforeFixes		0
Requirements needing custom code
accessibility.requirementsNeedingCustomCode		6
Ergonomics
Lines of application code
ergonomics.linesOfAppCode		958
Library imports
ergonomics.libraryImports		2
Type escapes
ergonomics.typeEscapes		0
Modal hand built
ergonomics.handBuilt.modal		no
Select hand built
ergonomics.handBuilt.select		no
Toast hand built
ergonomics.handBuilt.toast		yes
Time to first render
Median first contentful paint
render.lighthouseFcpMsMedian		1741 ms
Lighthouse runs
render.runs		5
Acceptance criteria
Criteria passed
criteria.passed		18
Criteria failed
criteria.failed		0
Failed criterion numbers
criteria.failedNumbers		none

The four categories as bars

Each bar is one build against the other seven on a shared scale, with the figure printed beside it. Color marks the framework and nothing else. React and Vue stay in separate groups, each ordered by delta.

  • React
  • Vue
  • Lighter bar behind: total
  • Vertical line: 180 KB budget
  • Dashed outline: over budget

Bundle size

Bundle size, gzipped

The darker bar is the delta, the build's total minus its framework baseline, and it is the only number compared across React and Vue. The lighter bar behind it is the total. The 180 KB budget applies to the total and is drawn on that scale.
React
  • Headless UIassembly kit44.90 KB delta, 89.81 KB total
  • shadcn/uiassembly kit58.89 KB delta, 103.80 KB total
  • Material UIsuite79.76 KB delta, 124.67 KB total
  • Chakra UIsuite97.81 KB delta, 142.72 KB total
  • Ant Designsuite233.87 KB delta, 278.78 KB total over budget
Vue
  • Quasarsuite91.71 KB delta, 115.92 KB total
  • Vuetify(this build)suite128.87 KB delta, 153.08 KB total
  • PrimeVuesuite150.20 KB delta, 174.41 KB total

Accessibility defaults

Accessibility requirements needing custom code

How many of the screen spec section 9 requirements the library did not supply, so the build wrote them.
React
Vue

axe-core violations before fixes

Serious and critical violations found before any manual fix.
React
Vue

Ergonomics

Lines of application code

Counted, not judged. Assembly kits leave more of the screen to the app, so a higher count is the expected trade.
React
Vue
  • Quasarsuite916 lines
  • Vuetify(this build)suite958 lines
  • PrimeVuesuite957 lines

Hand built parts: modal, select, and toast

How many of the modal, select, and toast the build wrote itself rather than taking from the library. Assembly kits are labeled, since a higher count is the trade they make.
React
Vue
  • Quasarsuite1 of 3 hand built
  • Vuetify(this build)suite1 of 3 hand built
  • PrimeVuesuite1 of 3 hand built

Time to first render

Median first contentful paint

First render is the median of 5 Lighthouse runs, taken from one Windows machine against this deployed site on 2026-09-16. The figures are relative: Lighthouse throttles to a simulated mid-tier phone, and other hardware or networks would move the milliseconds.
React
Vue
  • Quasarsuite1565 ms median
  • Vuetify(this build)suite1741 ms median
  • PrimeVuesuite1745 ms median