How to Fix Vue-Devtools Always Disabled with Nuxt.js?

If you’re working with Nuxt.js v2.3.0 and encountering the frustrating 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,” even though you’re running npm run dev, you’re not alone. Let’s break down why this happens and how to resolve it.

Why Vue-Devtools Might Be Disabled in Development

Vue-Devtools typically auto-enable when your app runs in development mode. However, in some Nuxt.js setups, this detection might fail due to misconfigurations or conflicting settings. Let’s dissect your nuxt.config.js and identify the culprit.

Verify Your Nuxt.js Configuration

Your nuxt.config.js includes dev: true, which should enable development mode. However, Nuxt.js relies on process.env.NODE_ENV under the hood. If this value isn’t set to 'development', Vue-Devtools will remain disabled.

Quick Fix:
Explicitly enable Vue-Devtools in your Nuxt.js config. Add the following to your nuxt.config.js:

// nuxt.config.js
module.exports = {
  // ... other config options
  vue: {
    config: {
      devtools: true // Force-enable Vue-Devtools
    }
  }
}

This overrides any environment detection and ensures Devtools are enabled.

Check for Conflicting Plugins or Modules

Your project includes plugins like vue-notifications and vue2-sidebar. While rare, these might inadvertently modify Vue’s global configuration. For example:

// ~/plugins/vue-notifications.js
import Vue from 'vue';
Vue.config.devtools = false; // 👈 Accidentally disabling Devtools

Action:
Review your plugin files to ensure they’re not overriding Vue.config.devtools.

Confirm Environment Variables

Nuxt.js sets process.env.NODE_ENV to 'development' when running npm run dev. If this isn’t happening, your app could be misidentified as “production.”

Debugging Tip:
Temporarily log the environment in your Nuxt config:

// nuxt.config.js
console.log('Environment:', process.env.NODE_ENV); // Should log "development"

module.exports = {
  // ... rest of config
};

If this logs 'production', check your package.json scripts for accidental overrides (e.g., NODE_ENV=production in the dev script).

Update Dependencies

Outdated versions of Nuxt.js or Vue can sometimes cause compatibility issues. While you’re on Nuxt v2.3.0, consider upgrading to a newer version (v2.15+ or Nuxt 3) to resolve potential bugs.

Update dependencies with:

npm update nuxt

Validate Browser Extensions

Ensure the Vue-Devtools extension is enabled in your browser. If you’re using Chrome, check:

1. chrome://extensions/
2. Confirm Vue-Devtools is not disabled for your current domain.

Also, disable duplicate or conflicting extensions (e.g., beta vs. stable versions).

Final Configuration Adjustments

Here’s a revised nuxt.config.js with critical fixes:

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

module.exports = {
  mode: 'spa',
  dev: true, // Explicitly enable dev mode

  // 👇 Add Vue-Devtools override
  vue: {
    config: {
      devtools: true
    }
  },

  // ... rest of your config
};

Final Thoughts

Vue-Devtools are indispensable for debugging, so resolving their absence is crucial. By:

1. Forcing devtools: true in the Nuxt config,
2. Auditing plugins and environment variables,
3. Upgrading dependencies,

you’ll restore Devtools functionality. If issues persist, share your setup in the Nuxt.js/Vue communities chances are, others have encountered the same quirks!