Vue DevTools: Install, Use and Fix Common Problems

Vue DevTools is the official debugging tool for Vue apps. It shows your component tree and lets you edit component state, Pinia stores and routes live, and it records a timeline of events and renders. Install it as a browser extension (Chrome, Edge, Firefox) or as a Vite plugin that runs inside your app. Current versions support Vue 3 only; Vue 2 apps need the separate v6 legacy extension.

This guide covers the current release as of October 2026, based on the official Vue DevTools docs.

Which version do you need?

Your app	Install
Vue 3 + Vite	vite-plugin-vue-devtools (in-app) and/or the browser extension
Vue 3, other bundler (webpack, Vue CLI, Rspack)	Browser extension
Vue 2 (or Vue 2.7)	Vue.js devtools v6 (legacy) extension
Nuxt 3 / 4	Nuxt DevTools, which includes the Vue panels
Electron, an unsupported browser, or a remote device	Standalone app (@vue/devtools)

Versions as of October 2026: the browser extension and vite-plugin-vue-devtools 8.x are the stable line. Version 9 is in beta; it rebuilds the panels on top of Vite DevTools and needs Vite 8.3 or later. Stay on 8.x unless you want to test the beta.

How to install Vue DevTools

Option 1: Browser extension

1. Remove or disable any older Vue DevTools extension first. Two versions installed at once is a common reason nothing shows up.
2. Install from the Chrome Web Store (also works in Edge, Brave and Arc) or from Firefox Add-ons. For Vue 2, install Vue.js devtools (v6 legacy) instead.
3. Run your app in development mode (npm run dev).
4. Open browser DevTools (F12, or Cmd+Option+I on macOS) and pick the Vue tab.

The toolbar icon turns green when Vue is detected on the page.

Option 2: Vite plugin

The plugin injects the DevTools UI into your app, so it works in any browser, including Safari, with no extension.

npm add -D vite-plugin-vue-devtools

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [vue(), vueDevTools()],
})

Start the dev server and click the floating Vue button at the bottom of the page. New projects created with npm create vue@latest offer to add this plugin during setup. The plugin only runs on the dev server, not in production builds.

Two options worth knowing in 8.x:

vueDevTools({
  launchEditor: 'webstorm', // "open in editor" target; default is VS Code ('code')
  componentInspector: true, // click an element on the page to find its component
})

Option 3: Standalone app

For Electron apps or a browser without the extension:

npm add -g @vue/devtools
vue-devtools

Then add this to your HTML <head> during development only, and remove it before deploying:

<script src="http://localhost:8098"></script>

What you can do with it

Components: inspect and edit state

The Components panel shows the component tree. Select a component to see its props, data/setup state, computed values, injected values and emitted events. You can:

• Edit state live: change a ref or a prop-derived value and watch the UI update. Good for testing edge cases (empty lists, long names) without changing code.
• Find a component from the page: use the inspector (crosshair) icon and click an element.
• Jump to source: open the component file in your editor (with the Vite plugin).
• Search the tree by component name.

Pinia: stores and state

With Pinia installed, the Pinia panel lists every store and its state, getters and actions. You can edit state in place, and the Timeline records each action and mutation, so you can see which action changed a value. If you're coming from React, this is the Vue equivalent of what our Redux DevTools guide covers.

Router and Pages

The Router and Pages panels show all routes from Vue Router, the current route with its params and query, and which route a path you type would match. Useful for debugging guards and redirects.

Timeline: events and performance

The Timeline records component events, Pinia actions, router navigation and performance events (render and update times). To find a slow component:

1. Open Timeline and enable the performance layer.
2. Reproduce the slow interaction.
3. Look for components with long or repeated render and update entries.
4. Fix the cause, usually a large reactive object, an unstable key, or a computed that depends on more than it needs.

Pair it with the browser's Performance panel for JavaScript-level detail.

Graph and command palette

The Graph panel shows the reactive dependencies of the selected component, which helps when you can't tell why something re-renders. Ctrl+K / Cmd+K opens a command palette to jump between panels.

Vue DevTools not showing? Fixes

Work through these in order:

1. Production build. DevTools is disabled in production builds by default. Run the dev server. If you really must inspect a production build, set the compile-time flag __VUE_PROD_DEVTOOLS__: 'true' in Vite's define (see the Vue compile-time flags docs), and never ship that to users.
2. Wrong version. Vue 2 apps need the v6 legacy extension; the current extension only detects Vue 3.
3. Two extensions installed. Disable all but one, then reload.
4. Close and reopen browser DevTools after the page loads. The Vue tab is added when the app is detected.
5. iframes or micro-frontends. Make sure you're inspecting the frame where Vue is mounted.
6. Still nothing: try the Vite plugin, which doesn't depend on the extension at all.

Vue DevTools vs other tools

Tool	Use it for
Vue DevTools	Component state, Pinia, router, Vue-specific timeline
Browser DevTools (Elements, Network, Performance)	DOM, CSS, requests, JavaScript profiling
Nuxt DevTools	Nuxt modules, server routes, payload, plus the Vue panels
React DevTools	The same job for React apps; not interchangeable

Testing on iPhone? Safari's Web Inspector is your browser DevTools there; see our Safari developer tools guide, and use the Vite plugin for the Vue panels. For more testing and debugging tools, browse testing tools on DevHunt.

FAQ

Is Vue DevTools free?

Yes. It's an open source project (MIT license) maintained by the Vue team, available for Chrome, Edge, Firefox, as a Vite plugin and as a standalone app.

Does Vue DevTools work with Vue 2?

Not the current version. Vue DevTools v7 and later support Vue 3 only. For Vue 2, install the Vue.js devtools (v6 legacy) extension from the Chrome Web Store or Firefox Add-ons.

Can I use Vue DevTools in Safari?

There's no Safari extension. Use the Vite plugin, which renders DevTools inside your page in any browser, or the standalone app connected with a script tag.

Why does Vue DevTools say "Vue.js not detected"?

Usually the page is a production build, the app hasn't mounted yet, or you have the wrong version for your Vue release. Run the dev server, reload the page, and check that only one Vue DevTools extension is enabled.

How do I open Vue DevTools?

With the extension: open browser DevTools (F12) and select the Vue tab. With the Vite plugin: click the floating Vue button at the bottom of your app while the dev server is running.