layouts
Nuxtは、共通のUIパターンを再利用可能なレイアウトに抽出するためのレイアウトフレームワークを提供します。
最高のパフォーマンスを得るために、このディレクトリに配置されたコンポーネントは、使用時に非同期インポートを介して自動的にロードされます。
レイアウトの有効化
<NuxtLayout> を app.vue に追加することで、レイアウトが有効になります。
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
レイアウトを使用するには
- definePageMeta を使用して、ページの
layoutプロパティを設定します。 <NuxtLayout>のnameプロパティを設定します。
レイアウト名はケバブケースに正規化されるため、
someLayout は some-layout になります。レイアウトが指定されていない場合は、
layouts/default.vue が使用されます。アプリケーションに単一のレイアウトしかない場合は、代わりに
app.vue を使用することをお勧めします。他のコンポーネントとは異なり、レイアウトは、Nuxtがレイアウト変更間のトランジションを適用できるように、単一のルート要素を持つ必要があります。また、このルート要素は
<slot /> にすることはできません。デフォルトレイアウト
~/layouts/default.vue を追加します
layouts/default.vue
<template>
<div>
<p>Some default layout content shared across all pages</p>
<slot />
</div>
</template>
レイアウトファイルでは、ページのコンテンツは <slot /> コンポーネントに表示されます。
名前付きレイアウト
ディレクトリ構成
-| layouts/
---| default.vue
---| custom.vue
その後、ページで custom レイアウトを使用できます
pages/about.vue
<script setup lang="ts">
definePageMeta({
layout: 'custom'
})
</script>
<NuxtLayout> の name プロパティを使用して、すべてのページのデフォルトレイアウトを直接オーバーライドできます。
app.vue
<script setup lang="ts">
// You might choose this based on an API call or logged-in status
const layout = "custom";
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
レイアウトがネストされたディレクトリにある場合、レイアウトの名前は、独自のパスディレクトリとファイル名に基づいて、重複するセグメントが削除されたものになります。
| ファイル | レイアウト名 |
|---|---|
~/layouts/desktop/default.vue | desktop-default |
~/layouts/desktop-base/base.vue | desktop-base |
~/layouts/desktop/index.vue | desktop |
わかりやすくするために、レイアウトのファイル名がその名前に一致することをお勧めします。
| ファイル | レイアウト名 |
|---|---|
~/layouts/desktop/DesktopDefault.vue | desktop-default |
~/layouts/desktop-base/DesktopBase.vue | desktop-base |
~/layouts/desktop/Desktop.vue | desktop |
ドキュメント > 例 > 機能 > レイアウト でライブ例を読み込み、編集してください。
レイアウトの動的な変更
setPageLayout ヘルパーを使用して、レイアウトを動的に変更することもできます。
<script setup lang="ts">
function enableCustomLayout () {
setPageLayout('custom')
}
definePageMeta({
layout: false,
});
</script>
<template>
<div>
<button @click="enableCustomLayout">Update layout</button>
</div>
</template>
ドキュメント > 例 > 機能 > レイアウト でライブ例を読み込み、編集してください。
ページごとのレイアウトのオーバーライド
ページを使用している場合は、layout: false を設定し、ページ内で <NuxtLayout> コンポーネントを使用することで、完全に制御できます。
<script setup lang="ts">
definePageMeta({
layout: false,
})
</script>
<template>
<div>
<NuxtLayout name="custom">
<template #header> Some header template content. </template>
The rest of the page
</NuxtLayout>
</div>
</template>
ページ内で
<NuxtLayout> を使用する場合は、それがルート要素でないことを確認してください（または、レイアウト/ページトランジションを無効にする）。