Ideas Collection

[antfu]

If you have any ideas/requests for features builtin into Nuxt DevTools, feel free to brainstorm your ideas below! 🙌

[McPizza0]

Component Renderer

• Visually see a component rendered within the Dev Tools
• Have Inputs for each of the props
  • If props are typed, set input controls to match (bool = toggle, number = number field, string = text field .... etc)

Usecase:
This will help developers by creating a visual library of all the components and be able to rapidly test props to reach desired effect.
More suitable for UI library style components rather than data heavy items.

[McPizza0]

What you are describing is Storybook 😄

So it is.... I've been avoiding their ads like the plague
Might need to actually give them a go then

[OlaAlsaker]

Yes, I recommend checking it out! However, nuxt/storybook is still not compatible with Nuxt 3. You are welcome to follow the discussion here: nuxt-modules/storybook#330

[antfu]

We are talking with @Akryum to have Histoire module contributing a tab for that!

[OlaAlsaker]

Cool, never heard about it before – maybe I should check it out 😄

[grupoproativa]

pessoal, preciso de um aplicativo que conte numero de comentarios no instagram, tipo, numero de @ mais marcado, comentarios repetidos e etc: alguem pode me ajudar? eu já vi um semelhante, se alguem puder me ajudar, entra em contato 81 9 9173-9117

[BracketJohn]

Note: This feature is supported in the latest version ✅

API Playground

A swagger-style API playground would be great. This is something that the Python framework FastAPI has implemented and the Python community has been super drawn by it. I think it would be a great addition to Nuxt for:

• PMs to test features without UI already being present,
• Devs to iterate on endpoints
• PMs/... showing off API-functionality to non-technical stakeholders

Here's what a swagger API playground would look like (taken from https://fastapi.tiangolo.com/features/)

Here's a prior issue on this from nitro: nitrojs/nitro#4

Thanks for these devtools, they are already great! 🦃

[jd-solanki]

Love to see FastAPI here ❤️

[antfu]

Thanks! We already have it in plan 🙌

[atinux]

Glad to see I was not alone thinking of this :D

[BracketJohn]

:D It has been in the back of my mind since end of 2021 when we started to switch from nuxt 2 + python backends to fullstack nuxt 3 :D

[ThimoDEV]

Profiler & Rerender highlighter

Just like the react devtools a functionality to record actions and see how much of a performance impact it has. See when components get mounted/unmounted etc so you know that component can be more optimized. I don't know if this is possible..

[antfu]

We are trying to add performance metrics here and there bit by bit. As such metrics can be hard to collect at runtime.

Current we have

• Time to render/navigate the current page, via the floating panel
• Time to build, bundle size, via the "Analyze Build" tab
• Hooks time, via "Hooks" tab

For mounted/unmounted time, it feels more low level at runtime, maybe better belongs to Vue DevTools.

[harlan-zw]

Built-in logger! Context: nuxt/nuxt#18701

@danielroe did you by any chance start working on this? Thought I may have seen a related tweet 🤔

[atinux]

I guess we could already hook into consola (cc @pi0 )

[danielroe]

I have indeed! Will open a pr shortly with initial implementation and update issue with my recommendations for next steps.

[francisashley]

Note: This feature is supported in the latest version, with #282 and #207 ✅

Firstly .. this tool is amazing!

In terms of DX, it would be great if:

• we can drag the overlay around the page
• resize the overlay
• resize panels inside the overlay
• reposition the toggle
• hide the toggle
• open components/page/plugins/file paths etc in vscode viaoption/alt+click https://stackoverflow.com/a/53786004/18133925

[antfu]

Thanks! I think most of them are addressed with #282 and #207.

[davidwebca]

Hi @antfu! Is there an internal API / function that allows us to tap into that component path? I'm trying to create a module that looks into a "queries" folder and fetches automatically any ".gql" graphql file that corresponds to the component's path/name. I have a very simple proof of concept as a composable (see here) that does somewhat work in dev, many tests to do stil of coursel, but the main thing I hate is how I resolve the path because it currently doesn't work while working in the module playground because it's under the "/playground" directory. I could simply do a "replace" again but all of these are dirty and prone to error in end-user land. I'm searching the codebase and docs right now to maybe get the proper component's path relative to the root directory, exactly what's currently found in the "data-v-inspector" attribute. 🤔

I might not be looking and asking at the right places, any tip would be appreciated. 🤘

[bbcvc]

Note: This feature is supported in the latest version, with #282 ✅

About dock side

Add a feature for Undock into separate window.
like Chrome devtools

[devzom]

this would be great!

[antfu]

Supported with #282, thanks!

[AdrianoCahete]

Can we dock to the sides? If yes, how?

If not, there's a request for that already?

[zyyv]

Note: This feature is supported in the latest version, with #120 ✅

Thanks to this powerful tool, our development experience has been further improved!

How about add static resource analysis? Usage like Componets.

It can achieve the following these:

• We can locate and know that the resource is used in that component or css file.
• Extends the file tree structure and preview it.
• Tile all resources and highlight used resources.
• etc.

The above suggestions are all referenced by images.

[zyyv]

Implemented in #120.

[cpreston321]

Note: This feature is supported in the latest version, with #194 and #247 ✅

As a user,

I would like to access nuxt docs within the dev tools without context switching between tabs to search through docs or maybe a more elegant way to be contained within the dev tools view.

I appreciate this powerful tool and all the hard work! 💚

[antfu]

For sure! It's on our roadmap already - we just need to figure out a good way to make it interactive.

[ippatev]

What do you think about a similar solution like this: https://supabase.com/blog/openai-embeddings-postgres-vector

[ddahan]

Based on the same idea, I would love having access to Nuxt Labs UI doc too.
This level of deep integration could be a reason to favor "official" libraries rather than external ones.

[Jak2k]

Maybe, a way to add any website woulde be a good idea. I'm currently using custom tabs in the nuxt-config, but the vue-docs don't allow to be embeded.

[antfu]

Implemented with #194 and #247

[antfu]

I guess it might not be related to Nuxt DevTools. Please open an issue with reproductions for bug reports.

[gangsthub]

Runtime Config inspection would be awesome, but being able to edit the values in runtime would be even more awesome.

I showcased this in a demo recently: https://github.com/gangsthub/nuxt-module-example-custom-devtools/

But the problem is that I couldn't make it work without changing how you access the values in the code.

[gangsthub]

What about having also a requests interceptor? (using msw.js or similar)

Or maybe it's an opportunity for a separate module that integrates with the Nuxt DevTools.

[ManUtopiK]

Record the browser activity and generate appropriate test files.
Use https://github.com/Pythagora-io/pythagora for server side activities.

[cpreston321]

Examine Project

As a user,

I would like dev tools to examine the project to try to look for best practices and ways to improve my experience. This one might be a little bit more tricky, I think this would useful. Showing ways to better improve the app in general and in performance. The only problem is trying to figure out what's right.

Example

• E.g: If you use SSG over node server you could possibly see a performance increase on average % -%.
• E.g: Instead of using thisFunction have you tried possibly making into a composable? You have duplicate code here, here and here. The downside to this is....
• E.g You don't seem to be using server/, it might be optimal to delete this directory until it's used.
• E.g The Nuxt Team prefers using .... over ....
• E.g It seems that you using the options api with only one method and data, have you tried using the Composition API to even simply it more ?

Options

The standard is set based on what version of nuxt so then make it easier when people upgrade they can see where functions are deprecated or there is better alternatives.

• Full Examine
  • Takes quite a bit longer but can be a button that pressed to then scan the whole repo itself with some progress bar.
• Quick Examine (Run on start of dev)
  • Maybe it just scan components, pages, endpoints that loaded initially AKA (whatever page they are currently on).

Conclusion

The goal is to show how do best practices, optimize code/quality and performance. This could help people greatly especially for beginners and just old projects migrating to the newer standards of nuxt.

[SuleymanDeveloper]

It would be nice if here can filter with folders.

[tesla3327]

Note: This feature is supported in the latest version, with #100 ✅

Inspect/modify storage

The hardest part of working with the storage layer of Nitro is that it's hard to know what's actually in there.

A visual editor of some sort would be fantastic.

[antfu]

@atinux implemented it in #100, you need to enable experimental features to see it. Let us know what do you see for improvements.

[mattickx]

When adding a module, the list is currently ordered alphabetically.
It would be nice to be able to sort by:

• Popularity (npm installs)
• Newest (creation date)
• Stargazers (GitHub stars)
• Maintained (last modified date)

I wouldn't want real-time data, as that would require a lot of requests.
Keep outgoing requests to a minimum.
An option would be the approach of Browserlist, to give user manual control of updates.

[arashsheyda]

implemented in #470. thank you!

[franklin-tina]

🔥🔥🔥

[MertcanYuzer]

Server Routes should allow an active/passive option for each choice in Query, Body, Headers, and Cookies tabs, so we don't have to delete and re-add them in each attempt.
I believe this would be useful when doing manual tests.
This feature is available in Postman, and I'm sharing sample screenshots below.
Active:

Passive:

[MertcanYuzer]

I saw that it was implemented in #474 . Thank you @arashsheyda

[khawarizmus]

Inspect Provide and Inject

I want to be able to see Where my provides are. Inspect them (probably modify them as well) and see where are they being injected and if they are.

https://vuejs.org/guide/components/provide-inject.html

[kucherenko]

Server Logs, Events, Requests etc.

It would be great to have the ability to track the server parameters like generated logs, executed SQL queries, HTTP requests, cloud function execution statistics, etc.

I think it would be helpful if the server could send special data to the client and the data will be displayed in the devtools.

Thank you

[Jak2k]

Maybe this would be better for a browser extension that integrates with vercel.

[kucherenko]

It can be helpful for different tech stacks, I think it can be part of the devtools as well

[nathanchase]

I'd love to be able to "pop out" Nuxt DevTools, similar to how you can undock the Inspect browser DevTools and have it in its own window.

I see "Popup", but clicking it doesn't appear to do anything currently?

[Jak2k]

Chrome and Firefox block pop-ups by default. There should be a small icon in the combo box (address bar) or you can change it inside the site permissions.

P. S.: Consider using an adblocker.

[arashsheyda]

let's track it on #510

[nathanchase]

P. S.: Consider using an adblocker.

I do on my main browser. I use a separate browser install (https://www.google.com/chrome/canary/) specifically for dev work with zero extraneous extensions running.

[nathanchase]

Things to note about PiP that will likely not allow Nuxt DevTools to functionally work like an undocked browser DevTools:

The Picture-in-Picture window in the Document Picture-in-Picture API is similar to a blank same-origin window opened via window.open(), with some differences:

The Picture-in-Picture window floats on top of other windows.

The Picture-in-Picture window never outlives the opening window.

The Picture-in-Picture window cannot be navigated.

The Picture-in-Picture window position cannot be set by the website.

https://developer.chrome.com/docs/web-platform/document-picture-in-picture/

Could we perhaps have Nuxt DevTools be a standalone Electron/Tauri app that can somehow connect to a browser instance - maybe through sockets? Then you would have full control of the Nuxt DevTools window.

[Smef]

I think a browser extension might be an easier thing to manage than a separate app.

[mattickx]

I'd like to track performance of rendering/loading more effectively.

Currently we have, load/rendering took X seconds, and server-side rendering (SSR) took X seconds as well.
It would be beneficial to have a more detailed analysis of this.

I'm thinking of the following:

• Total load/rendering timing (as it is currently displayed)
  • First Interactive timing
    • Page First Byte timing
    • Timing of AsyncData calls (seperated by call/page/component)
    • Page Render Time
      • Time for rendering each component
      • Time for hydrating each component
    • User Time
      • Time for each image to load

I'm probably missing other performance metrics.
In essence, this would be a simplified version of a flame graph using easy to understand Nuxt/Web terminology.

[ploca14]

I would love to be able to inspect the network requests made on the server during SSR. Similarly how you can in the browser devtools network tab. Making it easier to debug suspense waterfalls.

[Jak2k]

A view for linter output would be nice too.

[daver987]

Does anyone know if there is a way to track the state over time?
Currently I can see which functions are executed when via Timeline, but I can't see any way to view the change in values over time.
I can see the initial payload but again I don't see any way to track the changes of those values.

If this isn't a feature already this is would be super helpful to have as a feature.

[martinszeltins]

My suggestion would be to make the Payload data more readable instead of randomly generated strings, it would be more useful to show the http endpoint.

The other thing is that the data looks unreadable on dark mode:

[BayBreezy]

I think it would be nice to see a vee-validate integration.

I saw where Pinia was added recently. Having the stuff from vee-validate in DevTools would be nice too.

[antfu]

3rd parties integrations should provided by the integrations themselves. You might want to make a request on their side.

[BayBreezy]

Ok I will.
@antfu Is there any resource out there that demonstrates how I can create my own little application and stick it into the devtools? I see a few modules do it here and there but I tried and I can't replicate it. I really want to create a video on how to do it but I can't find any resource that walks me through doing it from point A to Z.
It would be nice to have a guide on how to do that. That way maybe I can create the vee-validate integration

[arashsheyda]

@BayBreezy https://devtools.nuxt.com/module/guide, also feel free to message me on Discord or Twitter

[KevinvOosterhout]

Next to the integration with VSCode i would love an integration with Webstorm/Jetbrains IDEs. Me (and a lot of other people) are exclusively working inside of the Jetbrains IDEs

[dsvgl]

Could we have an option for the devTools modal to have a drop shadow?
I use it in light mode and my website is mostly white. It looks kinda being part of the website and not laying on top of it 🙃

[arashsheyda]

for now you can modify the style using #nuxt-devtools-iframe
e.g:

#nuxt-devtools-iframe {
  box-shadow: 0 0 10px rgba(0px, 0px, 10px, 0.3);
}

[dsvgl]

Thx! This works.
I added a custom css file to the css array inside the $development property of nuxt.config.ts. 🤌🏻

[jiakun-zhao]

DevTools 有在新的浏览器标签页打开的方式吗？（不在我的页面显示按钮打开，类似 UnoCSS 在 Vite 上那样）

[blqke]

Are we able to configure UI settings locally ?

Because every time I start a new Nuxt project, I find myself tweaking the same DevTools settings (check "Close DevTools when clicking outside", check "Expand Sidebar", check "Scrollable sidebar", etc).

Maybe I missed something, but is there a way to configure default ui settings this way in nuxt.config.ts ?

 devtools: {
    enabled: true,
    ui: {
      interactionCloseOnOutsideClick: true,
    },
 }

or maybe this way, locally via .nuxtrc ?

devtools.ui.interactionCloseOnOutsideClick=true

[ManUtopiK]

UI settings are stored in the browser. So if you start a new project on localhost:3000 you should retrieve your config.

[martinszeltins]

Storing it in the browser is not a good idea, every time you clear your browser you lose the settings.

[kingtimm]

Seeing storybooks component mounting and testing using vitest makes me wonder about the ability to have the devtools components panel enhanced to allow mounting of a component with editable props. Pages devtools panel could even use route params/query in addition to props.