OSS探訪GitHubでログイン

Vue applicationのcomponent・state・routingを開発中に可視化してdebugする

スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標(上限なし)です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
2,920
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/10/02
ページ内ナビ

概要

Vue DevTools 8.2.1はVue application向けのdebugging toolkitです。Vite plugin、standalone application、Chrome/Firefox extensionとして利用でき、開発中のVue application内部を調査する導線を提供します。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日:

主な特徴

Vite pluginとしてdevelopment environmentへ組み込む

vite-plugin-vue-devtoolsをVite設定へ追加し、開発server上からVue DevTools UIへアクセスできます。

出典:[1][2]

standalone appやbrowser extensionからVue applicationを調査する

READMEはVite pluginに加え、Standalone App、Chrome Extension、Firefox Extensionを公式の導入方法として案内しています。

出典:[1]

向いている用途

Vue UIのstate変化やcomponent treeを開発時に追跡したい場合に向く

複雑なcomponent構成、router、reactive state、plugin integrationを持つapplicationで、browser consoleだけでは追いにくい状態を可視化したい開発時に有効です。

出典:[1]

導入前の確認

Vite plugin 8.2.1はVite 6・7・8をpeer dependencyとして要求する

vite-plugin-vue-devtools 8.2.1はVite ^6.0.0 || ^7.0.0 || ^8.0.0をpeer dependencyとして定義しています。Vite majorを更新する場合はpluginとの組み合わせを確認してください。

出典:[2]

8.2.1はdeclarationへVite/Vue Router型をbundleしないよう修正する

8.2.1ではcore declarationからViteとVue Routerの型を不要にbundleしない修正が入っています。TypeScript projectで型dependencyが膨らむ問題を避けるmaintenance releaseです。

出典:[3]

参考にした公式資料

  1. [1]Vue DevTools v8.2.1 README(2026-10-05)
  2. [2]vite-plugin-vue-devtools 8.2.1 package metadata(2026-10-05)
  3. [3]Vue DevTools v8.2.1 release(2026-10-05)
  4. [4]Vue DevTools MIT license(2026-10-05)
編集部からの補足

Vue DevTools repositoryは現在v7以降の系統を扱い、旧v6は別repositoryへ移されています。Vite統合のvite-plugin-vue-devtools 8.2.1はVite ^6/^7/^8をpeer dependencyとして要求します。

3ステップで試す

  1. 1

    Vite plugin版Vue DevTools 8.2.1を固定して導入する

    一時npm projectへreview対象pluginとpeer range内のViteを固定して導入します。

    demo=$(mktemp -d "${TMPDIR:-/tmp}/vue-devtools.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-dev --save-exact vite-plugin-vue-devtools@8.2.1 vite@6.0.0
  2. 2

    package versionを確認する

    pluginとViteが想定versionで解決されていることを確認します。

    test "$(node -e "const fs=require('fs');const v=p=>JSON.parse(fs.readFileSync(p)).version;console.log(v('node_modules/vite-plugin-vue-devtools/package.json')+'/'+v('node_modules/vite/package.json'))")" = '8.2.1/6.0.0'
  3. 3

    Vite plugin exportを確認する

    development serverを起動せず、Vite plugin factoryがimportできることを確認します。

    test "$(node --input-type=module -e "import VueDevTools from 'vite-plugin-vue-devtools';console.log(typeof VueDevTools)")" = 'function'
公式READMEで確認

成長

成長の推移 · 直近30日

2,920 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit(直近30日)
15
Open PR
30

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
Stars
2,920
Forks
280
Watchers
11
Open Issues
111
Contributors
84
所有者種別
Organization
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/10/02

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか?