레이아웃

Source
Nuxt Kit은 레이아웃을 다루는 데 도움이 되는 유틸리티 모음을 제공합니다.

레이아웃은 페이지를 감싸는 래퍼로 사용됩니다. 예를 들어 헤더와 푸터 같은 공통 컴포넌트로 페이지를 감싸는 데 사용할 수 있습니다. 레이아웃은 addLayout 유틸리티를 사용해 등록할 수 있습니다.

addLayout

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

Nuxt 2에서는 error 레이아웃도 이 유틸리티를 사용해 등록할 수 있습니다. Nuxt 3+에서는 프로젝트 루트의 error.vue 페이지로 error 레이아웃이 대체되었습니다.

Usage

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')
  },
})

Type

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

Parameters

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

PropertyTypeRequiredDescription
srcstringfalse템플릿의 경로입니다. src가 제공되지 않으면, 대신 getContents가 제공되어야 합니다.
filenamestringfalse템플릿의 파일 이름입니다. filename이 제공되지 않으면 src 경로에서 생성됩니다. 이 경우 src 옵션은 필수입니다.
dststringfalse결과 파일의 경로입니다. dst가 제공되지 않으면 filename 경로와 nuxt buildDir 옵션을 기반으로 생성됩니다.
optionsRecord<string, any>false템플릿에 전달할 옵션입니다.
getContents(data) => string | Promise<string>falseoptions 객체와 함께 호출되는 함수입니다. 문자열 또는 문자열로 resolve되는 프로미스를 반환해야 합니다. src가 제공되면 이 함수는 무시됩니다.
writebooleanfalsetrue로 설정하면 템플릿이 결과 파일에 기록됩니다. 그렇지 않으면 템플릿은 가상 파일 시스템에서만 사용됩니다.

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

Example

이는 페이지를 헤더와 푸터로 감싸는 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')
  },
})

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

app/pages/about.vue
<script setup lang="ts">
definePageMeta({
  layout: 'custom',
})
</script>

<template>
  <div>About Page</div>
</template>
@vitejs/plugin-vue가 가상 .vue 파일을 지원하지 않기 때문에, addLayout의 첫 번째 인수에 write: true를 전달하여 이 제한을 우회할 수 있습니다.