目錄

• 目錄
  • layout是甚麼
  • 使用方式
    • 預設layout
    • 自訂layout
    • 進階使用
  • 參考資料

layout是甚麼

Nuxt的layout，顧名思義就是用於處理每個頁面都會出現的組件，這可以讓你不必每頁都重複引入組件

使用方法是創建layouts資料夾，然後在裡面放入vue檔作為layout

使用方式

預設layout

除非有特別設定，不然default.vue會是所有頁面的預設的layout

製作layout時，不用在script內引入組件

<!-- layouts/default.vue -->
<template>
  <div>
    <Header></Header>
      <!-- 記得一訂要放Nuxt，如果沒有的話，內容組件不會被放進來 -->
      <Nuxt></Nuxt>
    <Footer></Footer>
  </div>
</template>

自訂layout

只要在layout資料夾內(第1層)放入vue檔，就可以生成另一個layout

使用時只要在需要該layout的頁面中設定layout屬性即可

<script>
export default {
  layout: 'document',
}
</script>

進階使用

假設專案的結構這樣

├─pages
│  └─document
│     ├─ index.vue
│     └─ getStarted.vue
├─ index.vue
└─ document.vue

我想要全部的路徑都有Header和Footer，但只有doument底下的頁面要SideBar呢🤔

你可能會想說直接在document.vue裡面再次放入Header跟Footer就好

<!-- layouts/document.vue -->
<template>
  <div>
    <Header></Header>
      <div class="flex">
        <SideBar></SideBar>
        <Nuxt></Nuxt>
      </div>
    <Footer></Footer>
  </div>

雖然確實有用啦，但這個做法不太好

那能夠在layout裡放另一個layout，或者同個頁面放2個layout嗎🤔

當然不行

事實上layout追根究底還是個組件，因此可以把layout當作組件引入另一個layout，以此生成新的layout

首先小改一下default layout

<template>
  <div>
    <Header></Header>
      <div :class="className">
        <Nuxt></Nuxt>
        <!-- 在這邊放slot是為了document底下的頁面放SideBar -->
        <slot />
      </div>
    <Footer></Footer>
  </div>
</template>

把default.vue引入document.vue，並插入SideBar

<!-- layouts/document.vue -->
<template>
  <Default className="flex flex-row-reverse">
    <template>
      <SideBar></SideBar>
    </template>
  </Default>
</template>

<script lang="ts">
import Vue from 'vue';

import Default from './default.vue';

export default Vue.extend({
  name: 'Document',
  components: {
    Default,
  }
})
</script>

參考資料

Nuxt Layouts
Add two layouts in page