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 產生的，它就能夠僅為預先渲染的路徑載入 payload，防止在控制台中出現 404 錯誤。

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

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

🤝 作用域和上下文改進

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

我們現在還支援 Vue composition API 的 原生 async context (#23526)。如果您不了解，我們在 Node 和 Bun 上支援原生 async context，透過 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
      }
    }
  }
})

🔢 Layer 改善

我們現在更仔細地按照 layer 的順序載入 layer 插件 (#22889 和 #23148) 和 middleware (#22925 和 #23552)，始終最後載入您自己的插件和 middleware。這應該表示您可以依賴 layer 可能注入的實用程式。

可能也是最重要的變更之一 - 如果您使用遠端 layer，我們現在會在您的 node_modules/ 資料夾中複製這些 layer (#109)，以便 layer 可以與您的專案一起使用依賴項。請參閱 c12 發布說明 以取得完整詳細資訊。

😴 Nightly 發布管道

每次提交到 Nuxt 的 main 分支都會自動部署到新的發布版本，以便在發布之前更輕鬆地進行測試。我們已將其從「edge 發布管道」重新命名為「nightly 發布管道」，以避免與edge 部署混淆。可能也與 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 生態系統中需要更新的模組；請為這些模組開啟 issue。如果您在遇到任何問題（如果您是模組作者）時需要協助，我也非常樂意提供協助。只要標記我，我就會查看。

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

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

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

✅ 升級

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

npx nuxi upgrade

完整發布說明

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

Nuxting 愉快 ✨