CODEWITHSUNDEEP
vue.jsnuxt.jsvue-devtools
joshua jackson
joshua jackson

Reputation: 629

vue-devtools always disabled with nuxt.js

I am creating a new project using nuxt.js v2.3.0. When I run npm run dev in my IDE console everything compiles correctly but when I go to the page I get the following error: Nuxt.js + Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

Here is my nuxt.config.js file:

const pkg = require('./package');

module.exports = {
  mode: 'spa',

  dev: true,
  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    bodyAttrs: {
      class: 'h-100'
    },
    htmlAttrs: {
      class: 'h-100'
    }
  },

  /*
  ** Global CSS
  */
  css: [
    '@/assets/app.css'
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '~/plugins/vue-notifications',
    '~/plugins/vue2-sidebar'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    // Doc: https://auth.nuxtjs.org/getting-starterd/setup
    '@nuxtjs/auth',
    '@nuxtjs/toast',
    '@nuxtjs/font-awesome'
  ],
  /*
  ** Axios module configuration
  */
  axios: {
    baseURL: 'http://users:8000'
  },

  /*
  ** Auth module configuration
  */
  auth: {
    strategies: {
      password_grant: {
        _scheme: 'local',
        endpoints: {
          login: {
            url: '/oauth/token',
            method: 'post',
            propertyName: 'access_token'
          },
          logout: 'api/logout',
          user: {
            url: 'api/user',
            method: 'get',
            propertyName: false
          },
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    },
    redirect: {
      login: "/account/login",
      logout: "/",
      callback: "/account/login",
      user: "/"
    },
  },

  /*
  ** Toast configuration
  */
  toast: {
    position: 'top-right',
    duration: 2000
  },


  loading: {
    name: 'chasing-dots',
    color: '#ff5638',
    background: 'white',
    height: '4px'
  },

  /*
  ** Router configuration
  */
  router: {
    middleware: ['auth']
  },

  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }
};

If I was running in production mode then I could understand but I'm not. I would expect vue-devtools to be running as normal.

Upvotes: 13

Views: 26304

Answers (6)

Miha Mulej
Miha Mulej

Reputation: 1

For me, setting vue.config.devtools = true in nuxt.config.js didn't work. But I managed to solve it by going to

  • Extensions
  • three dots on the right of the vue dev tools extension
  • manage extensions
  • Turn on "Allow access to file URLs"
  • Restart browser and thats it

Hope it helps :)

Upvotes: 0

joshua jackson
joshua jackson

Reputation: 629

I had to add the following to the nuxt.config.js:

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}

Now devtools shows up

Upvotes: 29

herla
herla

Reputation: 29

in nuxt.config.js

export default {
  mode: 'universal',
  devtools: true,

  ...
}

Hope this help someone stopped here.

Upvotes: 2

Despertaweb
Despertaweb

Reputation: 1820

As @joshua jackson stated worked for me, while devtools: true did NOT.

Version:

Nuxt.js v2.10.0

Vue v2.6.10

vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}

Upvotes: 3

dignitas
dignitas

Reputation: 65

I have struggled to get this working and tried all of the steps written here.

My issue was I had to run the server on a specified port.

server: {
  port: process.env.PORT || 5000,
  host: '0.0.0.0'
},

Adding this to nuxt.config.js solved the problem.

Upvotes: -1

Jan-Luca Klees
Jan-Luca Klees

Reputation: 536

tl:dr:

  • vue.config.devtools = true in my nuxt.config.js does not work for me.
  • I ran nuxt generate --devtools, then nuxt start and opened the website in my browser. Doing so I could use the Vue-Devtools.
  • After that I now can still use the Vue-Devtools, even when running nuxt dev and no vue.config.devtools flag set in my nuxt.config.js

Full story

So enabling the devtools flag in vue.config as in the accepted answer did not work for me either.

I first tried forcing the Vue-Devtools as described here. Adding a Plugin to set the window properties as described in the link. But without luck.

Digging in the Nuxt code I noticed the --devtools flag for the generate command and wanted to see if the Vue-Devtools work at all with Nuxt.

After running nuxt generate --devtools, then serving the application with nuxt start, I finally could access the devtools.
And now, even when running nuxt dev they are still accessible. And I don't have vue.config.devtools set at all in my nuxt.config.js. Weird. But maybe that helps someone.

More context: I am running Nuxt in spa mode, with target static as I don't have a Node server in the Backend and just want to build an SPA.

Upvotes: 7

Related Questions