The Wire · Showcase
VITEPRESS KILLS LAYOUT SHIFT WITH AUTO IMAGE SIZING
By RepoJournal · Filed · About Vue.js
VitePress now automatically adds width and height attributes to local images, eliminating cumulative layout shift without a single developer keystroke.
The flagship feature shipping in VitePress [1] uses a custom markdown-it plugin powered by the image-size package to compute dimensions for local and public images before render time. This solves a real pain point: layout thrashing on image load. Remote images are skipped due to fetch complexity, a pragmatic call that keeps the solution lightweight. On the maintenance front, VitePress is also cleaning house [2] by removing an aggressive stackTraceLimit Infinity setting that was a temporary workaround for shiki twoslash and outlived its usefulness. The create-vue scaffold tool added support for nub package manager detection [3], fixing a misdetection bug where nub installations were falling back to npm instead of recognizing the Rust CLI's pnpm-compatible command grammar. Minor dependency bumps and workflow digest updates continue rolling across both repos [4], keeping the ecosystem current.
Action items
- → Review VitePress auto-image-sizing feature when it ships - check if it affects your doc build vuejs/vitepress [monitor]
- → If you use nub as your package manager with create-vue, upgrade to pick up proper detection vuejs/create-vue [plan]
References
- [1] feat: auto-add width/height to local images to avoid layout shift ↗ vuejs/vitepress
- [2] fix: remove stackTraceLimit Infinity for DEBUG (#5318) vuejs/vitepress
- [3] feat: detect nub package manager (#1066) vuejs/create-vue
- [4] chore(deps): update dependency prettier to v3.9.5 ↗ vuejs/create-vue