<NuxtLayout />コンポーネントを使用して、app.vueまたはerror.vueでdefaultレイアウトを有効にすることができます。

<template>
  <NuxtLayout>
    some page content
  </NuxtLayout>
</template>

Props

• name: レンダリングするレイアウト名を指定します。文字列、リアクティブな参照、または計算プロパティにすることができます。これはlayouts/ディレクトリ内の対応するレイアウトファイルの名前と一致している必要があります。
  • type: string
  • default: default

<script setup lang="ts">
// layouts/custom.vue
const layout = 'custom'
</script>

<template>
  <NuxtLayout :name="layout">
    <NuxtPage />
  </NuxtLayout>
</template>

<template>
  <NuxtLayout name="error-layout">
    <NuxtPage />
  </NuxtLayout>
</template>

• fallback: 無効なレイアウトがnameプロップに渡された場合、レイアウトはレンダリングされません。このシナリオでレンダリングされるfallbackレイアウトを指定します。これはlayouts/ディレクトリ内の対応するレイアウトファイルの名前と一致している必要があります。
  • type: string
  • default: null

Additional Props

NuxtLayoutは、レイアウトに渡す必要がある任意の追加プロップも受け入れます。これらのカスタムプロップは属性としてアクセス可能になります。

<template>
  <div>
    <NuxtLayout name="custom" title="I am a custom layout">
      <-- ... -->
    </NuxtLayout>
  </div>
</template>

上記の例では、titleの値はテンプレート内で$attrs.titleを使用するか、<script setup>内でuseAttrs().titleを使用してカスタム.vueで利用可能になります。

const layoutCustomProps = useAttrs()

console.log(layoutCustomProps.title) // I am a custom layout

Transitions

<NuxtLayout />は、Vueの<Transition />コンポーネントでラップされる<slot />を介してコンテンツをレンダリングし、レイアウトトランジションを有効にします。これが期待通りに機能するためには、<NuxtLayout />がページコンポーネントのルート要素でないことが推奨されます。

<template>
  <div>
    <NuxtLayout name="custom">
      <template #header> Some header template content. </template>
    </NuxtLayout>
  </div>
</template>

Layout's Ref

レイアウトコンポーネントのrefを取得するには、ref.value.layoutRefを通じてアクセスします。

<script setup lang="ts">
const layout = ref()

function logFoo () {
  layout.value.layoutRef.foo()
}
</script>

<template>
  <NuxtLayout ref="layout">
    default layout
  </NuxtLayout>
</template>