Nuxt의 λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈ

λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈλž€ νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ„ μž‘μ•„μ£ΌλŠ” 역할을 ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈλ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€.

λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈ μ†Œκ°œ

nuxt ν”„λ‘œμ νŠΈλ₯Ό μƒμ„±ν•˜κ³  λ‚˜μ„œ μ•„λž˜μ™€ 같이 νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈλ₯Ό μΆ”κ°€ν•˜κ³  λ‚˜λ©΄ layouts/default.vue μ»΄ν¬λ„ŒνŠΈκ°€ νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ„ ꡬ성해 μ€λ‹ˆλ‹€.

page-folder

URL에 /loginκ³Ό /main을 각각 μ ‘κ·Όν•˜λ©΄ login.vue μ»΄ν¬λ„ŒνŠΈμ™€ main.vue μ»΄ν¬λ„ŒνŠΈμ— μ •μ˜λœ λ‚΄μš©μ΄ 화면에 ν‘œμ‹œλ  κ²ƒμž…λ‹ˆλ‹€. 이 λ•Œ μ½”λ“œκ°€ μ•„λž˜μ™€ κ°™λ‹€κ³  κ°€μ •ν•˜κ² μŠ΅λ‹ˆλ‹€.

<!-- login.vue -->
<template>
  <div>
    <h1>login νŽ˜μ΄μ§€</h1>
    <form></form>
  </div>
</template>
<!-- main.vue -->
<template>
  <div>
    <h1>main νŽ˜μ΄μ§€</h1>
    <main></main>
  </div>
</template>

이제 각 URL둜 μ ‘κ·Όν•˜λ©΄ 기본적으둜 화면에 ν‘œμ‹œλ˜λŠ” μ»΄ν¬λ„ŒνŠΈλŠ” layouts/default.vue μ»΄ν¬λ„ŒνŠΈμž…λ‹ˆλ‹€.




Β 



<!-- default.vue -->
<template>
  <div>
    <Nuxt />
  </div>
</template>

μœ„ μ»΄ν¬λ„ŒνŠΈμ˜ <Nuxt/>κ°€ λ°”λ‘œ νŠΉμ • URL에 ν•΄λ‹Ήν•˜λŠ” νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈλ₯Ό λΏŒλ¦¬λŠ” μ˜μ—­μž…λ‹ˆλ‹€. /loginκ³Ό /main은 각각 μ•„λž˜μ™€ 같이 ν‘œμ‹œλ  κ²ƒμž…λ‹ˆλ‹€.




Β 



<!-- '/login'에 μ ‘κ·Όν•˜λŠ” 경우 -->
<template>
  <div>
    <!-- 둜그인 μ»΄ν¬λ„ŒνŠΈ λ‚΄μš© -->
  </div>
</template>



Β 



<!-- '/main'에 μ ‘κ·Όν•˜λŠ” 경우 -->
<template>
  <div>
    <!-- 메인 μ»΄ν¬λ„ŒνŠΈ λ‚΄μš© -->
  </div>
</template>

이 λ•Œ νŽ˜μ΄μ§€λ§ˆλ‹€ λ°˜λ³΅λ˜λŠ” UI μ˜μ—­μΈ 헀더λ₯Ό λ ˆμ΄μ•„μ›ƒ μ»΄ν¬λ„ŒνŠΈμ— μ•„λž˜μ™€ 같이 μ •μ˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.




Β 




<!-- default.vue -->
<template>
  <div>
    <h1>{{ $route.name }} νŽ˜μ΄μ§€</h1>
    <Nuxt />
  </div>
</template>

이제 각 νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈ(page 폴더에 μžˆλŠ” μ»΄ν¬λ„ŒνŠΈ)μ—λŠ” 헀더 λ‚΄μš©μ„ μž‘μ„±ν•˜μ§€ μ•Šκ³  λ°”λ‘œ ν•΄λ‹Ή νŽ˜μ΄μ§€μ˜ UI μš”μ†Œμ— 집쀑할 수 μžˆμŠ΅λ‹ˆλ‹€.



Β 


<!-- login.vue -->
<template>
  <form></form>
</template>


Β 


<!-- main.vue -->
<template>
  <main></main>
</template>

μ»€μŠ€ν…€ λ ˆμ΄μ•„μ›ƒ

μ•žμ—μ„œ 닀룬 κΈ°λ³Έ λ ˆμ΄μ•„μ›ƒ default.vue 이외에도 λ‹€λ₯Έ λ ˆμ΄μ•„μ›ƒμ„ μ •μ˜ν•˜κ³  μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ¨Όμ € λ ˆμ΄μ•„μ›ƒ 폴더에 μƒˆλ‘œμš΄ λ·° νŒŒμΌμ„ ν•˜λ‚˜ μƒμ„±ν•©λ‹ˆλ‹€.

<!-- layouts/blog.vue -->
<template>
  <div>
    <nav>λ„€λΉ„κ²Œμ΄μ…˜ μ˜μ—­</nav>
    <Nuxt />
  </div>
</template>

이제 μœ„ λ ˆμ΄μ•„μ›ƒμ„ μ‚¬μš©ν•  νŽ˜μ΄μ§€ μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ•„λž˜μ™€ 같은 속성을 μΆ”κ°€ν•©λ‹ˆλ‹€.

// pages/main.vue
export default {
  layout: 'blog'
}