🏘️ 路由群組
我們現在支援使用括號/方括號命名目錄,以便在不影響路徑的情況下組織您的路由。
例如
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
這將在您的應用程式中產生 /
、/about
和 /contact
頁面。 marketing
群組在您的 URL 結構中會被忽略。
在原始 PR 中閱讀更多資訊。
🏝️ Islands 和 Head 元數據
現在伺服器元件 islands 可以操作 head,例如在渲染時加入 SEO 元數據。
在 #27987 中閱讀更多資訊。
🪝 自訂預先載入觸發器
我們現在支援為 NuxtLink
自訂預先載入觸發器 (#27846)。
例如
<template>
<div>
<NuxtLink prefetch-on="interaction">
This will prefetch when hovered or when it gains focus
</NuxtLink>
<!-- note that you probably don't want both enabled! -->
<NuxtLink :prefetch-on="{ visibility: true, interaction: true }">
This will prefetch when hovered/focus - or when it becomes visible
</NuxtLink>
</div>
</template>
也可以為您的應用程式全域啟用/停用這些功能,並覆蓋每個連結的設定。
例如
export default defineNuxtConfig({
experimental: {
defaults: {
nuxtLink: {
prefetch: true,
prefetchOn: { visibility: false, interaction: true }
}
}
}
})
🗺️ 更好的伺服器來源對應
使用 node --enable-source-maps
執行時,您可能已經注意到伺服器建置中 Vue 檔案的來源對應指向 Vite 建置輸出(類似於 .nuxt/dist/server/_nuxt/index-O15BBwZ3.js
)。
現在,即使在您的 Nitro 建置之後,您的伺服器來源對應也會參考您原始的來源檔案 (#28521)。
請注意,改善建置效能的最簡單方法之一是關閉您不使用的來源對應,這可以在您的 nuxt.config
中輕鬆完成。
export default defineNuxtConfig({
sourcemap: {
server: false,
client: true,
},
})
🎁 模組作者的新功能
在 Nuxt v4 發布之前,我們正在努力為模組作者新增一些關鍵功能,包括在需要時使用新的 isNuxtMajorVersion
實用程式 (#27579),以及使用新的 defineNuxtModule().with()
方法為合併模組選項提供更好的推斷類型 (#27520)。
✨ 改善的開發警告
我們不再在中間件中使用資料擷取組合式函式時發出警告 (#28604),並且當使用者元件的名稱以 Lazy 開頭時會發出警告 (#27838)。
🚨 Vue TypeScript 變更
一段時間以來,在 Vue 生態系統中,我們一直在擴充 @vue/runtime-core
,以便將自訂屬性等加入 vue
。然而,這無意中破壞了擴充 vue
的專案的類型 - 這現在是官方建議和記錄的擴充這些介面的方式(例如,ComponentCustomProperties、GlobalComponents 和 等等)。
這表示*所有*程式庫都必須更新其程式碼(否則會破壞擴充 vue
的程式庫的類型)。
我們已按照這些方向更新了 Nuxt 中的類型,但當與尚未這樣做的程式庫一起使用時,您可能會遇到最新的 vue-router
的問題。
請建立一個包含重現步驟的問題 - 我很樂意協助建立 PR 以解決上游程式庫中的問題。或者,您可以透過在專案的根目錄中建立一個 declarations.d.ts
,並使用以下程式碼來解決此問題(感謝 @BobbieGoede)
import type {
ComponentCustomOptions as _ComponentCustomOptions,
ComponentCustomProperties as _ComponentCustomProperties,
} from 'vue';
declare module '@vue/runtime-core' {
interface ComponentCustomProperties extends _ComponentCustomProperties {}
interface ComponentCustomOptions extends _ComponentCustomOptions {}
}
✅ 升級
與往常一樣,我們建議的升級方式是執行
npx nuxi@latest upgrade --force
這也會重新整理您的鎖定檔案,並確保您從 Nuxt 所依賴的其他相依性中提取更新,尤其是在 unjs 生態系統中。
完整發布說明
非常感謝參與此發布的每個人 - 你們是讓 Nuxt 成為可能的人。❤️
如果您有任何意見或問題,請隨時告訴我們!🙏