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

## 今日學習目標

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

## 前言

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

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

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

<!-- 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 />` 插槽用途為顯示頁面的內容。

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

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

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

## 具名 Layout

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

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

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

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

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

<!-- 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。

<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://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]()|
-->