레이아웃은 페이지 주위에 공통 컴포넌트를 감싸기 위한 래퍼로 사용됩니다. 예를 들어, 헤더와 푸터로 페이지를 감쌀 수 있습니다. 레이아웃은 addLayout 유틸리티를 사용하여 등록할 수 있습니다.

addLayout

템플릿을 레이아웃으로 등록하고 레이아웃에 추가합니다.

사용법

import { addLayout, createResolver, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    const { resolve } = createResolver(import.meta.url)

    addLayout({
      src: resolve('templates/custom-layout.ts'),
      filename: 'custom-layout.ts',
    }, 'custom')
  },
})

타입

function addLayout(layout: NuxtTemplate | string, name: string): void

매개변수

layout: 템플릿 객체 또는 템플릿 경로를 가진 문자열. 문자열이 제공되면, 문자열 값을 src로 설정한 템플릿 객체로 변환됩니다. 템플릿 객체가 제공되면, 다음 속성을 가져야 합니다:

name: 레이아웃을 등록할 이름 (예: default, custom 등).

예제

이 예제는 헤더와 푸터로 페이지를 감싸는 custom이라는 이름의 레이아웃을 등록합니다.

import { addLayout, defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup () {
    addLayout({
      write: true,
      filename: 'my-layout.vue',
      getContents: () => `<template>
  <div>
    <header>My Header</header>
    <slot />
    <footer>My Footer</footer>
  </div>
</template>`,
    }, 'custom')
  },
})

그런 다음 페이지에서 이 레이아웃을 사용할 수 있습니다:

<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>

<template>
  <div>About Page</div>
</template>