👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

展示專案

我們使用實戰部落格系列所開發的範例程式碼：https://github.com/ryanchien8125/ithome-2023-ironman-nuxt3-video/tree/day28/nuxt-app-blog 來作為展示 Nuxt DevTools 的專案。

安裝與啟用 Nuxt DevTools

目前最新版的 Nuxt CLI 在建立專案時，預設已經預置並啟用了 Nuxt DevTools，你無需再另外設置，你可以透過專案下的 ./nuxt.config.ts 檔案確定，devtools.enabled 屬性是否設定為 true。

export default defineNuxtConfig({
  devtools: {
    enabled: true,
  }
})

如果你的專案尚未啟用 Nuxt DevTools，你可以使用下列指令來為專案加入，需要注意的是 Nuxt DevTools 需要 Nuxt v3.1.0 或更高版本。

npx nuxi@latest devtools enable
當你使用指令啟用 devtools，等同於下列步驟安裝與配置 @nuxt/devtools 模組。

npm install -D @nuxt/devtools

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools'
  ],
  devtools: {
    enabled: true,
  }
})

同樣的你也可以透過設定 devtools.enabled 屬性為 false，或使用下列指令來禁用 Nuxt Devtools。

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 實戰部落格範例程式碼