👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

建立與使用第一個元件

在 components 目錄下建立一個檔案 ./components/IronManWelcome.vue：

<template>
  <div class="py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-sky-400">2023 iThome</h1>
      <p class="mt-4 text-9xl font-bold text-gray-600">鐵人賽</p>
    </div>
  </div>
</template>

修改 app.vue 檔案：

<template>
  <div class="flex flex-col items-center">
    <IronManWelcome />
  </div>
</template>

建立多層級目錄下的元件

建立 ./base/apply 目錄，並建立一個檔案 ./base/apply/BaseApplyButton.vue：

<template>
  <button
    class="mt-6 bg-blue-600 px-8 py-3 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
  >
    立即報名
  </button>
</template>

修改 app.vue 檔案：

<template>
  <div class="flex flex-col items-center">
    <BaseApplyButton />
  </div>
</template>

使用 ClientOnly 元件

修改 app.vue 檔案：

<template>
  <div class="flex flex-col items-center">
    <ClientOnly>
      <BaseApplyButton />
    </ClientOnly>
  </div>
</template>

添加伺服器端渲染的內容在 fallback 插槽：

<template>
  <div class="flex flex-col items-center">
    <ClientOnly>
      <BaseApplyButton />
      <template #fallback>
        <p class="my-6 flex justify-center">[BaseApplyButton.vue] 元件載入中...</p>
      </template>
    </ClientOnly>
  </div>
</template>

建立延遲載入的元件

建立一個檔案 ./base/apply/BaseApplyRoundButton.vue：

<template>
  <button
    class="mt-6 rounded-full bg-blue-600 px-8 py-3 text-xl font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
  >
    立即報名
  </button>
</template>

修改 app.vue 檔案：

 <template>
   <div class="flex flex-col items-center">
     <ClientOnly>
       <BaseApplyButton />
       <template #fallback>
         <p class="my-6 flex justify-center">[BaseApplyButton.vue] 元件載入中...</p>
       </template>
     </ClientOnly>
 
     <div class="mt-8 flex items-center">
       <input id="show-button" v-model="show" type="checkbox" class="h-5 w-5" />
       <label for="show-button" class="ml-2 block text-base text-slate-800">顯示報名按鈕/label>
     </div>
     <LazyBaseApplyRoundButton v-if="show" />
   </div>
 </template>
 
 <script setup>
 const show = ref(false)
</script>

添加伺服器端或客戶端使用的元件

在 components 目錄下建立一個檔案 ./components/JustClient.vue：

<template>
  <div class="mx-16 my-4 rounded-lg bg-green-100 p-4 text-sm text-green-700">
    <span class="font-semibold">[JustClient.client.vue]</span>
    <span class="ml-2">這是只有在 <span class="font-bold">Client</span> 才會渲染的元件</span>
  </div>
</template>

在 components 目錄下建立一個檔案 ./components/ClientAndServer.server.vue：

<template>
  <div class="mx-16 my-4 rounded-lg bg-sky-100 p-4 text-sm text-sky-700">
    <span class="font-semibold">[ClientAndServer.server.vue]</span>
    <span class="ml-2">
      這是從 <span class="font-bold">Server</span> 渲染出來的元件，請等待 Client 接手渲染
    </span>
  </div>
</template>

在 components 目錄下建立一個檔案 ./components/ClientAndServer.client.vue：

<template>
  <div class="mx-16 my-4 rounded-lg bg-sky-100 p-4 text-sm text-sky-700">
    <span class="font-semibold">[ClientAndServer.client.vue]</span>
    <span class="ml-2">
      這是從 <span class="font-bold text-red-500">Client</span> 渲染出來的元件
    </span>
  </div>
</template>

修改 app.vue 檔案：

 <template>
   <div class="flex flex-col items-center">
     <JustClient />
     <ClientAndServer />

     <ClientOnly>
       <BaseApplyButton />
       <template #fallback>
         <p class="my-6 flex justify-center">[BaseApplyButton.vue] 元件載入中...</p>
       </template>
     </ClientOnly>
 
     <div class="mt-8 flex items-center">
       <input id="show-button" v-model="show" type="checkbox" class="h-5 w-5" />
       <label for="show-button" class="ml-2 block text-base text-slate-800">顯示報名按鈕/label>
     </div>
     <LazyBaseApplyRoundButton v-if="show" />
   </div>
 </template>
 
 <script setup>
 const show = ref(false)
</script>

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 建立元件

參考資料

• Nuxt Components Directory