Editor and Vue DevTools

One page of a Vue app shows a number you did not expect. The app, made with create-vue, the official project generator, has forty files, and opening them one by one to find the number's source is slow. Two tools help: VS Code, a free code editor, with the Vue - Official extension, and Vue DevTools, which looks inside the running app and shows where that number comes from.

The Code tab holds the parts of that app this lesson works on: VS Code's two settings files, vite.config.ts, which turns DevTools on, and a click counter, CounterButton.vue, for DevTools to inspect. You need one idea from the lesson Project structure and conventions: pages live in src/views/, components in src/components/, and stores, data that many components share, in src/stores/.

The editor: Vue - Official and the workspace files

The first tool is the editor, set up once for the whole team.

In VS Code, install Vue - Official (extension id Vue.volar, from its old name, Volar). It understands .vue files and checks types inside templates. It runs the same checks as vue-tsc, the type checker behind the pnpm type-check command, so both find the same errors.

If the old Vetur extension is installed, remove it: it was made for Vue 2 and fights the new one.

create-vue writes two workspace files, VS Code's settings for this one project, into the .vscode/ folder. The first, extensions.json, lists the extensions the project expects, and VS Code offers to install them when someone opens the folder:

{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

The file in the Code tab lists four more, for features chosen when the project was created. The second file, settings.json, turns on two actions for every save and names the formatter, here Prettier:

"editor.codeActionsOnSave": {
  "source.fixAll": "explicit"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

Each save now tidies the file's spaces and quotes with Prettier, and applies the fixes that ESLint, the code checker, can make by itself.

Vue DevTools, one question at a time

The second tool, Vue DevTools, answers three questions about the running app: which component drew this, what a store holds right now, and which action changed it.

create-vue adds it as a plugin of Vite, the tool that serves and builds the app: the vueDevTools() line in vite.config.ts. For apps you cannot add a plugin to, a browser extension for Chrome, Edge and Firefox does the same.

pnpm dev starts the dev server, Vite serving the app while you work, and the terminal prints the shortcut that opens DevTools on the app's page: Option+Shift+D on a Mac, Alt+Shift+D on Windows and Linux. A small Vue logo at the bottom of the page opens it too.

The first question is which component draws a heading. A fresh create-vue project shows a large heading, You did it!. Click the target icon next to the Vue logo, the "Toggle Component Inspector" button, then click that heading. VS Code opens the component that draws it, create-vue's example HelloWorld.vue, at that element.

The second question is what a store holds right now. Stores come from Pinia, Vue's store library, and DevTools gives them a Pinia tab. When you pick Pinia, create-vue ships one store, src/stores/counter.ts, with a number, count, and an action, increment(), a store function that changes count.

The Pinia tab lists a store only once a component has called it. The Code tab's click counter, CounterButton.vue, calls useCounterStore(), the function the store file exports:

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment()">Clicked {{ counter.count }} times</button>
</template>

Its button shows count and runs increment() on each click. Import it in the home page, src/views/HomeView.vue, and write <CounterButton /> in its template, as the Code tab does: the page shows "Clicked 0 times".

Select the counter store in the Pinia tab, hover over count and use "Edit value" to type 10: the button changes to "Clicked 10 times". Editing a value in DevTools is the quickest way to see the page at 0 or 500 without clicking 500 times.

The third question is which action changed a value. Open the Pinia tab's Timeline, press the record button ("Start recording"), and click the counter button. Each click adds increment start, mutation set (the change to count) and increment end. Select increment start and the details name the store and the action: store: "counter", action: "increment". When a number changes and you do not know why, record, reproduce, then read the timeline.

None of this reaches your users. The plugin runs with the dev server only, and a production build of Vue leaves out the hooks DevTools needs.

What goes wrong

Two surprises catch people early: an empty Pinia tab, and shared settings that never reach a teammate.

The Pinia tab shows Pinia (root) and No Data, although src/stores/counter.ts is right there in the project. A fresh create-vue project is in this state: its home page shows only TheWelcome, create-vue's welcome text, and never uses the store:

<script setup lang="ts">
import TheWelcome from '@/components/TheWelcome.vue'
// stores/counter.ts exists, but nothing on this page calls useCounterStore()
</script>

A store is created the first time a component calls its use…Store() function, and DevTools can only list what exists. Import a component that uses the store and render it:

<script setup lang="ts">
import TheWelcome from '@/components/TheWelcome.vue'
import CounterButton from '@/components/CounterButton.vue'
</script>

<template>
  <main>
    <CounterButton />
    <TheWelcome />
  </main>
</template>

The page shows the counter, and the Pinia tab lists counter.

The second surprise is a teammate whose editor never formats on save. create-vue's .gitignore, Git's list of files to leave out, keeps extensions.json and ignores everything else in .vscode/, so settings.json never reaches the repository.

.vscode/*
!.vscode/extensions.json

Add one exception line:

.vscode/*
!.vscode/extensions.json
!.vscode/settings.json

Commit settings.json, and every clone gets the same formatter and save actions.

What to remember

• Vue - Official checks .vue files as you type, like vue-tsc. Remove Vetur, and turn off the TypeScript 7 language server if .ts files that import a .vue file show errors.
• The two files in .vscode/ give everyone the same setup, once .gitignore lets settings.json through.
• The Component Inspector finds the component behind an element: click it, and VS Code opens the file.
• The Pinia tab shows and edits a store's values, once a component has called that store.
• The Pinia timeline names the action that changed a value. DevTools never reaches a production build.