Content 是一個基於檔案的 CMS，可以支援的檔案類型有 .md, .yml, .csv 和 .json，快速的把靜態資料檔案 和 Vue 的元件結合。

使用 Content 之後 page, components 的設置會和單純的 Nuxt3 環境不太一樣，今天就先從最基本的設定來做調整。

1. 安裝 Content

npm install --save-dev @nuxt/content

2. 修改 nuxt.config，在 modules 中加入 @nuxt/content

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

3. 在專案根目錄底下建立 content 資料夾，在裡面新增一個 Markdown 格式的檔案 (這邊先命名為 index.md)，加入一些簡單的 Markdown 語法。

# Hello, Content
- markdown
- json

4. 在專案的 pages 資料夾中新增一個檔案，名稱是 [...slug].vue ，之前的文章中有介紹過，這個特殊的檔案名稱是 catch-all route（沒有符合的路由名稱就會導向這個頁面），編輯這個檔案，在裡面加入用來渲染 Content 的元件。

<template>
  <main>
    <ContentDoc />
  </main>
</template>

5. 執行 npm run dev 會發現首頁會顯示 content/index.md 的資料，也轉成對應的 html 標籤了。
   
   目前的畫面還非常陽春，明天再繼續結合 component 來做美化。