Nuxt 3.16 · Nuxt 部落格

這次更新內容豐富！

⚡️ 全新 Nuxt

向 create-nuxt 打招呼，這是一個用於啟動 Nuxt 專案的新工具（非常感謝 @devgar 捐贈了套件名稱）！

它是 nuxi init 的精簡版本 - 只有六分之一的大小，並捆綁為單一檔案，所有依賴項都內聯，以讓您盡可能快速地開始。

啟動新專案就像這樣簡單

npm create nuxt

screenshot of create nuxt app

特別感謝 @cmang 提供的精美 ASCII 藝術。❤️

想了解更多關於 Nuxt CLI 的未來發展方向嗎？查看我們的路線圖這裡，包括我們關於互動式模組選擇器的計畫。

🚀 Unhead v2

我們已升級到 unhead v2，這是 Nuxt <head> 管理背後的引擎。這個主要版本移除了棄用項目並改進了上下文的工作方式

對於 Nuxt 3 使用者，我們發布了舊版相容性建置，因此不會有任何重大變更
現在透過 Nuxt 本身更直接地實作上下文

// Nuxt now re-exports composables while properly resolving the context
export function useHead(input, options = {}) {
  const unhead = injectHead(options.nuxt)
  return head(input, { head: unhead, ...options })
}

如果您在應用程式中直接使用 Unhead，請記住

從 Nuxt 的自動匯入或 #app/composables/head 匯入，而不是從 @unhead/vue 匯入
直接從 @unhead/vue 匯入可能會遺失非同步上下文

別擔心 - 我們在 Nuxt 3 中保持了向後相容性，因此大多數使用者不需要變更任何內容！

如果您選擇加入 compatibilityVersion: 4，請查看我們的升級指南以了解其他變更。

🔧 Devtools v2 升級

Nuxt Devtools 已升級到 v2 (#30889)！

您會喜歡新功能，例如自訂編輯器選擇、用於檢查已解析配置的 Discovery.js（非常適合除錯）、架構產生器的回歸以及更精簡的依賴項。

我們最喜歡的改進之一是能夠追蹤模組如何修改您的 Nuxt 配置 - 讓您透視幕後發生的事情。

👉 在 Nuxt DevTools 版本說明中探索所有詳細資訊。

⚡️ 效能改進

我們持續讓 Nuxt 變得更快，並且 v3.16 中有許多改進

使用 exsolve 進行模組解析 (#31124) 以及 unjs 生態系統的其餘部分（nitro、c12、pkg-types 等）- 這大幅加速了模組解析
更智慧的模組解析路徑 (#31037) - 優先考慮直接匯入以獲得更高的效率
消除重複的 Nitro 別名解析 (#31088) - 更精簡的檔案處理
透過跳過不必要的解析步驟來簡化 loadNuxt (#31176) - 更快的啟動速度
在 Nuxt 外掛程式中採用 oxc-parser 進行解析 (#30066)

所有這些速度提升都會自動發生 - 無需配置！

特別感謝 CodSpeed 與 Vitest 基準測試，以在 CI 中衡量這些改進 - 這真的很有幫助。

為了增加一些軼事證據，我的個人網站 roe.dev 使用 v3.16 加載速度提高了 32%，而 nuxt.com 提高了 28%。我希望您也能看到類似的結果！⚡️

🕰️ 延遲水合支援

我們非常高興為您帶來原生延遲/惰性水合支援 (#26468)！這讓您可以精確控制元件何時水合，從而提高初始載入效能和互動時間。我們正在利用 Vue 的內建水合策略 - 在 Vue 文件中查看它們。

<template>
  <!-- Hydrate when component becomes visible in viewport -->
  <LazyExpensiveComponent hydrate-on-visible />
  
  <!-- Hydrate when browser is idle -->
  <LazyHeavyComponent hydrate-on-idle />
  
  <!-- Hydrate on interaction (mouseover in this case) -->
  <LazyDropdown hydrate-on-interaction="mouseover" />
  
  <!-- Hydrate when media query matches -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />
  
  <!-- Hydrate after a specific delay in milliseconds -->
  <LazyFooter :hydrate-after="2000" />
</template>

您也可以使用 @hydrated 事件監聽水合何時發生

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

在我們的元件文件中了解更多關於惰性水合的資訊。

🧩 進階頁面配置

現在您可以微調 Nuxt 掃描頁面的檔案 (#31090)，讓您更精確地控制專案結構

nuxt.config.ts

export default defineNuxtConfig({
  pages: {
    // Filter specific files or directories
    pattern: ['**/*.vue'],
  }
})

🔍 增強除錯功能

我們使使用 debug 選項進行除錯更加靈活！現在您可以僅啟用您需要的除錯日誌 (#30578)

nuxt.config.ts

export default defineNuxtConfig({
  debug: {
    // Enable specific debugging features
    templates: true,
    modules: true,
    watchers: true,
    hooks: {
      client: true,
      server: true,
    },
    nitro: true,
    router: true,
    hydration: true,
  }
})

或使用 debug: true 保持簡單，以啟用所有這些除錯功能。

🎨 裝飾器支援

對於裝飾器愛好者（無論您是誰！），我們新增了實驗性支援 (#27672)。與所有實驗性功能一樣，非常感謝您的回饋。

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    decorators: true
  }
})

function something (_method: () => unknown) {
  return () => 'decorated'
}

class SomeClass {
  @something
  public someMethod () {
    return 'initial'
  }
}

const value = new SomeClass().someMethod()
// returns 'decorated'

📛 具名層別名

這是許多人要求的功能，現在它來了！自動掃描的本機層（來自您的 ~~/layers 目錄）現在會自動建立別名。您可以透過 #layers/test 存取您的 ~~/layers/test 層 (#30948) - 無需配置。

如果您想要其他層的具名別名，您可以在層配置中新增名稱

nuxt.config.ts

export default defineNuxtConfig({
  $meta: {
    name: 'example-layer',
  },
})

這會建立指向您的層的別名 #layers/example-layer - 使匯入更簡潔直觀。

🧪 錯誤處理改進

我們大幅改進了錯誤訊息和來源追蹤 (#31144)

針對未定義的 useAsyncData 呼叫提供更好的警告，並提供精確的檔案位置資訊
錯誤頁面現在可以在島嶼頁面錯誤上正確顯示 (#31081)

此外，我們現在使用 Nitro 美觀的錯誤處理（由 youch 提供支援）在終端機中提供更有幫助的錯誤訊息，並完整支援堆疊追蹤。

Nitro 現在也自動應用來源地圖，而無需額外的 Node 選項，並且我們在渲染錯誤頁面時設定適當的安全性標頭。

📦 模組開發改進

對於模組作者，我們新增了使用 addTypeTemplate 擴充 Nitro 類型的功能 (#31079)

// Inside your Nuxt module
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        declare module 'nitropack' {
          interface NitroRouteConfig {
            myCustomOption?: boolean
          }
        }
      `
    }, { nitro: true })
  }
})