---
# System prepended metadata

title: "\U0001F3C5 Day 3 - 使用指令建立 Layouts "
tags: [2024 Nuxt 直播班]

---


# 🏅 Day 3 - 使用指令建立 Layouts 

## 今日學習目標

- 了解 Nuxt3 中的 Layouts 概念
- 使用 Nuxt3 指令建立 Layout
- 在頁面中使用指定的 Layout

## 前言

Day1 與 Day2 的學習中，建立 pages 資料夾後，在 app.vue 有使用 [<NuxtPage />](https://nuxt.com/docs/api/components/nuxt-page) 元件渲染 /pages 下的頁面元件。

```html
<!-- app.vue --> 
<template>
  <NuxtPage />
</template>
```

 app.vue 作為 Nuxt3 預設的進入點，網站有共用內容的時候可以放在 app.vue ，例如 : 頁首與頁尾

```html
<!-- app.vue --> 
<template>
  <heaader>頁首</header>
  <NuxtPage />
  <footer>頁尾</footer>
</template>
```

上述做法在全部的頁面都會呈現相同的內容。在部分頁面希望指定不同的頁首與頁尾的情況，就需要改成使用 Nuxt3 的模板功能。

## 預設 Layout

Nuxt3 預設會將 default.vue 作為預設的模板。當頁面元件與  `<NuxtLayout>` 沒有特別指定模板，將會使用 default.vue  作為預設的 Layout 。

步驟一.  使用 `npx nuxi add layout default`  指令建立預設模板

default.vue 內的 `<slot />` 插槽用途為顯示頁面的內容。

```html
<!-- layouts/default.vue -->
<template>
	<header>預設模板的表頭</header>
  <slot />
  <footer>預設模板的表尾</footer>
</template>
```

步驟二. 在  app.vue  加入 `<NuxtLayout>` 元件來啟用模板。

```html
<!-- app.vue --> 
<template>
  <h1>最外層的 App.vue </h1>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
```

## 具名  Layout

除了預設模板以外，還可以新增多個模板，以下以建立 another  模板為例 :

步驟一.  使用 `npx nuxi add layout another`   指令建立 another  模板。

```html
<!-- layouts/another.vue -->
<template>
	<header> another 模板的表頭</header>
  <slot />
  <footer> another 模板的表尾</footer>
</template>
```

### 在頁面指定使用具名  Layout

步驟一.  建立頁面。 以 about 頁面為例，可以使用 `npx nuxi add page` 指令來建立頁面，或是手動建立 pages/about.vue 檔案

```html
<!-- pages/about.vue -->
<template>
	<div class="about">
    <h1>關於我</h1>
  </div>
</template>
```

步驟二.  在  pages/about.vue 使用 [**definePageMeta](https://nuxt.com/docs/api/utils/define-page-meta)**  指定使用 another  模板。設定  definePageMeta  之後，pages/about.vue 就不會使用預設模板 default.vue。

```html
<script setup>
definePageMeta({
  layout: 'another'
});
</script>

<template>
	<div class="about">
    <h1>關於我</h1>
  </div>
</template>
```

<br>

> 今日學習的[範例 Code - 資料夾: day3-named-layout](https://github.com/hexschool/nuxt-daily-tasks-2024)


## 題目
請 fork 這一份 [模板](https://github.com/jasonlu0525/nuxt3-live-question/tree/day3-layout) ，完成以下全部條件 : 

- 使用 Nuxt3 Layout  功能拆分前台與後台的頁首頁尾區塊
- 前台 index.vue 與 about.vue 頁面皆使用 default.vue 模板 ( 預設 Layout ）
- 後台 admin/index.vue 與  admin/order.vue 頁面皆使用 admin.vue 模板 ( 具名  Layout )

## 回報流程

將答案上傳至 GitHub 並複製 GitHub  repo 連結貼至底下回報就算完成了喔 !
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!--   

解答 : https://github.com/jasonlu0525/nuxt3-live-answer/tree/day3-layout

-->




回報區
---
| #   | Discord | Github / 答案 |
| --- | ----- | ----- |
|1|bb84729|[Github repo](https://github.com/lelialan/NuxtLayout-practice)|
|2|Rocky|[Github repo](https://github.com/WuRocky/Nuxt-Day3-Layouts.git)|
|3|kevinhes|[Github repo](https://github.com/kevinhes/nuxt-daily-mission/tree/day3)|
|4|LinaChen|[Github repo](https://github.com/Lina-SHU/nuxt3-live-question)|
| 5 | 樂樂 | [GitHub repo](https://github.com/PinyiW0/NuxtDailyHw) |
|6|Steven|[GitHub repo](https://github.com/y7516552/nuxt3-live-question/tree/day3-layout)|
| 7 | dragon | [GitHub repo](https://github.com/peterlife0617/2024-nuxt-training-homework01/tree/feature/day03) |
| 8 | NeiL | [GitHub repo](https://github.com/Neil10241126/nuxt-demo/tree/day3-layout) |
| 9 | wei_Rio | [GitHub repo](https://github.com/wei-1539/nuxtDailyHomeWork) |
| 10 | 松鼠 | [GitHub repo](https://github.com/meishinro/dailyMissionThree) |
| 11 | 小木馬 | [GitHub repo](https://github.com/wern0531/nuxt3-project) |
| 12 | Ming | [GitHub repo](https://github.com/ming77712/2024-nuxt3-daily01) |
| 13 | hannahTW | [GitHub repo](https://github.com/hangineer/nuxt3-live-question) |
| 14 | Jarek | [GitHub repo](https://github.com/WuRocky/Nuxt-Day3-Layouts/blob/main/package.json) |
| 15 | 眼睛 | [GitHub repo](https://github.com/Thrizzacode/nuxt3-live-question/tree/day3-layout) |
| 16 | MY | [GitHub repo](https://github.com/ahmomoz/nuxt3-live-question) |
|17|stan| [GitHub repo](https://github.com/haoxiang16/nuxt-app/tree/Day3-layout) |
|18|Eden|[Github repo](https://github.com/1denx/NuxtDailyHw)|
|19|好了啦|[Github repo](https://github.com/ZhangZJ0906/nuxt-live)|
|20|Ariel|[Github repo](https://github.com/Ariel0508/nuxtHw)|
|21|阿榮|[GitHub repo](https://github.com/Peg-L/hex-nuxt3-project)|
| 22 | Tough life |[Github repo](https://github.com/hakuei0115/Nuxt_testing)|
|23|Jim Lin|[GitHub repo](https://github.com/junhoulin/Nuxt3-hw-day3)|
|24|Otis|[GitHub repo](https://github.com/olivier615/nuxt3-live-question1111)|
|25|runweiting|[GitHub repo](https://github.com/runweiting/2024-NUXT-Task/tree/day3)|
| 26 | Ching | [Github repo](https://github.com/huangching07/2024-nuxt-daily) |
| 27 | wicebing | [Github repo](https://github.com/wicebing/nuxt3-live-question) |
| 28 | tanuki狸 |[Github repo](https://github.com/tanukili/Nuxt-2024-week01-2/tree/day3-layout)|
| 29 | barry1104 |[Github repo](https://github.com/barrychen1104/nuxt3-live-question/tree/day3-layout)|
|30|hsin yu|[Github repo](https://github.com/dogwantfly/nuxt3-daily-task-live-question/commit/490dafce1872f661e00d42fe58a3936b7cfa7d82)|
|31|sponge|[Github repo](https://github.com/tw30006/nuxt3-live-question/tree/day3-layout)|
|32|Fabio20|[Github repo](https://github.com/fabio7621/nuxt3-live-day3)|
|33|小蹦|[Github repo](https://github.com/lgk559/hex-Nuxt3/tree/day3_Layouts)|
|34| 阿塔 | [GitHub repo](https://github.com/QuantumParrot/2024-Hexschool-Nuxt-Camp-Daily-Task) | 
|35|YI|[Github repo](https://github.com/sming0305/NUXT-learn)|
|36|Adonis|[Github repo](https://github.com/yuna1060416/2024Nuxt3Homework/tree/day03)|
|37|hoyiiiii|[Github repo](https://github.com/heyi5478/nuxt3-live-question)|
|38|Nielsen|[Github repo](https://github.com/asz8621/nuxt3-daily-task/tree/day3-layout)|
|39| lidelin | [Github repo](https://github.com/Lide/nuxt3-live-question/tree/day3-layout)|
|40| Johnson | [Github repo](https://github.com/tttom3669/2024_hex_nuxt_daily/tree/day3-layout)|
<!-- 複製模板
|...|...|[Github repo]()|
 -->