The Vue.js DevTools

• Install on Chrome
• Install on Firefox
• Install the Vite plugin
• Install the standalone app
• How to use the Developer Tools
  • Filter components
  • Select component in the page
  • Format components names
  • Filter inspected data
  • Inspect DOM
  • Open in editor

When you’re first experimenting with Vue, if you open the Browser Developer Tools you will find this message: “Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools”

This is a friendly reminder to install the Vue Devtools. What’s that? Any popular framework has its own tooling, which generally adds a panel that is much more specialized than the ones that the browser ships by default. In this case, the panel will let us inspect our Vue application and interact with it.

Official docs live at https://devtools.vuejs.org/.

This tool will be an amazing help when building Vue apps. The developer tools can only inspect a Vue application when it’s in development mode. This makes sure no one can use them to interact with your production app (and will make Vue more performant because it does not have to care about the devtools)

Let’s install it!

There are a few ways to install the Vue DevTools:

• browser extension (Chrome, Firefox, Edge / other Chromium browsers)
• Vite plugin (preferred if your project already uses Vite 6+)
• standalone application

Safari and other unsupported browsers do not ship a first-party extension. Use the standalone app there. Same idea if you need to debug Electron or similar setups.

The current extension (v7) targets Vue 3 only. If you still have a Vue 2 app, install the legacy v6 extension instead (Chrome ID iaajmlceplecbljialhhkmedjlpdblhp). Remove or disable older versions before installing the one you need.

Install on Chrome

Go to this page on the Google Chrome Store: https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpd and click Add to Chrome. That’s the current Vue DevTools (v7, Vue 3).

Go through the installation process:

The Vue.js devtools icon shows up in the toolbar. If the page does not have a Vue.js instance running, it’s grayed out.

If Vue.js is detected, the icon has the Vue logo colors.

The icon does nothing except showing us that there is a Vue.js instance. To use the devtools, we must open the Developer Tools panel, using “View → Developer → Developer Tools”, or Cmd-Alt-i

Edge, Arc, Brave, and other Chromium browsers use the same Chrome Web Store extension.

Install on Firefox

You can find the Firefox dev tools extension in the Mozilla addons store: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

Same Vue 3 / v7 vs Vue 2 / v6 rule as Chrome. Check the browser extension docs if you need the legacy build.

Click “Add to Firefox” and the extension will be installed. As with Chrome, a grayed icon shows up in the toolbar

And when you visit a site that has a Vue instance running, it will become green, and when we open the Dev Tools we will see a “Vue” panel:

Install the Vite plugin

If the project uses Vite, this is the preferred path. It needs Vite 6 or higher.

npm add -D vite-plugin-vue-devtools

Then wire it in vite.config.ts (or .js):

import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

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

Details: https://devtools.vuejs.org/guide/vite-plugin

Install the standalone app

Alternatively, you can use the DevTools standalone app. Useful for unsupported browsers, Electron, or remote debugging.

Install it globally:

npm add -g @vue/devtools

# or

yarn global add @vue/devtools

Or as a project dependency:

npm add -D @vue/devtools

(Latest @vue/devtools on npm is on the 8 line. Run npm view @vue/devtools version if you want the current number.)

Run the global install with:

vue-devtools

Or the local one with ./node_modules/.bin/vue-devtools.

This will open the standalone Electron-based application.

now, paste the script tag it shows you:

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

inside the project index.html file, and wait for the app to be reloaded, and it will automatically connect to the app:

If you installed @vue/devtools as a dependency, you can also import { devtools } from '@vue/devtools' and call devtools.connect() in development before you create the Vue app. See the standalone guide.

How to use the Developer Tools

As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser and moving to the Vue panel.

Another option is to right-click on any element in the page, and choose “Inspect Vue component”:

When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds:

On the top there are 4 buttons:

• Components (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time, for example it might manage your shopping cart widget and the slideshow, with separate, lightweight apps.
• Vuex is where you can inspect the state managed through Vuex. (Pinia shows up for Pinia apps.)
• Events shows all the events emitted
• Refresh reloads the devtools panel

Notice the small = $vm0 text beside a component? It’s a handy way to inspect a component using the Console. Pressing the “esc” key shows up the console in the bottom of the devtools, and you can type $vm0 to access the Vue component:

This is very cool to inspect and interact with components without having to assign them to a global variable in the code.

Filter components

Start typing a component name, and the components tree will filter out the ones that don’t match.

Select component in the page

Click the

button and you can hover any component in the page with the mouse, click it, and it will be opened in the devtools.

Format components names

You can choose to show components in camelCase or use dashes.

Filter inspected data

On the right panel, you can type any word to filter the properties that don’t match it.

Inspect DOM

Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component:

Open in editor

Any user component (not framework-level components) has a button that opens it in your default editor. Very handy.

Want me to talk about your product? You can sponsor this site.