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' }
  }
})

<template>
  <div>
    <!-- Will be redirected to /about-us on client-side -->
    <NuxtLink to="/about">About</NuxtLink>
  </div>
</template>

🤝 作用域和上下文改進

我們現在為在外掛中執行的 Nuxt 組合函式定義了一個“作用域”（#23667），它允許在使用 Vue 的 onScopeDispose 生命週期方法在離開網站之前運行同步清理。onScopeDispose生命週期方法。

我們現在還支援原生非同步上下文用於 Vue 組合式 API (#23526）。如果你不知道，我們支援 Node 和 Bun 上的原生非同步上下文，透過 experimental.asyncContext 啟用。

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

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

🔗 NuxtLink 預設值

你可以使用 defineNuxtLink 實用程式定義自己的 <NuxtLink> 元件。

今天，你可以直接在 nuxt.config.ts 檔案中自定義內建 <NuxtLink> 的選項（#23724).

例如，這可以讓你在整個網站中強制執行尾部斜槓行為。

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

⚡️ 資料獲取改進

我們為 useAsyncData 和 useFetch 提供了兩個非常重要的新功能。

1. 你現在可以設定 deep: false，以防止這些組合函式返回的 data 物件進行深度響應式（#23600）。如果你返回大型陣列或物件，這應該會提高效能。該物件在重新獲取時仍會更新；如果你更改 data 深層屬性，它不會觸發響應式效果。
2. 你現在可以使用 getCachedData 選項來處理這些組合函式的自定義快取（#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>

我們還支援以應用程式範圍的方式為這些組合函式配置一些預設值（#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 分支的每一次提交都會自動部署到新的版本，以便在釋出之前進行更簡單的測試。我們已將其從“edge release channel”重新命名為“nightly release channel”，以避免與邊緣部署混淆。可能也避免與 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 愉快 ✨