elearning/Frontend-Learner/app.vue

<script setup>
// ดึงฟังก์ชันจัดการ Authentication
const { fetchUserProfile, isAuthenticated } = useAuth()

// เมื่อ App เริ่มทำงาน (Mounted)
onMounted(() => {
  // 1. หากผู้ใช้ Login ค้างไว้ (มี Token) ให้ดึงข้อมูล Profile ล่าสุดทันที
  if (isAuthenticated.value) {
    fetchUserProfile()
  }

  // 2. ตรวจสอบและคืนค่า Theme (Dark/Light) จาก LocalStorage
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
})
</script>

<template>
  <!-- แสดง Loader ระหว่างเปลี่ยนหน้า หรือโหลดข้อมูล -->
  <GlobalLoader />
  
  <!-- NuxtLayout: แสดง Layout ที่กำหนดในแต่ละเพจ (default: layouts/default.vue) -->
  <NuxtLayout>
    <!-- NuxtPage: แสดงเนื้อหาของเพจปัจจุบัน (ตาม URL routng) -->
    <NuxtPage />
  </NuxtLayout>
</template>