Nuxt.js는 Vue.js 기반의 웹 애플리케이션을 구축하기 위한 프레임워크이며, 페이지의 일부분을 반복해서 사용하거나 모든 페이지에 공통으로 사용되는 레이아웃을 구현하기 위한 기능을 제공합니다. 이 문서에서는 Nuxt.js에서 레이아웃을 사용하는 방법에 대해 알아보겠습니다.

1. 레이아웃 생성하기

Nuxt.js에서 레이아웃을 생성하려면 layouts 폴더를 생성하고 해당 폴더 내에서 각 레이아웃을 Vue 파일로 구현합니다. 각 Vue 파일은 특정 레이아웃을 정의하며, 다양한 페이지에서 재사용될 수 있습니다. 예를 들어, default.vue, admin.vue와 같이 필요에 따라 여러 레이아웃을 생성할 수 있습니다.

다음은 default 레이아웃의 예시입니다.

<template>
  <div>
    <header>
      <!-- 페이지 헤더 -->
      <Nuxt />
    </header>
    <main>
      <!-- 페이지 컨텐츠 -->
      <Nuxt />
    </main>
    <footer>
      <!-- 페이지 푸터 -->
    </footer>
  </div>
</template>

2. 페이지에 레이아웃 적용하기

레이아웃을 사용하려면 각 페이지에서 해당 레이아웃을 지정해야 합니다. 페이지 컴포넌트의 <script> 섹션에서 layout 속성을 사용하여 레이아웃을 지정할 수 있습니다.

예를 들어, index.vue 페이지에서 default 레이아웃을 사용하려면 다음과 같이 작성합니다.

<script>
export default {
  layout: 'default'
}
</script>

3. 레이아웃 옵션

또한, Nuxt.js에서는 레이아웃에 대한 다양한 옵션을 설정할 수 있습니다. 각 레이아웃 Vue 파일에서 <script> 섹션 내에 layout 속성을 정의하여 글로벌 레이아웃 설정을 덮어쓰거나 레이아웃별로 다른 설정을 지정할 수 있습니다.

<script>
export default {
  layout: 'default',
  middleware: 'auth'
}
</script>

위의 예시에서 middleware 속성은 해당 레이아웃에만 적용되는 미들웨어를 설정하는 옵션입니다.

이제 당신은 Nuxt.js에서 레이아웃을 만들고 페이지에 적용하는 방법을 알게 되었습니다. Nuxt.js의 레이아웃 기능을 활용하여 웹 애플리케이션의 공통 요소를 효율적으로 관리할 수 있습니다.

더 많은 정보를 원하시면 Nuxt.js 공식 문서를 참고하시기 바랍니다.