Vue3 access component data attribute from console

Question

How do I access a component data attribute value from the console in Vue 3?

When I was working in vue2 I was accessing this using $vm0 and setting and getting any component attribute value but this does not work in Vue 3.

Vue.js devtools screenshot with data:

Here I want to access isCalendarAttached from Chrome console but I am not able to:

Here is my app object which is the root component:

Is there any way I can access that variable from console?

mikep · Accepted Answer · 2022-12-07 12:35:21Z

11

As of Vue.js devtools v6.0.0+:

$vm0.ctx.isCalendarAttached // Read-only
$vm0.ctx.$data.isCalendarAttached // Read/Write

Or if your state is moved into setup per Composition API:

$vm0.setupState.isCalendarAttached

Note:

Vue.js devtools v5 does not support Vue 3 so v6 is required.
You'll still need to ensure you've first selected your Vue component in the devtools.

mikep

7,5572 gold badges40 silver badges48 bronze badges

answered Aug 26, 2021 at 7:15

xlm

7,72415 gold badges59 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1