I have a vue.js + laravel installation project on my local server where the Vue.js devtools detects Vue.js and I'm able to use it. However, when I do a standalone Vue.js installation using 'vue create', Vue.js is not detected by devtools. I already allowed access to file URLs under chrome extension but it is still not working. The devtools was detecting Vue.js in the laravel version just fine without allowing access to file URLS.
Is there something else basic that I'm missing to get Vue.js devtools to work? There must be a simple step I missed because there should be loads of people creating fresh Vue.js projects on local server and getting devtools to work.
I'm using 'npm run serve' to run Vue.js in localhost, is this supposed to be detected by Vue.js devtools by default?
solved by reinstalling Vue.js 2 instead of the Vue.js 3 preview version as of 2020-08-26.
Related
When I run my Vue app, the Vue devtools extension detects Vue.js, but complains:
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I'm serving the app locally using yarn serve, which runs vue-cli-service serve.
vue: 3.0.0
vue devtools: 6.0.12
#vue/vue-cli: 5.0.1
#vue/vue-cli-service: 4.5.14
node: 16.14.0
yarn: 1.22.4
Chrome: 98.0.4758.102
Vue devtools DOES work if:
Another dev runs the app in Chrome from a clean local repo (same versions of everything above)
I create and run a new Vue app (vue create) in Chrome
Vue devtools DOES NOT work (same error message) if:
I run my app from a new local repo
I clear all browsing data from Chrome
I add vue.config.performance = true to my main.ts file
I add --mode=development to my vue-cli-service build command
I use Edge (Chromium) instead of Chrome
I update vue to 3.0.14
I access the app via http://localhost:8080 or a hosts file alias https://myalias:8080
AFAIK I never did anything to force a production build or disable vue devtools, so I'm stumped why it doesn't just work out of the box. What am I missing?
[UPDATE]
.env files have only VUE_APP_* variables defined.
Vue is installed locally (not using CDN version).
vue.config.devtools is not available in vue3. vue.config.performance appears to be the replacement.
Using the Vue devtools beta (6.0.0.21) does not help.
[UPDATE 2]
I upgraded all matching packages in my project to match the versions in the new Vue app for which the dev tools were working. The dev tools are now working on my app, but I don't know which package upgrade did the trick. Would still be nice if the Vue owners could provide more insight into why this occurs and how exactly to fix it.
For my situation, go to Chrome's More Tools > Extensions > Vue.js devtools > Details, and switch on the Allow access to file URLs option. Finally it works for me again.
Check that you do not have explicitly defined mode NODE_ENV in a local .env file
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
Having that would completely explain the behaviour you're experiencing and also why it works as expected on other machines.
I've installed the beta of Vue.js devtools in both Chrome and Microsoft Edge. When I load a vue web page that I'm running locally it shows
Vue.js is detected on this page.
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I've also tried setting
app.config.devTools = true;
in main.js but it has no effect.
This is for Vue.js 3.
Is there a Vue devtools browser extension that works with Vue 3?
Vue tools finally started working again after I did a yarn install on the project.
I have a legacy web application which I have introduced Vue into in a few places, via CDN. I have upgraded it from Vue 2 to Vue 3. There is a component used there which breaks with Vue 3, but there is a Vue 3 version of it. However, the author states this: "The component is packaged mainly for use with bundlers, if you require a browser build - post an issue." I do require a browser build. Is there some easy way I can do this for myself? I wasn't planning to use a bundler for this application, so I'm hoping I can use the existing modules to create a .js file I can use from the browser?
I've installed new vue-cli project and when launched locally and opened on localhost:8080 by running
npm run serve
Vue dev tools stayed inactive. I've read that one needs to initialize Vue instance, in order for it to work, but with vue-cli, app is initialized with createApp, but not with Vue instance.
I recently had this problem using vue cli 4.5.3. After an upgrade to 4.5.4 using vue upgrade the devtools fired up.
It was my bad. I've accidentally used vue v3 instead of v2. After switching back to 2 version, works fine.
Using snowpack with the Vue template. Just set it up. But chrome dev-tools says it doesn't recognize it as
vue.
I have deployed a basic Vue template app with vue-cli and this one get recognized as Vue. So the use Vue for local files is working correctly.
Not sure what it needs more or if it's something specific with snowpack
Using vue 3 and chrome dev-tools probably doesn't support it yet.