🏘️ 路由組
我們現在支援用括號命名目錄來組織你的路由,而不會影響路徑。
例如
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue
這將在你的應用中生成 /
、/about
和 /contact
頁面。 marketing
組在 URL 結構中會被忽略。
閱讀更多資訊原始 PR.
🏝️ Islands 和 Head 元資料
現在伺服器元件 Islands 可以在渲染時操作頭部,例如新增 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 }
}
}
}
})
🗺️ 更好的伺服器 Source Map
當使用 node --enable-source-maps
執行時,你可能已經注意到伺服器構建中 Vue 檔案的 source map 指向了 Vite 構建輸出(例如 .nuxt/dist/server/_nuxt/index-O15BBwZ3.js
)。
現在,即使在 Nitro 構建之後,你的伺服器 source map 也會引用你的原始原始檔(#28521).
請注意,提高構建效能最簡單的方法之一是,如果你不使用 source map,就將其關閉,你可以在 nuxt.config.ts
中輕鬆完成此操作
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
這也將重新整理你的 lockfile,並確保你拉取 Nuxt 依賴的其他依賴項(尤其是在 unjs 生態系統中)的更新。
完整發布說明
衷心感謝所有參與此版本釋出的人——是你們讓 Nuxt 成為可能。❤️
如果你有任何反饋或問題,請隨時告訴我們!🙏