Nuxt Modules 생태계와 라우트 미들웨어(Middleware)

Nuxt는 복잡한 Webpack/Vite 설정을 단 한 줄로 끝내주는 방대한 Module 생태계를 보유하고 있습니다. nuxt.config.ts의 modules 배열에 추가하기만 하면 TailwindCSS, Pinia, Nuxt UI 등이 즉시 프로젝트 전체에 세팅됩니다.

또한, 페이지를 이동할 때마다 권한을 검사하는 라우트 미들웨어(Route Middleware)를 제공합니다. middleware/ 폴더에 파일을 작성하면 로그인 여부에 따라 페이지 접근을 완벽히 차단하고 리다이렉트 시킬 수 있습니다.

<!-- ==========================================
// 📂 nuxt.config.ts (모듈 등록)
// ========================================== -->
<script>
export default defineNuxtConfig({
  // 방대한 플러그인 생태계를 단 한 줄로 연결합니다.
  modules: [
    '@nuxtjs/tailwindcss', // 꼬리바람 CSS 자동 설정
    '@pinia/nuxt',         // 전역 상태 관리 (Store)
    '@nuxt/image',         // 이미지 최적화
  ]
})
</script>

<!-- ==========================================
// 📂 middleware/auth.ts (인증 미들웨어)
// ========================================== -->
<script>
export default defineNuxtRouteMiddleware((to, from) => {
  // 예시: 전역 상태나 쿠키에서 인증 토큰을 확인합니다.
  const token = useCookie('auth_token')

  // 사용자가 이동하려는 페이지(to)가 마이페이지인데 토큰이 없다면?
  if (to.path.startsWith('/mypage') && !token.value) {
    // '/login' 페이지로 강제 이동(리다이렉트) 시킵니다.
    return navigateTo('/login')
  }
})
</script>

<!-- ==========================================
// 📂 app/pages/mypage/index.vue (미들웨어 적용)
// ========================================== -->
<script>
<template>
  <div class="p-8">
    <h1 class="text-xl font-bold">비밀 마이페이지 🤫</h1>
  </div>
</template>

<script setup>
// 페이지 레벨에서 특정 미들웨어만 선택적으로 실행되도록 지정합니다.
// 이 페이지에 접근하는 순간 위에서 만든 'auth' 미들웨어가 먼저 검사합니다.
definePageMeta({
  middleware: ['auth']
})
</script>
</script>