devtools: vue.js not detected
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.
<div id="app"></div> <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
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 20
- Comments: 17 (1 by maintainers)
Solution is in the docs: https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
-> install the beta extension and it’ll work 😉
I am using Vue.js 3 and Firefox, this is happening to me too
Update: Running
window.postMessage({ devtoolsEnabled: true, vueDetected: true });in the console fixes the issue in chrome and in firefox. My process.env.NODE_ENV isdevelopmentfor this local development server, and I had no issue using the devtools on this project without the above hack until the past several daysIf 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:
<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).
first things first, install vue devtools from manual. and then close the browser. finally restart browser and check your vue development environment. regards.
Me too. Vue 2 and 3. Can never detect Vue pages. Uninstalled/reinstalled Vue.js devtools. No change Any ideas??
Please install the beta version which is the only one that supports Vue 3.
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.