レイアウト

ソース
Nuxt Kitは、レイアウトを扱うためのユーティリティセットを提供します。

レイアウトは、ページのラッパーとして使用されます。たとえば、ヘッダーとフッターなどの共通コンポーネントでページをラップするために使用できます。レイアウトは、addLayoutユーティリティを使用して登録できます。

addLayout

テンプレートをレイアウトとして登録し、レイアウトに追加します。

Nuxt 2では、errorレイアウトもこのユーティリティを使用して登録できます。Nuxt 3以降では、errorレイアウトはプロジェクトルートのerror.vueページに置き換えられました。

使用方法

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文字列falseテンプレートへのパス。srcが指定されていない場合は、代わりにgetContentsが指定されている必要があります。
filename文字列falseテンプレートのファイル名。filenameが指定されていない場合、srcパスから生成されます。この場合、srcオプションは必須です。
dst文字列false宛先ファイルへのパス。dstが指定されていない場合、filenameパスとNuxtのbuildDirオプションから生成されます。
optionsRecord<string, any>falseテンプレートに渡すオプション。
getContents(data) => string | Promise<string>falseoptionsオブジェクトを引数として呼び出される関数です。文字列、または文字列に解決されるPromiseを返す必要があります。srcが指定されている場合、この関数は無視されます。
writeブール値falsetrueに設定すると、テンプレートは宛先ファイルに書き込まれます。それ以外の場合、テンプレートは仮想ファイルシステムでのみ使用されます。

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

このレイアウトは、ページ内で使用できます。

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を渡すことで、この制限を回避できます。