Search code examples
laravelvue.jslaravel-5vue-devtools

Vue DevTools inspection is not available

Im using laravel 5.2

Package.json

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.0.0",
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0",
    "laravel-elixir-webpack": "^1.0.1",
    "laravel-elixir-webpack-official": "^1.0.2",
    "laravel-mix": "^2.1.14",
    "lodash": "^4.16.2",
    "vue": "^2.0.1",
    "vue-resource": "^1.0.3",
    "webpack": "^2.7.0"
  },
  "dependencies": {
    "get-ssl-certificate": "^2.1.2",
    "laravel-elixir-webpack-official": "^1.0.2",
    "vuedraggable": "^2.16.0"
  }
}

I tried both firefox and google chrome extension which says its disabled This is the line that restrict this 

   devtools: process.env.NODE_ENV !== 'production'

to my two sense this must NOT happen. Steps I took till now :

1- remove node_models install it again using npm install

2- replacing the vue file with a version provided in Vuejs.org

the icon is there colorful but no Veo devtool, when i use CDN on top of my header instead i get the devtools! What is causing this conflict! Im confused thanks for any help

Solution

  • Okay long story short the problem caused because it was not compiling my files and devmode was off in the version it was complied before. I was trying to use vue on laravel 5.2 , faced many problems so i decided to install laravel 5.3 by :

    composer create-project --prefer-dist laravel/laravel myapp "5.3.0"

    after that I executed :

      npm install

    and it started to install the dependencies and all , when it was done I tested gulp command to see if its a success compile which it was. so I moved package.json package-lock.json and gulpfile.js from my Laravel 5.3 to laravel 5.2 run npm install again and all Done!