ページ内ナビ
概要
Vue DevTools 8.2.1はVue application向けのdebugging toolkitです。Vite plugin、standalone application、Chrome/Firefox extensionとして利用でき、開発中のVue application内部を調査する導線を提供します。
特徴と向いている用途
公式資料に基づく紹介・実機未検証 · 内容確認日:
主な特徴
向いている用途
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]Vue DevTools v8.2.1 README(2026-10-05)
- [2]vite-plugin-vue-devtools 8.2.1 package metadata(2026-10-05)
- [3]Vue DevTools v8.2.1 release(2026-10-05)
- [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
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
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
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'
成長
成長の推移 · 直近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で投稿できます。管理者が承認した後に公開されます。
あわせて探訪
- create-vue4,410 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
ViteベースのVue projectを必要なfeature選択付きで生成する公式scaffolder
TypeScript - Vue I18n2,714 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Vue 3 applicationの翻訳message・locale・formattingを一つのi18n pluginで管理する
TypeScript - Vue Macros1,984 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Vue SFCへ追加macroとsyntax sugarをcompile-time transformとして導入する
TypeScript - Unhead1,304 Stars
共通タグ 3件 · 共通カテゴリ 1件 · 同じ言語
Vue/SSR applicationのtitle・meta・script・SEO metadataをreactiveに管理する
TypeScript - Frontman709 Stars
共通タグ 3件 · 共通カテゴリ 1件
browserで選んだUIをlive DOM・CSS・source mapからsourceへ辿り、AIで直接修正する
ReScript - Vue 354,511 Stars
共通タグ 3件 · 同じ言語
reactivity・component・SFCを既存HTMLの部分導入からSPA・SSRまで同じUI modelで広げるprogressive framework
TypeScript
情報の誤りを報告
掲載内容に誤りや古い情報があればお知らせください。