vue.js not detected

[Mavrick2020]

Version

5.3.3

Browser and OS info

Chrome 85 / Windows 10

Steps to reproduce

The below line of code properly executed in Chrome. However, the dev tool doesn't recognize Vue.

<script src="http://unpkg.com/vue@next"></script> <script> const { createApp, ref } = Vue; const App = { setup() { const name = ref("Gregg"); return { name }; }, template: `

Hello {{ name }}

`, }; createApp(App).mount("#app"); </script>

What is expected?

Vue tab in Chrome Developer Tool

What is actually happening?

vue.js not detected

[mathewgrabau]

I am seeing/having the same problem in Chrome. Using cli/webpack bundling and just the local development server.

[mattrighetti]

I am using Vue.js 3 and Firefox, this is happening to me too

[ttntm]

Solution is in the docs: https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension

-> install the beta extension and it'll work ;)

[shevchenko-web]

first things first, install vue devtools from manual.
and then close the browser.
finally restart browser and check your vue development environment.
regards.

[mattrighetti]

This issue can be closed

[toddprouty]

If you are taking the Vue Mastery: Intro to Vue 3 course (linked from the official docs), and the extension is still not detecting Vue.js in the course files, try this:

1. Install the beta extension as mentioned by @ttntm.
2. Disable the stable (non-beta) version of the extension if you have it installed.
3. In the HTML course files, replace:

<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>

with:

<script src="https://unpkg.com/vue@next"></script>

This is the library currently recommended in the official docs "for prototyping or learning purposes" (but not production use).

[itsalaidbacklife]

I am having this issue with Vue 2 on

1. Chrome Version 88.0.4324.190 (Official Build) (64-bit) on windows 10
2. And also with Firefox 8.60 (64 bit)

I am running a local development server in development mode with vue cli, I am using the non-beta version of the devtools meant for Vue 2 both for chrome and for firefox.

I've enabled 'Allow access to file URLs' in chrome, restarted my computer, but the problem persists. I'm at a loss. What am I missing?

[itsalaidbacklife]

Update:
Running
window.postMessage({ devtoolsEnabled: true, vueDetected: true }); in the console fixes the issue in chrome and in firefox. My process.env.NODE_ENV is development for this local development server, and I had no issue using the devtools on this project without the above hack until the past several days

[fastfedora]

I am having similar issues with Vue 2 on Chrome Version 88.0.4324.150 (Official Build) (x86_64) on a Mac.

I discovered that if I closed Developer Tools, reloaded the page, the reopened Developer Tools, the Vue tab is now showing in Developer Tools, but the extension icon on the top toolbar still says "Vue.js not detected".

So works fine enough for now, but something is still funky with the detection. Last time I used Vue Developer Tools, which was quite a few months back on the same project, both the toolbar extension icon and the tab in Developer Tools worked.

[narkan]

Me too. Vue 2 and 3. Can never detect Vue pages. Uninstalled/reinstalled Vue.js devtools. No change
Any ideas??

[Brakaduun]

Same here - have not found a solution yet...

[shmooth]

mine eventually worked. not quite sure what fixed it -- maybe just the beta version of the Chrome plugin (linked above by @ttntm).

my setup: chromebook on the Linux VM, vue@3.0.11, Chrome Version 89.0.4389.130 (Official Build) (64-bit), laravel 8.x/php/intertiajs/vue with the out of the box laravel breeze/interia starter kit.

https://laravel.com/docs/8.x/starter-kits

My basic process:

1. uninstalled original vuejs extension.
2. restarted Chrome. rebooted.
3. installed beta.
4. tried. nothing.
5. uninstalled, re-installed beta, rebooted, restarted chrome, etc.
6. magically it started working, for now anyways.

There is also a standalone electron/desktop app, which looks interesting:

https://github.com/vuejs/vue-devtools

[Akryum]

Please install the beta version which is the only one that supports Vue 3.

[melroy89]

For the people who want to know where to download the beta, just go to Releases in GitHub: https://github.com/vuejs/devtools/releases

[tenaciouspete]

I'm still having this issue, I have also tried Legacy to no avail

29.04.22

[gerardreches]

2023, same issue

[chevylady]

I am just doing the course and have some prepared files to work with. I have same issue once it works once not. I work on VUE3 and have instalation codes from CDN in some files it works and browser detects vue, in other where is exactly same code it doesn't work. I used all kinds of cdn and tried to restart, reinstall extension, and so and so...

Just to proof

in one folder in html I have : <script src="https://unpkg.com/vue@next"></script> and it is detected!

in other I have:

<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue@next"></script>

it is not detected.

I used also without beta: vue@3dist/vue.global.js and sometimes works sometimes not.