Layouts
參考資料
透過在你的 app.vue 中加入 來啟用 Layouts。
app/app.vue
1
2
3
4
5
| <template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
|
新增一個 ~/layouts/default.vue
app/layouts/default.vue
在佈局檔案中，頁面的內容將會顯示在 元件中。
1
2
3
4
5
6
| <template>
<div>
<p>所有頁面共享一些預設佈局內容</p>
<slot />
</div>
</template>
|
具名佈局（Named Layout）
1
2
3
| -| layouts/
---| default.vue
---| custom.vue
|
你可以在頁面中使用 custom 佈局
pages/about.vue
1
2
3
4
5
6
7
8
9
10
11
| <script setup lang="ts">
declare module 'nuxt/app' {
interface NuxtLayouts {
'custom': unknown
}
}
// ---cut---
definePageMeta({
layout: 'custom',
})
</script>
|
你可以使用 的 name 屬性直接覆寫所有頁面的預設佈局。
app/app.vue
1
2
3
4
5
6
7
8
9
10
| <script setup lang="ts">
// 您可能會根據 API 呼叫或登入狀態來選擇此項目。
const layout = 'custom'
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
|