Nuxt框架中內建元件詳解及使用指南（一）

Amd794發表於2024-07-06
UX框架元件

title: Nuxt框架中內建元件詳解及使用指南（一）
date: 2024/7/6
updated: 2024/7/6
author: cmdragon

excerpt:
本文詳細介紹了Nuxt框架中的兩個內建元件和的使用方法與功能。確保包裹的內容僅在客戶端渲染，適用於處理瀏覽器特定功能或非同步資料載入。而是一個實驗性元件，用於在SSR過程中遇到子元件錯誤時，在客戶端渲染備選內容，提高應用穩定性。文章透過示例程式碼展示了這兩個元件的具體應用方式和相關屬性配置。

categories:

  • 前端開發

tags:

  • Nuxt
  • SSR
  • 客戶端渲染
  • 元件
  • 非同步載入
  • 錯誤處理
  • 前端開發

image
image

掃描二維碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長

Nuxt 3 中 <ClientOnly> 元件的使用指南與示例

在 Nuxt 3 中，<ClientOnly> 元件是一個非常有用的工具，它允許開發者確保某些元件或內容只在客戶端渲染。這在處理需要客戶端特定環境的功能時特別有用，比如與瀏覽器直接互動的功能或者需要非同步載入的資料。

1. <ClientOnly> 元件簡介

<ClientOnly> 元件的主要作用是確保其包裹的內容只在客戶端渲染，而不是在伺服器端渲染（SSR）。這對於避免在伺服器端執行不必要或無法執行的操作非常有用。

2. 如何使用 <ClientOnly>

2.1 安裝和設定

確保你的專案已經安裝了 Nuxt 3。如果沒有，可以按照 Nuxt 官方文件進行安裝。

2.2 在模板中使用 <ClientOnly>

以下是如何在 Nuxt 頁面或元件中使用 <ClientOnly> 的基本步驟：

<template>
  <div>
    <Sidebar />
    <ClientOnly fallback-tag="span" fallback="載入評論中...">
      <Comment />
    </ClientOnly>
  </div>
</template>

在上面的程式碼中，<Comment> 元件將只在客戶端渲染。如果伺服器端嘗試渲染這個元件，將顯示 fallback 屬性指定的內容，即 "載入評論中..."，並且使用 fallback-tag 指定的標籤（這裡是 <span>）。

3. 使用 <ClientOnly> 的 Props 和 Slots

<ClientOnly> 元件支援一些 Props 和 Slots，以提供更多的靈活性。

3.1 Props

  • placeholderTag: 指定在伺服器端渲染的標籤，預設為 div。
  • fallbackTag: 指定在伺服器端渲染的標籤，預設為 div。
  • placeholder: 指定在伺服器端渲染的內容，預設為空字串。
  • fallback: 指定在伺服器端渲染的內容，預設為空字串。

3.2 Slots

  • #fallback: 指定在伺服器端顯示的內容。

4. Demo 示例

下面是一個完整的示例，展示如何在 Nuxt 頁面中使用 <ClientOnly> 元件：

4.1 建立 Sidebar 元件

首先，建立一個簡單的 Sidebar 元件：

<!-- components/Sidebar.vue -->
<template>
  <div class="sidebar">
    <h2>側邊欄</h2>
    <p>這是側邊欄內容。</p>
  </div>
</template>

<style scoped>
.sidebar {
  background-color: #f4f4f4;
  padding: 20px;
}
</style>

4.2 建立 Comment 元件

接著，建立一個 Comment 元件：

<!-- components/Comment.vue -->
<template>
  <div class="comment">
    <h3>評論</h3>
    <p>這是評論內容。</p>
  </div>
</template>

<style scoped>
.comment {
  background-color: #fff;
  padding: 20px;
}
</style>

4.3 在頁面中使用 <ClientOnly>

最後，在頁面中使用 <ClientOnly> 元件：

<!-- pages/index.vue -->
<template>
  <div>
    <Sidebar />
    <ClientOnly fallback-tag="span" fallback="載入評論中...">
      <Comment />
    </ClientOnly>
  </div>
</template>

<script>
import Sidebar from '~/components/Sidebar.vue';
import Comment from '~/components/Comment.vue';

export default {
  components: {
    Sidebar,
    Comment
  }
};
</script>

<style>
/* 頁面樣式 */
</style>

在這個示例中，<Sidebar> 元件將在伺服器端和客戶端都渲染，而 <Comment> 元件將只在客戶端渲染。如果伺服器端嘗試渲染 <Comment> 元件，將顯示 "載入評論中..." 文字。

Nuxt 中 <NuxtClientFallback> 元件的使用指南與示例

在 Nuxt 中，<NuxtClientFallback> 是一個實驗性元件，它允許開發者在伺服器端渲染（SSR）過程中，如果遇到子元件觸發錯誤時，在客戶端渲染指定的後備內容。這個功能對於那些在伺服器端無法正常工作但在客戶端可以正常執行的元件非常有用。

1. <NuxtClientFallback> 元件簡介

<NuxtClientFallback> 元件用於處理在 SSR 過程中出現的錯誤，它允許你指定一個後備內容，在遇到錯誤時在客戶端顯示。

2. 如何使用 <NuxtClientFallback>

2.1 啟用實驗性功能

要使用 <NuxtClientFallback> 元件，你需要在 nuxt.config 檔案中啟用 clientFallback 選項：

// nuxt.config.js
export default {
  experimental: {
    clientFallback: true
  }
};

2.2 在模板中使用 <NuxtClientFallback>

以下是如何在 Nuxt 頁面或元件中使用 <NuxtClientFallback> 的基本步驟：

<template>
  <NuxtClientFallback @ssr-error="logSomeError">
    <!-- 這裡放置可能觸發SSR錯誤的元件 -->
    <BrokeInSsr />
  </NuxtClientFallback>
</template>

<script>
export default {
  methods: {
    logSomeError(error) {
      console.error('SSR錯誤:', error);
    }
  }
};
</script>

在上面的程式碼中，如果 <BrokeInSsr> 元件在 SSR 過程中觸發錯誤，@ssr-error 事件將被觸發，並且 logSomeError 方法將被呼叫。

3. <NuxtClientFallback> 的屬性和事件

<NuxtClientFallback> 支援以下屬性和事件：

  • placeholderTag | fallbackTag: 指定一個後備標籤，在插槽無法渲染時將其渲染。型別為 string，預設值為 div。
  • placeholder | fallback: 指定後備內容，在插槽無法渲染時將其渲染。型別為 string。
  • keepFallback: 如果後備內容在伺服器端無法渲染，是否保留後備內容。型別為 boolean，預設值為 false。
  • @ssr-error: 當子元件在 SSR 中觸發錯誤時，觸發的事件。請注意，這隻會在伺服器端觸發。

4. Demo 示例

餘下文章內容請點選跳轉至 個人部落格頁面 或者 掃碼關注或者微信搜一搜：程式設計智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt框架中內建元件詳解及使用指南（一） | cmdragon's Blog

往期文章歸檔：

  • Nuxt3 的生命週期和鉤子函式（十一） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（十） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（九） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（八） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（七） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（六） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（五） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（四） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（三） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（二） | cmdragon's Blog
  • Nuxt3 的生命週期和鉤子函式（一） | cmdragon’s Blog
  • 初學者必讀：如何使用 Nuxt 中介軟體簡化網站開發 | cmdragon's Blog
  • 深入探索 Nuxt3 Composables：掌握目錄架構與內建API的高效應用 | cmdragon's Blog

相關文章