Vue DevTools

The Vue DevTools browser extension and Vite plugin let you inspect the component tree, view reactive state, and debug router and pinia events.

4 min read Level 1/5 #vue#devtools

What you'll learn

Install the Chrome/Firefox extension
Inspect component props/state
View pinia stores and router state

Vue DevTools is the official debugging companion for Vue apps. It comes in two flavors: a browser extension for Chrome/Firefox/Edge, and a newer Vite plugin that runs in-page.

Install the Browser Extension

Search the Chrome Web Store, Firefox Add-ons, or Edge Add-ons for Vue.js DevTools. Once installed, a Vue tab appears in your browser DevTools when you open any Vue 3 app.

What You Can Do

Component tree: click any component to see its props, refs, computed, and provided values.
Edit state live: change a ref’s value in the inspector — the UI updates instantly.
Pinia panel: inspect store state, fire actions, and replay mutations.
Router panel: see matched routes and the navigation history.
Timeline: trace events, performance marks, and component renders.

The Vite Plugin (In-Page DevTools)

The new Vite plugin overlays DevTools directly in your app’s window — no extension required and works in any browser.

npm i -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()],
})

Restart npm run dev and a floating Vue logo appears bottom-left of your app.

Tips

If the Vue tab does not show up, your app may be production-built — DevTools by default ignores those.
For Pinia and Vue Router debugging, the extension needs their official packages (not third-party forks).

setup & `<script setup>` →