Component	คำอธิบาย	ใช้ทำอะไร
<ClientOnly>	แสดงส่วนประกอบเฉพาะในเว็บเบราว์เซอร์เท่านั้น ไม่แสดงฝั่งเซิร์ฟเวอร์	ใช้สำหรับส่วนประกอบที่ทำงานได้เฉพาะในเว็บเบราว์เซอร์ เช่น ส่วนที่ต้องการเข้าถึง Window API
<NuxtClientFallback>	แสดงเนื้อหาสำรองระหว่างที่รอส่วนประกอบในเว็บเบราว์เซอร์โหลดเสร็จ	ใช้แสดงข้อความหรือภาพโหลดระหว่างรอส่วนประกอบที่ซับซ้อนทำงานเสร็จ
<NuxtPage>	ส่วนประกอบหลักสำหรับแสดงเนื้อหาของหน้าเว็บตามเส้นทาง URL ปัจจุบัน	ใช้กำหนดตำแหน่งที่จะแสดงเนื้อหาของแต่ละหน้าในเว็บไซต์
<NuxtLayout>	ส่วนประกอบสำหรับกำหนดโครงสร้างหน้าเว็บ เช่น ส่วนหัว ส่วนท้าย เมนู	ใช้สร้างโครงสร้างพื้นฐานที่ใช้ร่วมกันระหว่างหน้าต่างๆ
<NuxtLink>	ส่วนประกอบสำหรับสร้างลิงก์ระหว่างหน้าโดยไม่ต้องโหลดหน้าใหม่ทั้งหมด	ใช้สร้างการนำทางระหว่างหน้าที่รวดเร็วและมีประสิทธิภาพ
<NuxtLoadingIndicator>	แสดงแถบแสดงสถานะการโหลดเมื่อเปลี่ยนหน้า	ใช้แสดงความคืบหน้าให้ผู้ใช้ทราบว่ากำลังโหลดหน้าใหม่
<NuxtErrorBoundary>	ส่วนประกอบสำหรับจัดการข้อผิดพลาดที่เกิดขึ้นในส่วนประกอบลูก	ใช้แสดงข้อความแจ้งเตือนหรือเนื้อหาสำรองเมื่อเกิดข้อผิดพลาด
<NuxtWelcome>	ส่วนประกอบสำหรับแสดงหน้าต้อนรับเริ่มต้นในโครงการ Nuxt ใหม่	ใช้เป็นหน้าเริ่มต้นสำหรับโครงการใหม่เพื่อแสดงคำแนะนำและข้อมูลเบื้องต้น
<NuxtIsland>	ส่วนประกอบสำหรับแสดงเนื้อหาที่ประมวลผลในเซิร์ฟเวอร์แบบแยกส่วน	ใช้แสดงเนื้อหาที่ต้องการประมวลผลในเซิร์ฟเวอร์โดยไม่กระทบส่วนอื่น
<NuxtPicture>	ส่วนประกอบสำหรับแสดงรูปภาพที่มีการปรับขนาดและคุณภาพโดยอัตโนมัติ	ใช้แสดงรูปภาพที่มีประสิทธิภาพและเหมาะสมกับอุปกรณ์ที่ใช้งาน
<Teleport>	ส่วนประกอบสำหรับย้ายเนื้อหาไปแสดงในตำแหน่งอื่นของโครงสร้างหน้าเว็บ	ใช้ย้ายเนื้อหาไปแสดงในตำแหน่งที่ต้องการ เช่น หน้าต่างแจ้งเตือน
<NuxtRouteAnnouncer>	ส่วนประกอบสำหรับอ่านชื่อหน้าเว็บให้กับโปรแกรมอ่านหน้าจอ	ใช้เพิ่มความสามารถในการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น

<ClientOnly>

แสดงเนื้อหาเฉพาะฝั่ง Client (Browser) เท่านั้น ใช้เมื่อต้องการใช้ JavaScript API ที่มีเฉพาะในเบราว์เซอร์

<template>
  <div>
    <!-- ส่วนนี้จะแสดงทั้งฝั่ง Server และ Client -->
    <h1>My App</h1>

    <ClientOnly>
      <!-- ส่วนนี้จะแสดงเฉพาะฝั่ง Client เท่านั้น -->
      <div>{{ browserOnlyValue }}</div>

      <!-- แสดงข้อความนี้ระหว่างที่รอ Hydration -->
      <template #fallback>
        <p>Loading...</p>
      </template>
    </ClientOnly>
  </div>
</template>

<script setup>
const browserOnlyValue = ref(null);

onMounted(() => {
  // ใช้ API ที่มีเฉพาะในเบราว์เซอร์
  browserOnlyValue.value = window.localStorage.getItem("user");
});
</script>

<NuxtClientFallback>

ใช้แสดงเนื้อหาสำรองเมื่อส่วนประกอบไม่สามารถทำงานฝั่ง Server ได้ จะทำงานฝั่ง Client แทน

<template>
  <NuxtClientFallback fallback-tag="div" class="loading-state">
    <!-- ส่วนประกอบที่อาจมีปัญหาเมื่อทำงานฝั่ง Server -->
    <ComplexComponent />

    <!-- แสดงตอนรอ Hydration ฝั่ง Client -->
    <template #fallback>
      <div>Loading complex component...</div>
    </template>
  </NuxtClientFallback>
</template>

<NuxtPage>

แสดงหน้าปัจจุบันตาม Route โดยอัตโนมัติ มักใช้ใน app.vue เป็นหลัก

<template>
  <div>
    <header>
      <!-- ส่วนหัวของเว็บไซต์ -->
      <nav>
        <NuxtLink to="/">Home</NuxtLink>
        <NuxtLink to="/about">About</NuxtLink>
      </nav>
    </header>

    <!-- แสดงเนื้อหาของหน้าปัจจุบัน -->
    <NuxtPage />

    <footer>
      <!-- ส่วนท้ายของเว็บไซต์ -->
      <p>&copy; 2023 My Website</p>
    </footer>
  </div>
</template>

<NuxtLayout>

กำหนดโครงสร้างหน้าเว็บให้กับเนื้อหา ช่วยให้สามารถใช้ Layout ร่วมกันระหว่างหน้าต่างๆ

<template>
  <!-- ใช้ Layout ชื่อ 'default' -->
  <NuxtLayout>
    <template #default>
      <h1>Home Page</h1>
      <p>Main content</p>
    </template>
  </NuxtLayout>

  <!-- ใช้ Layout ชื่อ 'custom' -->
  <NuxtLayout name="custom">
    <template #default>
      <h1>Special Page</h1>
      <p>Special content</p>
    </template>
  </NuxtLayout>
</template>

<NuxtLink>

ใช้นำทางระหว่างหน้าต่างๆ ในแอปพลิเคชัน โดยไม่ต้องโหลดหน้าใหม่ทั้งหมด (Client-side navigation)

<template>
  <div>
    <!-- ลิงก์พื้นฐาน -->
    <NuxtLink to="/about">About Us</NuxtLink>

    <!-- ลิงก์พร้อมคุณสมบัติเพิ่มเติม -->
    <NuxtLink to="/products" active-class="active" no-prefetch>
      Our Products
    </NuxtLink>

    <!-- ลิงก์ไปยัง URL ภายนอก -->
    <NuxtLink to="https://nuxtjs.org" target="_blank" external>
      Nuxt Website
    </NuxtLink>
  </div>
</template>

<NuxtLoadingIndicator>

แสดงแถบแสดงสถานะการโหลดเมื่อมีการเปลี่ยนหน้า

<template>
  <div>
    <!-- แสดงแถบโหลดด้านบนของหน้าเว็บเมื่อเปลี่ยนหน้า -->
    <NuxtLoadingIndicator
      color="#00DC82"
      height="3"
      duration="2000"
      throttle="200"
    />

    <header>
      <!-- เนื้อหาส่วนหัว -->
    </header>

    <NuxtPage />
  </div>
</template>

<NuxtErrorBoundary>

จัดการข้อผิดพลาดที่เกิดขึ้นในส่วนประกอบลูก โดยไม่ทำให้ทั้งหน้าแอปพัง

<template>
  <div>
    <h1>Home Page</h1>

    <NuxtErrorBoundary @error="handleError">
      <!-- ส่วนประกอบที่อาจเกิดข้อผิดพลาด -->
      <RiskyComponent />

      <!-- แสดงเมื่อเกิดข้อผิดพลาด -->
      <template #error="{ error, clearError }">
        <div class="error-container">
          <p>Error: {{ error.message }}</p>
          <button @click="clearError">Try Again</button>
        </div>
      </template>
    </NuxtErrorBoundary>
  </div>
</template>

<script setup>
function handleError(error) {
  // บันทึกข้อผิดพลาดหรือทำการจัดการเพิ่มเติม
  console.error("Error occurred:", error);
}
</script>

<NuxtWelcome>

แสดงหน้าต้อนรับเริ่มต้นสำหรับโครงการ Nuxt ใหม่

<template>
  <div>
    <!-- แสดงหน้าต้อนรับ Nuxt เริ่มต้น -->
    <NuxtWelcome />

    <!-- หรือกำหนดชื่อโครงการ -->
    <NuxtWelcome name="My Awesome Project" />
  </div>
</template>

<NuxtIsland>

แสดงส่วนประกอบที่ประมวลผลฝั่ง Server แยกต่างหากจากส่วนอื่น (Server Components)

<template>
  <div>
    <h1>Home Page</h1>

    <!-- แสดงส่วนประกอบที่ประมวลผลฝั่ง Server -->
    <NuxtIsland name="ServerComponent">
      <!-- ส่งค่า props ให้ Server Component -->
      <template #default="{ data }">
        <!-- แสดงข้อมูลจาก Server Component -->
        <div>{{ data.message }}</div>
      </template>

      <!-- แสดงระหว่างรอข้อมูล -->
      <template #fallback>
        <div>Loading data...</div>
      </template>
    </NuxtIsland>
  </div>
</template>

<NuxtPicture>

แสดงรูปภาพที่มีการปรับขนาดและคุณภาพโดยอัตโนมัติ รองรับ Responsive Images

<template>
  <div>
    <!-- รูปภาพพื้นฐาน -->
    <NuxtPicture src="/images/hero.jpg" alt="Hero image" />

    <!-- รูปภาพพร้อมปรับขนาด -->
    <NuxtPicture
      src="/images/product.jpg"
      alt="Product"
      width="800"
      height="600"
      sizes="(max-width: 768px) 100vw, 50vw"
      format="webp"
      loading="lazy"
      placeholder
    />
  </div>
</template>

<Teleport>

ย้ายเนื้อหาไปแสดงในตำแหน่งอื่นของ DOM โดยไม่กระทบโครงสร้าง Component

<template>
  <div>
    <h1>Home Page</h1>
    <button @click="showModal = true">Open Modal</button>

    <!-- ย้ายเนื้อหาไปแสดงที่ body -->
    <Teleport to="body">
      <!-- หน้าต่างแจ้งเตือนจะถูกย้ายไปอยู่นอกส่วนประกอบนี้ -->
      <div v-if="showModal" class="modal">
        <div class="modal-content">
          <h2>Notification</h2>
          <p>This is a modal notification message</p>
          <button @click="showModal = false">Close</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
const showModal = ref(false);
</script>

<NuxtRouteAnnouncer>

อ่านชื่อหน้าเว็บให้กับโปรแกรมอ่านหน้าจอ ช่วยเพิ่มความสามารถในการเข้าถึงสำหรับผู้ใช้ที่มีความบกพร่องทางการมองเห็น

<template>
  <div>
    <!-- ส่วนประกอบนี้ถูกใช้งานโดยอัตโนมัติใน Nuxt -->
    <NuxtRouteAnnouncer
      aria-live="assertive"
      politeness="assertive"
      :route-label-fn="customRouteLabel"
    />

    <NuxtPage />
  </div>
</template>

<script setup>
// ฟังก์ชันกำหนดข้อความที่จะอ่าน
function customRouteLabel(route) {
  return `Navigating to page ${route.meta.title || route.name || route.path}`;
}
</script>