レイアウトは、ページをラップするために使用されます。例えば、ヘッダーやフッターなどの共通コンポーネントでページをラップするために使用できます。レイアウトは 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>