nuxt-ssr-lit

用於 Lit 自訂元素的 Nuxt3 模組，提供伺服器端渲染和客戶端注水。

🚀 使用方式

注意：此模組適用於 Nuxt3。 請參閱此問題關於 Nuxt2 支援。我們正在尋求協助以完成此模組。

安裝

安裝 nuxt-ssr-lit。

npx nuxi@latest module add ssr-lit

將以下程式碼新增至 nuxt.config.js 的模組區段。

import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  modules: [
    ["nuxt-ssr-lit", { litElementPrefix: ["acme-"] }]
    // ...
  ]
});

就這樣！現在所有以 acme- 為字首的 Lit 元素都將進行伺服器端渲染。專案中若有任何其他自訂元素，則會進行客戶端渲染。

👨‍💻 開發

執行 npm run dev:prepare 以產生類型定義。
使用 npm run dev 在開發模式下啟動 playground。

常見問題

`TypeError: customElements.get(...) is not a constructor`

當 Lit 元素未正確註冊時，就會發生此錯誤。這可能是因為元素未正確設定，或者可能是由於元素具有副作用。您也可能只在生產模式下看到此錯誤。

若要修正此問題，您的自訂元素函式庫可以在 nuxt.config.js 檔案中註冊。

export default defineNuxtConfig({
  ...
  nitro: {
    moduleSideEffects: ["my-custom-element-library"]
  }
});

運作方式？

Nuxt 專案中所有使用模組選項中提供的前綴的 Lit 元素，都會以名為 LitWrapper 的 Vue 元件包裝。

這種自動包裝是透過名為 AutoLitWrapper 的 Vite 外掛程式完成的，因此發生在建置時期。預設情況下，此外掛程式僅對 Vue 檔案進行操作，這有助於透過避免不必要的處理來最佳化效能。

因此，如果其中一個元件中使用了 Lit 元素。例如 <acme-button>Hello world</acme-button>，實際由 Nuxt/Vue 產生和使用的程式碼將會是 <LitWrapper><acme-button>Hello world</acme-button></LitWrapper>。

伺服器端的 LitWrapper 元件使用 @lit-labs/ssr 的 LitElementRenderer，以宣告式陰影 DOM 渲染包裝後的 Lit 元素。這使得 Lit 元件可以在瀏覽器上正確渲染，而無需載入和執行 JS，並在伺服器 HTML 解析後立即渲染。

客戶端上的 LitWrapper 元件不執行任何操作，並讓正常的客戶端注水發生。

注意事項

Lit 元件在 Node 端透過應用於 Node 的微型 DOM 墊片進行伺服器端渲染。並非所有 DOM API 都可用。例如，取得指定的插槽或子元素、發送自訂事件、在伺服器端呼叫的生命週期鉤子上新增事件監聽器將無法運作。在伺服器端執行的程式碼上避免此類客戶端活動將會很有幫助。

此外，請查看 @lit-labs/ssr 的函式庫狀態以取得更多資訊。