經過了前面的過程，感覺 module 已經完成的 七七八八了!

但我想讓他更完整一點~讓元件有展示的頁面，方便未來在引入元件時有預覽的效果，就像安裝 tailiwind 之後會有一個展示頁一樣

step 1: 記得從引入 @nuxt/kit 引入 extendPages

    // module.ts
import { extendPages } from '@nuxt/kit'

step 2: 接下來我們先嘗試引入 button 的頁面吧!

    // module.ts
    extendPages((pages) => {
      pages.push({
        path: '/demo/button',
        file: resolver.resolve('./runtime/pages/demo', 'button.vue'),
      })
    })

這邊可以透過 push()、pop()、shift()、unshift()等方法來新增或刪除頁面

step 3: 然後到 playground 加入 <NuxtPage />

// playground/app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

!https://i.imgur.com/QFOQD0W.png

打開 devtool 就可以看到路徑成功引入囉!

動態路由引入 Dynamic-routes

以往如果遇到需要動態路由時，在 nuxt 我們的結構會長這樣

-| pages/
---| index.vue
---| demo/
-----| [id].vue

那這個 [id].vue 的檔案要如何引入呢.…

step 1: 先到 src/runtime/pages/demo 裡面建立一個[id].vue(一般名稱也可以，例如 id.vue)

// src/runtime/pages/demo/[id].vue
<template>
  <h1>Dynamic-routes</h1>
  <p>page-id: {{ $route.params.id }}</p>
</template>

step 2: 接著用 extendPages 將這頁擴充進去，注意path的部分，在需要動態呈現的部份加上 :

    extendPages((pages) => {
      pages.push({
        path: '/demo/:id',
        file: resolver.resolve('./runtime/pages/demo', 'id.vue'),
      })
    })

extendPages: https://nuxt.com/docs/api/kit/pages