透過 100 多個技巧的集合來學習 Nuxt!
發佈·  

Nuxt 3.13

Nuxt 3.13 發佈了 - 將我們為 Nuxt 4 建構的一些新功能移植回來!

🏘️ 路由群組

我們現在支援使用括號/方括號命名目錄,以組織您的路由,而不會影響路徑。

例如

目錄結構
-| pages/
---| index.vue
---| (marketing)/
-----| about.vue
-----| contact.vue

這將在您的應用程式中產生 //about/contact 頁面。 marketing 群組在您的 URL 結構中會被忽略。

原始 PR中閱讀更多內容。

🏝️ Islands 和 Head Metadata

現在伺服器元件 Islands 可以操作 head,例如在渲染時添加 SEO metadata。

#27987中閱讀更多內容。

🪝 自訂預先載入觸發器

我們現在支援 NuxtLink 的自訂預先載入觸發器 (#27846)。

例如

pages/index.vue
<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>

也可以為您的應用程式全域啟用/停用這些功能,並針對每個連結覆寫它們。

例如

nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: true,
        prefetchOn: { visibility: false, interaction: true }
      }
    }
  }
})

🗺️ 更好的伺服器 Source Maps

當使用 node --enable-source-maps 執行時,您可能已經注意到伺服器建構中 Vue 檔案的 source maps 指向 Vite 建構輸出(類似於 .nuxt/dist/server/_nuxt/index-O15BBwZ3.js)。

現在,即使在您的 Nitro 建構之後,您的伺服器 source maps 也會參考您的原始原始碼檔案 (#28521)。

請注意,改善建構效能的最簡單方法之一是在您不使用 source maps 時將其關閉,您可以輕鬆地在您的 nuxt.config 中執行此操作

nuxt.config.ts
export default defineNuxtConfig({
  sourcemap: {
    server: false,
    client: true,
  },
})

🎁 Module 作者的新功能

在 Nuxt v4 的準備階段,我們正在努力為 module 作者新增一些關鍵功能,包括在需要時新增 isNuxtMajorVersion 實用工具 (#27579) 以及使用新的 defineNuxtModule().with() 方法 (#27520) 為合併的 module 選項提供更好的推斷型別。

✨ 改進的開發警告

當在 middleware 中使用資料獲取 composables 時,我們不再發出警告 (#28604),並且當使用者元件的名稱以 Lazy 開頭時,我們會發出警告 (#27838)。

🚨 Vue TypeScript 變更

在 Vue 生態系統中,有一段時間我們一直在擴增 @vue/runtime-core,以便為 vue 新增自訂屬性和更多功能。但是,這無意中破壞了擴增 vue 的專案的型別 - 這現在是官方推薦和記錄的方式來擴增這些介面(例如,ComponentCustomPropertiesGlobalComponents等等)。

這表示所有程式庫都必須更新其程式碼(否則會破壞擴增 vue 的程式庫的型別)。

我們已在 Nuxt 中沿著這些方向更新了我們的型別,但是當與尚未這樣做的程式庫一起使用時,您可能會遇到最新的 vue-router 問題。

請建立一個包含重現步驟的問題 - 我很樂意協助建立 PR 以在上游程式庫中解決此問題。或者,您可以透過在專案根目錄中建立一個 declarations.d.ts 以及以下程式碼來解決此問題(credit@BobbieGoede

declarations.d.ts
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 v3.13.0 的完整發佈說明。

非常感謝參與此版本的所有人 - 您們是讓 Nuxt 成為可能的人。 ❤️

如果您有任何意見或問題,請隨時告訴我們! 🙏