<NuxtLayout>

app.vue または error.vue で default レイアウトをアクティブにするには、<NuxtLayout /> コンポーネントを使用できます。

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

プロップス

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

追加のプロパティ

NuxtLayout は、レイアウトに渡す必要のある追加のプロパティも受け入れます。これらのカスタムプロパティは、属性としてアクセスできるようになります。

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

上記の例では、title の値は、テンプレートでは $attrs.title を使用して、custom.vue の <script setup> では useAttrs().title を使用してアクセスできます。

<script setup lang="ts">
const layoutCustomProps = useAttrs()

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

トランジション

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

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

<template>
  <div>
    <!-- named slot -->
    <slot name="header" />
    <slot />
  </div>
</template>

レイアウトの 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>

<script setup lang="ts">
const foo = () => console.log('foo')
defineExpose({
  foo,
})
</script>

<template>
  <div>
    default layout
    <slot />
  </div>
</template>