perf(layer): lazy load + lazily hydrate components

[danielroe]

a few components are imported statically even though they only render behind a config flag - LanguageSelect, AssistantChat, AppHeaderBottom, DocsAsideMobileBar - and others hydrate straight away even though they're hidden or below the fold.

docs page (playground)	main	branch
JS preloaded, raw	1129 kB	1055 kB
JS preloaded, brotli	294 kB	289 kB
components hydrated on mobile	525	353

this PR makes them Lazy*, hydrates the copy page dropdown on idle and the footer and prev/next links when visible, and only hydrates the left aside on lg, where it's actually visible. (this is particularly significant on mobile.)

DocsAsideMobileBar doesn't save much by itself as UHeader still pulls in vaul-vue, but it will once nuxt/ui#7160 lands. lazily hydrating the header and the TOC would help too, but I've left that until nuxt/ui#7158 and nuxt/nuxt#36428 land.

[vercel]

@danielroe is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
docus	Ready	Preview	Oct 8, 2026 10:03am UTC

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/create-docus@1460

npm i https://pkg.pr.new/docus@1460

commit: 4f06dcf

[docus-bundle-report]

Production bundle

Comparing 52322bd7 with 4f06dcf3. Compressed sizes are calculated from the emitted production assets.

Initial page load

Page	Base JS (Brotli)	PR JS (Brotli)	Δ JS	Δ CSS	Δ files
/en	502.8 KiB	499.0 KiB	-3.7 KiB (-0.7%)	—	+8
/en/getting-started/installation	288.4 KiB	278.2 KiB	-10.1 KiB (-3.5%)	—	+7
/en/essentials/components	302.7 KiB	292.6 KiB	-10.1 KiB (-3.3%)	—	+7

Entry script, modulepreload chunks and stylesheets referenced by the prerendered HTML. Lazy and prefetched chunks are excluded.

All client assets

Metric	Base (Brotli)	PR (Brotli)	Δ Brotli	Δ gzip
Client JavaScript	846.1 KiB	858.2 KiB	+12.1 KiB (+1.4%)	+11.9 KiB (+1.2%)
Client CSS	25.2 KiB	25.2 KiB	—	—
Other client assets	339.4 KiB	339.4 KiB	-3 B (-0.0%)	-3 B (-0.0%)
Total client assets	1.18 MiB	1.19 MiB	+12.1 KiB (+1.0%)	+11.9 KiB (+0.8%)

Largest module increases

Module	Base (Brotli)	PR (Brotli)	Δ Brotli
node_modules/nuxt/dist/components/runtime/lazy-hydrated-component.js	0 B	742 B	+742 B
layer/app/layouts/docs.vue?vue&type=script&setup=true&lang.ts	0 B	632 B	+632 B
layer/app/pages/[[lang]]/[...slug].vue?vue&type=script&setup=true&lang.ts	1.6 KiB	1.9 KiB	+238 B (+14.3%)
layer/app/error.vue?vue&type=script&setup=true&lang.ts	906 B	1.0 KiB	+148 B (+16.3%)
layer/app/components/app/AppHeader.vue?vue&type=script&setup=true&lang.ts	1.1 KiB	1.2 KiB	+103 B (+9.2%)
layer/app/components/docs/DocsAsideRight.vue?vue&type=script&setup=true&lang.ts	608 B	705 B	+97 B (+16.0%)
layer/app/app.vue?vue&type=script&setup=true&lang.ts	1.3 KiB	1.4 KiB	+61 B (+4.5%)
layer/app/pages/[[lang]]/[...slug].vue	106 B	150 B	+44 B (+41.5%)
node_modules/reka-ui/dist/shared/useIsUsingKeyboard.js	261 B	292 B	+31 B (+11.9%)
node_modules/@nuxt/ui/dist/runtime/components/PageBody.vue	449 B	478 B	+29 B (+6.5%)

Module values come from Nuxt’s analyzer and are attribution estimates. This workflow is currently report-only.

Workflow run

[larbish]

Thanks! Based on your own comparison table in the description, I did add Initial page load for 3 important pages in the bundle ci to improve reviews.