Nuxt ContentでコンテンツのMarkdown文字列を取得するメモ📝

Nuxt Contentを使って開発していると、パース済みのMarkdown構造ではなく、元の生テキストを取得したいケースがあり、ちょっとハマったのでメモ📝

結論

公式ドキュメントのRaw Contentに記載の通り、content.config.tsのschemaでrawbodyを指定してあげれば良い。

// content.config.ts
import { defineCollection, z } from '@nuxt/content'

export default defineCollection({
  markdown: {
    // スキーマでrawbodyを定義する
    schema: z.object({
      rawbody: z.string(),
    })
  }
})

通常のNuxt Contentの挙動

Nuxt ContentでqueryCollectionを使ってMarkdownファイルを取得すると、デフォルトではContentCollectionItem#bodyにはパース済みのMarkdown（MarkdownRootオブジェクト）が格納されています。

// 通常のNuxt Content取得方法
const files = await queryContent().where({ ... }).find();
// files[0].body は MarkdownRoot オブジェクト

これは構造化されたデータとして扱うには便利ですが、元のMarkdown文字列そのものが必要なケースでは不便です。

生のMarkdown文字列を取得する方法

公式ドキュメントによると、生のMarkdown文字列を取得するにはcontent/content.config.tsファイルでスキーマ定義をするだけでOKです。

// content/content.config.ts
import { defineCollection, z } from '@nuxt/content'

export default defineCollection({
  markdown: {
    // スキーマでrawbodyを定義する
    schema: z.object({
      rawbody: z.string(),
    })
  }
})

この設定により、ContentCollectionItem#rawbodyプロパティから生のMarkdown文字列が取得できるようになります。

// Markdownの生文字列を取得
const article = await queryContent('articles').where({ slug: 'my-article' }).findOne();
const rawMarkdownText = article.rawbody;
console.log(rawMarkdownText); // 元のMarkdown文字列

参考

github.com