How to access variables in a Vue component from the JS Console?

Question

I have a template like this:

<template>
  <div>{{hello}}</div>
</template>
<script>
export default {
  data() {
    hello: "Hello World!",
    secret: "The answer is 42"
  }
}
</script>

How can I get, and manipulate the value of secret from the Chrome debugging console?

I have installed the Vue extension which allows me to look at my component and see the variables. What I would like to do is to get these variables and manipulate them.

Is this possible?

If you are running vue in debug/test mode, have you tried accessing accessing the values in the console, assigning a new value, etc — Xixis, Aug 14 '18 at 19:32
I haven't tried, I don't know how to get the values. Is this something like `window.vue.mycomponent.data.foo`? — nowox, Aug 14 '18 at 19:33
Directly in the console assign a value to the vue variable or prop defined in the template — Xixis, Aug 14 '18 at 19:35
I don't understand your point. In my console I have this prompt: `>`. What should I write in the case I want to change the value of `secret`? — nowox, Aug 14 '18 at 19:36
`secret` is not a global variable it belongs to a `Vue` component — nowox, Aug 14 '18 at 19:38

score 38 · Accepted Answer · edited Aug 14 '18 at 20:09

38

There is a similar discussion on the Vue.js forum. Specifically, SevenLines post on Mar 25 2018 reads:

Update from 2018. If you use vue-devtools, you can access Vue from console by selecting desired component, and then accessing it through $vm variable. Check the image with example:

edited Aug 14 '18 at 20:09

zero298

25,467
10
75
100

answered Aug 14 '18 at 19:43

Xixis

881
6
8

1

Ok... the answer is then `$vm0.secret` then. – nowox Aug 14 '18 at 19:48

score 30 · Answer 2 · answered Oct 22 '19 at 09:04

30

I use this

// if result is single element
document.getElementById('app').__vue__

// if result is multiple elements
document.getElementsByClassName('some-class')[0].__vue__

assuming your using id #app for your entry

can also do it in other elements as long as identified as Vue Component element

and get element by tag/id/class

answered Oct 22 '19 at 09:04

aNulliHate

301
3
4

I am not able to get this in production mode though... What could be the reason and what could the solution be? – callmekatootie Apr 25 '21 at 13:40
4

With Vue3 it seems to be `__vue_app__`, not `__vue__`. `document.getElementById('app').__vue_app__` – Nick Graham Oct 04 '21 at 20:39

score 6 · Answer 3 · answered Oct 18 '19 at 05:10

6

Here's what I put in the Console, and it immediately modifies the data shown on the page:

myapp = app.__vue__.$children[0]
myapp.hello = 'Bonjour'
myapp.hello = 'Buenos dias'

Mysteriously, if you skip assigning the object to a variable, it doesn't work as intended:

app.__vue__.$children[0].hello = 'Bonjour'       // first time it works
app.__vue__.$children[0].hello = 'Buenos dias'   // second time it doesn't work

answered Oct 18 '19 at 05:10

krubo

5,969
4
37
46

any idea why the autocomplete doesn;t work when not assigned to a variable. Weird!! – Rakz Dec 18 '20 at 19:23
This appears to leverage some sort of shorthand in devtools; using `app` actually seems to be doing `document.getElementById('app')` under the hood, and returns an HTML element with an `id` attribute matching the typed name– in this case, the element you've rooted your Vue instance in. – zcoop98 Aug 15 '23 at 20:00

daniel p · Answer 4 · 2023-03-15T05:36:01.193

2

In 2023, Vue 3, to access:

data: $vm.data.yourProperty
computed: $vm.ctx.yourProperty
props: $vm.props.yourProperty

It works with vm0 too, since they are aliases for the last component click on DevTools

edited Mar 15 '23 at 05:36

answered Mar 15 '23 at 05:25

daniel p

741
7
12

`$vm0` and `$vm` are `undefined` for me. Can you elaborate on "they are aliases for the last component click on DevTools"? – Luke Aug 31 '23 at 16:05

How to access variables in a Vue component from the JS Console?

4 Answers4

Linked