Accessing composables in the DevTools

[zoey-kaiser]

Hello! Thank you for all the time and hard work you have put into this project! It really sets Nuxt apart from Next and other frameworks! 🥳

We at the sidebase team are now slowly looking to add a Nuxt DevTools integration for our authentication package. I have been browsing the docs and source code for a while now and have also looked at how other modules handled creating their pages, however I have sadly not been able to find a solution.

We are using one main composable for authentication in @sidebase/nuxt-auth named useAuth(), which returns information about the current session, available providers and much more. This data is super helpful for debugging issues with our authentication and we would love to add a browser for this data inside the DevTools. How can I access the composable with the correct information inside the DevTools? Whenever I try to use it (without importing or importing it from #imports) it says it does not exist. When I try importing it from the source or dist folder it also does not work. Can you give me any pointers?

Thanks a lot in advance!

For reference here is the PR I am working in, along with the replication of our setup: sidebase/nuxt-auth#364

[antfu]

You want to access client state from a composable to your own DevTools view, did I understand correctly?

Composables are compile time so at runtime we can't import them dynamically (#imports module does not actually exists but will be compiled away).

The solution I can think about, is that maybe you could register a dev-time-only plugin to expose the state to somewhere like the nuxt/app instance, and access the instance using useDevtoolsClient() from the kit.

[zoey-kaiser]

Thanks for your quick answer! Ill have a shot at this and let you know how it goes!

[arashsheyda]

@antfu Do you think it's a good idea to provide useAuth in a plugin file?

example runtime/plugin.ts:

 const auth = useAuth()
  return {
    provide: {
      auth
    }
  }

so it can be accessible like: const { status } = client.value?.host.nuxt.vueApp.config.globalProperties?.$auth

[zoey-kaiser]

Hi @arashsheyda and @antfu

Thanks again for both of your help! I used a similar approach as you outlines @arashsheyda and it works now! What is the future plan for composable inside the DevTools?

I generally prefer the Syntax of composables over that of plugins, which is why we went with that route initially. Will there be any downsides to providing a composable + plugin now (as we are only adding this for DevTools support).

[antfu]

As I mentioned, auto-imported composables are compiling time, while DevTools is runtime + server config. So for devtools, your composable might not even be shipped to composable. We might be able to do a proxy plugin like you did to forward them, but that might be inefficient and might not be commonly used. I think your custom plugin approach works perfectly.

[zoey-kaiser]

Sounds good! Thanks for all your help ❤️