vue-devtools always disabled with nuxt.js

Question

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.

@Aldarund I use 'npm run dev' in my IDE console and run the app in Chrome — joshua jackson
– joshua jackson, Commented Nov 17, 2018 at 11:00

kissu · Accepted Answer · 2021-03-30 14:01:54Z

29

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

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

Now devtools shows up

edited Mar 30, 2021 at 14:01

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Nov 17, 2018 at 12:43

joshua jackson

6511 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christopher Over a year ago

What version were you running when this worked? I'm on the latest v2.4.5 and had no luck. nuxtjs.org/api/configuration-build#devtools indicates we should be able to set devtools to true in the build config but that doesn't work for me either (nor in combination with this).

Jan-Luca Klees · Accepted Answer · 2020-10-09 10:08:45Z

7

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.

answered Oct 9, 2020 at 10:08

Jan-Luca Klees

5574 silver badges8 bronze badges

3 Comments

Ajeeb.K.P Over a year ago

I like this answer. Because, code change just for debugging doesn't make sense.

equi Over a year ago

Thank you, helped me with Nuxt 3 as well

JeremyGranger Over a year ago

I'm using Nuxt 2.16 for a legacy app. THIS was the only way I got it to work. Thank you!!!

kissu · Accepted Answer · 2021-03-30 14:01:15Z

3

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
  }
}

edited Mar 30, 2021 at 14:01

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Jul 16, 2020 at 10:56

Despertaweb

1,83023 silver badges31 bronze badges

1 Comment

RockyK Over a year ago

I found the snippet here: nuxtjs.org/api/configuration-vue-config

kissu · Accepted Answer · 2021-03-30 14:01:36Z

2

in nuxt.config.js

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

  ...
}

Hope this help someone stopped here.

edited Mar 30, 2021 at 14:01

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Jun 29, 2020 at 4:44

herla

291 bronze badge

Comments

Miha Mulej · Accepted Answer · 2023-03-14 09:09:19Z

0

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 :)

answered Mar 14, 2023 at 9:09

Miha Mulej

1

Comments

miken32 · Accepted Answer · 2025-10-30 22:15:56Z

0

This is the message that I get in Firefox console when running a Nuxt 2 project:

[_Vue DevTools v7 log_]

Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.

The legacy version of chrome extension that supports both Vue 2 and Vue 3 has been moved to https://chromewebstore.google.com/detail/vuejs-devtools/iaajmlceplecbljialhhkmedjlpdblhp

The legacy version of firefox extension that supports both Vue 2 and Vue 3 has been moved to https://addons.mozilla.org/firefox/addon/vue-js-devtools-v6-legacy

Please install and enable only the legacy version for your Vue2 app.

[_Vue DevTools v7 log_]

You will need to disable the v7 DevTools while running Nuxt 2 projects.

edited Oct 30 at 22:15

miken32

42.5k16 gold badges127 silver badges177 bronze badges

answered Oct 30 at 16:23

Avraham

9781 gold badge14 silver badges28 bronze badges

Comments

kissu · Accepted Answer · 2021-03-30 14:00:54Z

-1

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.

edited Mar 30, 2021 at 14:00

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Dec 11, 2020 at 21:01

dignitas

651 silver badge7 bronze badges

1 Comment

Titan Over a year ago

to add to this, if you force a different port without specifying it in nuxt config as shown above it will always struggle to load dev tools. Keeping it on 3000 has always worked best for me

Collectives™ on Stack Overflow

vue-devtools always disabled with nuxt.js

7 Answers 7

1 Comment

tl:dr:

Full story

3 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

tl:dr:

Full story

3 Comments

1 Comment

Comments

Comments

Comments

1 Comment

Linked

Related