feat: Performance tab with Web Vitals integration

[Baroshem]

🆒 Your use case

Having up to date info about the performance of the page (even in development) can be really useful. There is a module https://www.npmjs.com/package/@nuxtjs/web-vitals that integrates with the npm package with the same name that allows to display the values of the web vitals inside your console tab.

🆕 The solution you'd like

I would love to see similar functionality in the devtools so that the users could observe there what are the current values of the metrics.

🔍 Alternatives you've considered

Not really. The alternative is to use the Web Vitals

ℹ️ Additional info

Apart from just getting the values of metrics, w could also display some hints on what user could do to improve the value of certain metric.

[Baroshem]

I can try to implement it if you like the idea :)

[antfu]

Sounds like a nice idea! Since we have the web-vital module, I guess it would be better to have the devtools integrations in the module directly.

[Baroshem]

So you would recommend to implement this as a part of the Web Vitals module, not the new tab in the devtools?

[antfu]

Modules could extend DevTools tabs: https://devtools.nuxt.com/module/guide, users would see the tab only when the module is installed. A lot of modules are doing this way

[Baroshem]

Yeah yeah, I understand that.

But in general, you would recommend to have this Performance tab only visible when a user has this module installed?

[antfu]

To me, it's not about when it is visible, it is about the scoping. If Nuxt has Web Vital built-in, then it makes sense to have it built in Nuxt DevTools. You can argue that there are a lot of things that are crucial to web development that might be worth including by default, like a11y, i18n, SEO, sitemaps, PWA..., and a lot of things. But it turns out that's the point of having modules - to allow each integration to be scoped and composed, while also allows different solutions and opinions to coexists.

[Baroshem]

Makes sense!

I will create an issue in the module repository then :)