레이아웃

Nuxt Kit은 레이아웃 작업을 도와주는 유틸리티 모음을 제공합니다.

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

`addLayout`

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

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

사용법

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로 설정한 템플릿 객체로 변환됩니다. 템플릿 객체가 제공되면, 다음 속성을 가져야 합니다:

속성	타입	필수	설명
`src`	`string`	`false`	템플릿의 경로입니다. `src`가 제공되지 않으면, 대신 `getContents`가 제공되어야 합니다.
`filename`	`string`	`false`	템플릿의 파일명입니다. `filename`이 제공되지 않으면, `src` 경로에서 생성됩니다. 이 경우 `src` 옵션이 필요합니다.
`dst`	`string`	`false`	대상 파일의 경로입니다. `dst`가 제공되지 않으면, `filename` 경로와 nuxt `buildDir` 옵션에서 생성됩니다.
`options`	`Record<string, any>`	`false`	템플릿에 전달할 옵션입니다.
`getContents`	`(data) => string \| Promise<string>`	`false`	`options` 객체와 함께 호출되는 함수입니다. 문자열 또는 문자열로 resolve되는 promise를 반환해야 합니다. `src`가 제공되면 이 함수는 무시됩니다.
`write`	`boolean`	`false`	`true`로 설정하면 템플릿이 대상 파일에 작성됩니다. 그렇지 않으면 템플릿은 가상 파일 시스템에서만 사용됩니다.

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

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

pages/about.vue

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

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

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