perf: only load vue-data-ui css in components that use it

[danielroe]

🔗 Linked issue

🧭 Context

📚 Description

this is an experiment to decrease blocking time of initial load (from css size) by only loading vue-data-ui css when we need it

it seems to drop ~7kb from the initial load:

• https://pagespeed.web.dev/analysis/https-npmx-a2mkdwsw7-npmx-vercel-app/jx3cn5ov8d?form_factor=mobile

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 4, 2026 0:03am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 4, 2026 0:03am
npmx-lunaria	Ignored		Mar 4, 2026 0:03am

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/VersionDistribution.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 9e729664-4e4c-4bc6-ade9-129fcdb9dfa5

📥 Commits

Reviewing files that changed from the base of the PR and between 9c5a6cb and 186d92a.

📒 Files selected for processing (4)

• app/components/Package/TrendsChart.vue
• app/components/Package/VersionDistribution.vue
• app/components/Package/WeeklyDownloadStats.vue
• nuxt.config.ts

---

📝 Walkthrough

Walkthrough

This PR refactors the CSS loading strategy for the vue-data-ui library. Instead of loading styles globally via the Nuxt configuration, the styles are now dynamically imported within individual Vue components that utilise the library (TrendsChart, VersionDistribution, and WeeklyDownloadStats). The global CSS reference is removed from nuxt.config.ts, transitioning from centralised to component-level stylesheet loading.

Possibly related PRs

• chore: add generic type annotations to chart components #1615: Modifies the same chart components and their interactions with the vue-data-ui package configuration
• fix: bump vue-data-ui and impacts #1568: Updates the same component files to accommodate changes in vue-data-ui styling and imports
• fix: align sidebar items consistently #1857: Modifies WeeklyDownloadStats.vue alongside adjustments to component configuration and layout

Suggested labels

front

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly explains the purpose: reducing CSS blocking time by loading vue-data-ui CSS only in components that need it, with specific performance improvements mentioned.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/vue-data-ui-css

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[alexdln]

I even got 17kb diff locally - it went into a separate bundle and only loaded where there are charts 🔥