Nuxt DevTools

Nuxt開発エクスペリエンスを向上させます。
Nuxt DevToolsは、アプリケーションをより深く理解するための視覚的なツールセットです。

👋 はじめに | 💡 アイデアと提案 | 🗺️ プロジェクトロードマップ | 📚 ドキュメント

インストール

Nuxt DevToolsには、**Nuxt v3.9.0以降**が必要です。

Nuxt v3.8.0では、Nuxt DevToolsは**デフォルトで有効**になっています。Shift + Alt / ⇧ Shift + ⌥ Option + Dキーを押して開くことができます。

Nuxt DevToolsを明示的に有効または無効にするには、nuxt.configを更新します。

export default defineNuxtConfig({
  devtools: {
    enabled: true // or false to disable
  }
})

Edgeリリースチャンネル

NuxtのNightlyチャンネルと同様に、DevToolsにもedgeリリースチャンネルがあり、mainブランチへのすべてのコミットで自動的にリリースされます。

edgeリリースチャンネルをオプトインするには、次のコマンドを実行します。

{
  "devDependencies": {
--    "@nuxt/devtools": "^0.1.0"
++    "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest"
  }
}

ロックファイル（package-lock.json、yarn.lock、またはpnpm-lock.yaml）を削除し、依存関係を再インストールします。

モジュールオプション

Nuxt DevToolsを構成するには、devtoolsオプションを渡します。

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: {
    // Enable devtools (default: true)
    enabled: true,
    // VS Code Server options
    vscode: {},
    // ...other options
  }
})

使用可能なすべてのオプションについては、IDEのTSDocsまたは型定義ファイルを参照してください。

機能

Nuxt DevToolsの開発理由と機能については、発表ブログ記事🎊をご覧ください！

Nuxt DevToolsは、一般的な使用方法に関する匿名テレメトリデータ収集します。これにより、すべてのユーザーにおける機能の使用状況とカスタマイズを正確に把握できます。このデータは、Nuxt DevToolsの各機能の使用方法を理解し、（DXとパフォーマンスの）改善と関連性を測定するのに役立ちます。また、取り組みの優先順位を決定し、ユーザーにとって最も重要な機能に焦点を当てるのにも役立ちます。

Nuxt DevToolsのテレメトリデータはNuxt Telemetryを介してパイプライン処理されるため、Nuxt DevToolsはローカルおよびグローバルのNuxt Telemetry設定を尊重します。Nuxt DevToolsの設定で、Nuxt DevToolsのテレメトリをオプトアウトすることもできます。

収集するデータは完全に匿名であり、ソースに追跡可能ではなく（ハッシュ+シードを使用）、集約形式でのみ意味を持ちます。収集するデータに個人を特定できる情報や追跡可能な情報は一切含まれていません。