昨天成功的引入了元件的展示頁，接下來就要引入有 layout 的父頁面 demo.vue ，將展示做得更完整~

第十二天的完成狀態

step 1: 引入 addLayout

 import { addLayout } from '@nuxt/kit'

step 2: 將 demo-layout.vue 的路徑放在第一個參數，名稱則放在第二個參數。

addLayout(resolver.resolve('./runtime/layouts/demo-layout.vue'), 'sealdemo-layout')

名稱對應在 pages/demo.vue 的 <NuxtLayout>

// pages/demo.vue
<template>
  <NuxtLayout name="seal-demo-layout">
    <NuxtPage />
  </NuxtLayout>
</template>

step 3: tailwind.config.ts 新增 layout 編譯

content: [
    './src/runtime/components/**/*.{vue,jsx,tsx}',
    './src/runtime/pages/**/*.{vue,jsx,tsx}',
    './src/runtime/layouts/*.{vue,jsx,tsx}', // 新增 layout 編譯
  ]

step 4: 如果 logo 是引入 assets/ 資料夾下的圖檔請先註解掉 ，否則會看到 Nuxt 找不到對應檔案的提示，導致畫面無法出現~接下來再處理圖片引入的問題!

          <div class="flex items-center">
            <a class="navigation-logo" href="/">
	              <div class="w-10 mr-2">
	               <!-- 先註解掉 logo -->
                  <!-- <img src="@/assets/images/seal.png" alt="logo"> -->
                </div>
                我的 UI 元件庫
            </a>
            <div
              class="navigation-menu flex items-center pr-5 duration-150 ease-in hover:scale-125"
              @click="isSidebarFold = !isSidebarFold"
            >
              <Icon
                name="mdi:arrow-collapse-right"
                :class="{'rotate-180': isSidebarFold}"
              />
            </div>
          </div>
        </div>

做到這邊嘗試 npm run dev 一下看看成果….

呃~看起來 layout 確實有引入了，css 跟 sidebar 的收折也都是正常的

缺少的是鑲嵌在 layout 中的子頁面以及旁邊的 sidebar 項目

 [Vue Router warn]: No match found for location with path "/api/sidebar-item"

讓我們先來處理子頁面的問題吧!

step 5: 調整 extendPages

先前我在引入頁面時是這樣寫的

// module.ts
const files = fs.readdirSync(resolver.resolve('./runtime/pages/demo'))

extendPages((pages) => {
	// 這裡引入 demo
	pages.push({
        name: 'demo',
        file: resolver.resolve('./runtime/pages/demo.vue'),
        path: '/demo',
      })
  //這裡引入 demo 底下的各個子頁面
	files.forEach((demoPage) => {
        pages.push({
          name: `demo-${demoPage}`.replace('.vue', ''),
          file: resolver.resolve(`./runtime/pages/demo/${demoPage}`),
          path: `/demo/${demoPage.replace('.vue', '')}`,
        })
      })
    })

雖然這樣子寫，路徑是正常的
但 Nuxt 明顯不知道 demo.vue 與其底下頁面的關係，以至於 <NuxtPage>沒有發揮作用

讓我們修改一下寫法，在 extendPages時將子頁面放入 children 內

// module.ts
extendPages((pages) => {
 pages.push({
        file: resolver.resolve('./runtime/pages/demo.vue'),
        path: '/demo',
        children: files.map((demoPage) => {
          if (demoPage === '[id].vue') {
            return {
              name: 'demo-id',
              file: resolver.resolve(`./runtime/pages/demo/${demoPage}`),
              path: `/demo/:id`,
            }
          }
          return {
            name: `demo-${demoPage}`.replace('.vue', ''),
            file: resolver.resolve(`./runtime/pages/demo/${demoPage}`),
            path: `/demo/${demoPage.replace('.vue', '')}`,
          }
        })
      })
})

調整完之後就子頁面就跟父頁面的關係連結起來嚕
嵌套的部分也正常呈現了!

那麼明天再繼續處理 sidebar 項目引入以及圖片引入的問題~

PS. 如果出現了以下的提示

Internal server error: ENOENT: no such file or directory, open '/virtual:nuxt:.............../playground/.nuxt/layouts.default.f8b75d86.vue’

可以檢查看看是不是 layout 裡面放了 <style> 的樣式設定，挪到 asset/ 的 .css 再引入也許可以解決。

addLayout : https://nuxt.com/docs/api/kit/layout