Nuxt는 복잡한 Webpack/Vite 설정을 단 한 줄로 끝내주는 방대한 Module 생태계를 보유하고 있습니다. nuxt.config.ts의 modules 배열에 추가하기만 하면 TailwindCSS, Pinia, Nuxt UI 등이 즉시 프로젝트 전체에 세팅됩니다.
또한, 페이지를 이동할 때마다 권한을 검사하는 라우트 미들웨어(Route Middleware)를 제공합니다. middleware/ 폴더에 파일을 작성하면 로그인 여부에 따라 페이지 접근을 완벽히 차단하고 리다이렉트 시킬 수 있습니다.
<!-- ==========================================
// 📂 app/pages/mypage/index.vue (미들웨어 적용)
// ========================================== -->
<template>
<div class="p-8 bg-slate-900 min-h-screen">
<h1 class="text-xl font-bold text-amber-500">비밀 마이페이지 🤫</h1>
</div>
</template>
<script setup>
// 페이지 레벨에서 특정 미들웨어만 선택적으로 실행되도록 지정합니다.
// 이 페이지에 접근하는 순간 위에서 만든 'auth' 미들웨어가 먼저 검사합니다.
definePageMeta({
middleware: ['auth']
})
</script>
