Vue is not detected : How to fix vue dev-tools issue

Vue dev-tools is a handy little tool developed by VueJs to make the debugging easier when you develop Vue Applications . Currently there is a chrome extension available . Also you can install it via yarn or npm as well .

But sometimes you might come across a issue like this when you try to use this tool .

Vue is not detected.PNG

Following are few ways to fix the issue .

  1.  First of all , make sure you are using a non-minified version of VueJS.
  2. If you are using File:// protocol , By enabling “allow access to file URL’s option” in the chrome extension

    .vue-is-not-detected-chrome-extension
    after this try closing and reopening the chrome .

  3.  By adding the devtools = true in the app.js file .
    Vue.config.devtools = true

    More info here
  4. If non of the above doesn’t work , try loading your Vue app over a local http-server.
    Here is a simple http-server. And close and reopen your chrome tab .

I was able to resolve this issue by following option 2 and 3 .

Vue is not detected solved.PNG

Advertisements

One thought on “Vue is not detected : How to fix vue dev-tools issue

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s