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

Difference between $scope and $rootscope

Difference between $scope and $rootscope This article is written assuming you have the basic concepts of AngularJS !  Whenever you declare a controller in angular , you automatically create a $scope . So what does a $scope mean : “$scope is an object that refers to the application model. It is an execution context for expressions. $scopes are arranged in hierarchical structure which mimic the DOM structure of the application. $scope can watch expressions and propagate events.” documentation . In simpler terms it means that it is a way of tying an object to the DOM . If you consider the MVC model in Angular , the scope acts as a model . It is a template which hosts all the functions and the related data . Okay now that we have gotten some insight into the $scope , let talk about $rootscope shall we ? $rootscope is the parent (more like a root parent ) of all the $scopes you create . It is the ultimate boss . It is (almost) like the Object class of Java .It is the top most $scope of your app and it contains ng-app directive . There is only one $rootscope for each of the Angular application .

scopevsrootscope

Connection between $rootscope and $scope