【nuxt3】nuxt/contentでmarkdownファイルを読み込む

この記事の環境

"nuxt": "^3.8.0",
"@nuxt/content": "^2.8.5", //今回使用するモジュール

nuxt/contentとは？

markdownファイルによるコンテンツ管理を助けてくれるモジュールです。

これです：content - Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv or .json files and creates a powerful data layer for your application. Bonus, use Vue components in Markdown with the MDC syntax.

使い方の例

1.インストール

#どちらか好きな方
yarn add @nuxt/content --dev
npm i -D @nuxt/content

2.nuxt.config.tsに記述

export default {
    //...（前略）
  modules: [
    [
      '@nuxtjs/content'
      ]
  ],
    //...（後略）
}

3.markdownファイルを格納するディレクトリを作成

まず、ルートにcontentディレクトリを作成します。

nuxt/contentはデフォルトでこのcontentディレクトリからmdファイルを検索してくれるので、ここにmdファイルを格納していくことになります。

4.markdownファイルを作成

contentの中にtest.mdを作成します。

以下のように内容を記述してみます。

---
title: テストタイトル
category: test-category
date: 2023-10-28
---

## テスト見出し
本文テスト

5.markdownファイルを取得・表示する

取得・表示を行うために、仮にpagesディレクトリにtest.vueを作成します。pagesディレクトリがルートにない場合は作成しましょう。

ここまでで、ファイル構成は以下のようになっています。

  content
  └── test.md
  pages
  └── test.vue

test.vueの中身を次のように記述します。

<template>
        <ContentDoc v-slot="{ doc }">
            <ContentRenderer :value="doc" />
        </ContentDoc>
</template>

/testにアクセスしてみましょう。これだけでmdファイルの中身が表示されているはずです！

応用

とりあえず取得・表示を試すことができました。

次の記事で、今回用いたContentDocの仕様について解説し、もう少しブログらしい構成を作ってみます。

次の記事