Nuxt 3.8

💻 CLI 改善

提醒您，我們現在使用 新的 Nuxt CLI，它現在是獨立版本。

✨ 內建 Nuxt DevTools

Nuxt DevTools v1.0.0 已發布，我們現在認為它已準備好作為 Nuxt 的直接依賴項發布。

📸 Nuxt Image 自動安裝

<NuxtImg> 和 <NuxtPicture> 第一級內建元件。

我們現在在第一次使用它們時自動安裝 @nuxt/image (#23717)。

📂 更深層的版面配置掃描

我們現在支援在 ~/layouts 中的子資料夾內掃描版面配置，就像我們對 ~/components 所做的一樣。

📊 應用程式資訊清單

我們現在支援內建的應用程式資訊清單 (請參閱 PR #21641)，它會在 /_nuxt/builds/meta/<buildId>.json 生成資訊清單。

如果網站是使用 nuxt generate 生成的，它允許僅為預先渲染的路由載入有效負載，防止主控台中出現 404 錯誤。

它還啟用客戶端路由規則。目前僅支援 redirect 路由規則；它們現在將在執行客戶端導航時重新導向。

export default defineNuxtConfig({
  routeRules: {
    '/about': { redirect: '/about-us' }
  }
})

🤝 作用域和上下文改進

我們現在為在插件中執行的 Nuxt composables 定義了一個「作用域」(#23667)，它允許在使用 Vue onScopeDispose 生命周期方法導航離開您的網站之前執行同步清理。

我們現在還支援 Vue composition API 的原生非同步上下文 (#23526)。如果您不清楚，我們在 Node 和 Bun 上支援原生非同步上下文，並透過 experimental.asyncContext 啟用。

如果您遇到 Nuxt instance unavailable 的問題，啟用此選項可能會解決您的問題

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

🔗 NuxtLink 預設值

您可以使用 defineNuxtLink 工具定義您自己的 <NuxtLink> 元件。

今天，您可以直接在您的 nuxt.config 檔案中自訂內建 <NuxtLink> 的選項 (#23724)。

例如，這可以讓您在整個網站中強制執行尾隨斜線行為

export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        activeClass: 'nuxt-link-active',
        trailingSlash: 'append'
      }
    }
  }
})

⚡️ 資料獲取改進

我們針對 useAsyncData 和 useFetch 有兩個非常重要的新功能

1. 您現在可以設定 deep: false 以防止對這些 composable 返回的 data 物件進行深度反應性 (#23600)。如果您正在返回大型陣列或物件，這應該會提高效能。當重新提取時，物件仍會更新；如果您變更 data 內部的屬性，它將不會觸發反應性效果。
2. 您現在可以使用 getCachedData 選項來處理這些 composable 的自訂快取 (#20747)

<script setup>
const nuxtApp = useNuxtApp()
const { data } = await useAsyncData(() => { /* fetcher */ }, {
  // this will not refetch if the key exists in the payload
  getCachedData: key => nuxtApp.payload.static[key] ?? nuxtApp.payload.data[key]
})
</script>

我們還支援以應用程式範圍的方式為這些 composable 設定一些預設值 (#23725)

export default defineNuxtConfig({
  experimental: {
    defaults: {
      useAsyncData: {
        deep: false
      },
      useFetch: {
        retry: false,
        retryDelay: 100,
        retryStatusCodes: [500],
        timeout: 100
      }
    }
  }
})

🔢 圖層改進

我們現在會更仔細地按照圖層的順序載入圖層插件 (#22889 和 #23148) 和中介軟體 (#22925 和 #23552)，始終最後載入您自己的插件和中介軟體。這表示您可以依賴圖層可能會注入的工具。

而且可能最重大的變更之一是 - 如果您正在使用遠端圖層，我們現在會在您的 node_modules/ 資料夾中複製這些圖層 (#109)，以便圖層可以使用您專案的依賴項。有關完整詳細資訊，請參閱 c12 發行說明。

😴 夜間發行通道

Nuxt 的 main 分支的每次提交都會自動部署到新的發行版本，以便在發行之前更容易測試。我們已將其從「邊緣發行通道」重新命名為「夜間發行通道」，以避免與邊緣部署混淆。而且可能也與 Microsoft Edge 混淆 (雖然我沒聽說有人對此感到困惑！)

• nuxt3 現在是 nuxt-nightly
• nuxi-edge 現在是 nuxi-nightly
• @​nuxt/kit-edge 現在是 @​nuxt/kit-nightly
• ...依此類推。

⚗️ Nitro v2.7

Nitro v2.7 已發布，其中包含許多改進和錯誤修復。

💪 類型匯入變更

Vue 要求類型匯入必須明確 (以便 Vue 編譯器可以正確最佳化和解析 props 等的類型匯入)。請參閱 核心 Vue tsconfig.json。

因此，我們決定在 Nuxt 專案中預設開啟 verbatimModuleSyntax，如果類型在沒有明確的 type 匯入的情況下被匯入，它將會拋出類型錯誤。要解決此問題，您需要更新您的匯入

- import { someFunction, SomeOptions } from 'some-library'
+ import { someFunction } from 'some-library'
+ import type { SomeOptions } from 'some-library'

您也可能會在 Nuxt 生態系統中遇到需要更新的模組；請為這些模組開啟一個問題。如果您在使用此功能時遇到任何問題，我也很樂意提供協助 (如果您是模組作者)。只需標記我，我就會查看。

如果由於任何原因您需要在您的專案中撤消此變更，您可以設定以下設定

export default defineNuxtConfig({
  typescript: {
    tsConfig: {
      compilerOptions: {
        verbatimModuleSyntax: false
      }
    }
  }
})

但是，我們建議您僅暫時執行此操作，因為 Vue 需要設定此選項才能獲得最佳結果。

✅ 升級

與往常一樣，我們升級的建議是執行

npx nuxi upgrade

完整發行說明

感謝您讀到這裡！我們希望您喜歡新的發行版本。如果您有任何回饋或問題，請務必告知我們。

Nuxting 愉快 ✨