help: How do I access component state or data?

[dochoss]

📚 What are you trying to do?

I love the new Nuxt DevTools! Very nice and friendly, but I seem to be missing how to access component data like props and local state. I feel like the tool is already so advanced the functionality is likely already there, but I can't seem to find any guidance on how to access that and I can't figure it out inside the tool itself. In the example below, where would I find the current value of myVar in DevTools?

Example:

<template> <pre>{{ myVar }}</pre> </template>
<script setup>
const myVar = ref(1)
</script>

🔍 What have you tried?

I've looked through the documentation and tried all the obvious options I can find in the tool.

[arashsheyda]

Right now, there is no tab for states in Nuxt DevTools, but I think in the meantime, you can use the Vue DevTools state tree.

You can track it in #244.

[rafazafar]

U can view the state in DevTools if you switch to useState() instead of ref() https://nuxt.com/blog/nuxt-devtools-v1-0#payload-editor

[manniL]

U can view the state in DevTools if you switch to useState() instead of ref() nuxt.com/blog/nuxt-devtools-v1-0#payload-editor

Side note: Don't switch every ref to useState just because of this 👀😋

[misbahansori]

This feature already exists on vuejs-devtools-next, but it would be nice to have it on nuxt-devtools as well.

Not sure if it's already on the roadmap. Hopefuly, we can have it soon.

[antfu]

Yes it's already on our plan to reuse the infra and inherit the features from Vue DevTools Next. It's will take some time and effort on both sides, stay tuned :)

[WafelT]

What is the name of the module? Is it possible to install it now on nuxt devtools?

[Smef]

Component state is visible using the regular Vue Dev Tools in your browser.

Alternatively, you can use Vue DevTools Next in stand-alone mode by adding the script to your head of your Nuxt app.

[antfu]

655 should solves this