elearning/Frontend-Learner/app.vue

<script setup lang="ts">
/**
 * @file app.vue
 * @description Root application component.
 * Handles initialization of authentication and theme settings.
 */

// Initialize composables
const { fetchUserProfile, isAuthenticated } = useAuth()
const { isDark, set: setTheme } = useThemeMode()

// App initialization logic
onMounted(() => {
  // 1. Fetch user profile if tokens exist
  if (isAuthenticated.value) {
    fetchUserProfile()
  }

  // 2. Initialize theme from persistent storage or system preference
  const savedTheme = localStorage.getItem('theme')
  if (savedTheme) {
    setTheme(savedTheme === 'dark')
  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    setTheme(true)
  }
})
</script>

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