Vue Nuxt 3 加入側邊選單

本篇在簡單的Nuxt 3網頁加入側邊選單(Sidebar)。

事前要求

參考「Vue 建立簡單的Nuxt 3網頁」建立簡單的Nuxt 3網頁。

新增頁面

在pages目錄下建立以下頁面：

• home/index.vue - 為/home的預設頁面。
• home/member.vue - 為/home/member路由的頁面。
• home/export.vue - 為/home/export路由的頁面。

home/index.vue

<template>
  <h1>Home</h1>
</template>

home/member.vue

<template>
  <h1>會員設定</h1>
</template>

home/export.vue

<template>
  <h1>出口業務</h1>
</template>

以上頁面都沒特別指定layout，所以都是使用預設的layout，即layouts/default.vue。

新增側邊選單元件

在components目錄下建立Sidebar.vue，作用為側邊選單的元件，內容如下。

Sidebar.vue

<template>
  <aside class="sidebar">
    <ul>
      <li>
        <NuxtLink to="/home/member" active-class="active">
          會員設定
        </NuxtLink>
      </li>
      <li>
        <NuxtLink to="/home/export" active-class="active">
          出口業務
        </NuxtLink>
      </li>
    </ul>
  </aside>
</template>

修改layouts/default.vue

主要是把Sidebar.vue元件加入到layout/default.vue中，修改後內容如下。

layout/default.vue

<script setup>
import Sidebar from '~/components/Sidebar.vue'
import Header from '~/components/Header.vue'
</script>

<template>
  <div>
    <Header />

    <div style="display:flex">
      <Sidebar />

      <main style="padding:16px;flex:1">
        <slot />
      </main>
    </div>
  </div>
</template>

新增layouts/about.vue

在layouts目錄下建立about.vue，作用為關於我們頁面(pages/about.vue)的版面配置，內容如下。

<script setup>
import Header from '~/components/Header.vue'
</script>

<template>
  <div>
    <Header />

    <main>
      <slot />
    </main>
  </div>
</template>

修改pages/about.vue

修改pages/about.vue，使用definePageMeta設定layouts/about.vue為使用的版面配置。

pages/about.vue

<script setup>
definePageMeta({
  layout: 'about'
})
</script>

<template>
  <h1>About page</h1>
</template>

github

顯示效果如下。

接著參考Nuxt 3的動態路由頁面。